/* ==========================================================================
   SAYSSY - Cart, Checkout, My Account and Order received
   ==========================================================================

   Why this file exists.

   These four pages were being styled from four different places at once:
   a block in sayssy.css written for the classic templates, a second block
   written later for the same templates, a third written for the block based
   Cart and Checkout, and several sections of compat.css. Rules from all four
   applied at the same time and contradicted each other, so the page that
   rendered was whichever declaration happened to win on specificity rather
   than the one that was meant to.

   Everything for these pages now lives here, once. Nothing in sayssy.css or
   compat.css touches them any more, so there is a single place to look and a
   single place to change.

   Loaded after compat.css, and only on these pages.

   The order below is deliberate:

     1  container and gutter
     2  page chrome
     3  parent theme resets
     4  shared controls
     5  cart
     6  checkout
     7  payment methods
     8  my account
     9  order received
    10  phone

   Read it top to bottom and each section only depends on the ones above it.
   ========================================================================== */

/* ==========================================================================
   1. Container and gutter

   Kept exactly as it was worked out against Astra's own stylesheet, because
   this part was correct and the reasoning is worth keeping:

       @media (max-width: 1200px) {
         .ast-separate-container .entry-content > .alignfull { ... }
       }

   Astra pulls any full width block out of the container with a negative
   margin. Two other problems sat underneath it: the gutter was applied on two
   wrappers at once, so the desktop had double padding, and Astra picks a
   different wrapper depending on the content layout, so padding set on one is
   ignored on another.

   One element owns the width and the gutter: .ast-container, which is present
   in every Astra content layout. Everything inside it is flush.
   ========================================================================== */

body.woocommerce-cart .ast-container,
body.woocommerce-checkout .ast-container,
body.woocommerce-account .ast-container,
body.woocommerce-order-received .ast-container {
	width: 100% !important;
	max-width: 1220px !important;   /* 1180 content + 2 x 20 gutter */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;
}

body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-account #primary,
body.woocommerce-order-received #primary,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main,
body.woocommerce-order-received .site-main,
body.woocommerce-cart .ast-article-single,
body.woocommerce-checkout .ast-article-single,
body.woocommerce-account .ast-article-single,
body.woocommerce-order-received .ast-article-single,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content,
body.woocommerce-order-received .entry-content,
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-account .entry-header,
body.woocommerce-order-received .entry-header,
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce,
body.woocommerce-account .woocommerce,
body.woocommerce-order-received .woocommerce {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	float: none !important;
}

/* Cancel Astra's full bleed pull on these pages only. Full width blocks
   elsewhere on the site still bleed as intended. */
body.woocommerce-cart .entry-content > .alignfull,
body.woocommerce-cart .entry-content .alignfull,
body.woocommerce-cart .entry-content > .alignwide,
body.woocommerce-cart .entry-content .alignwide,
body.woocommerce-checkout .entry-content > .alignfull,
body.woocommerce-checkout .entry-content .alignfull,
body.woocommerce-checkout .entry-content > .alignwide,
body.woocommerce-checkout .entry-content .alignwide,
body.woocommerce-account .entry-content > .alignfull,
body.woocommerce-account .entry-content .alignfull,
body.woocommerce-account .entry-content > .alignwide,
body.woocommerce-account .entry-content .alignwide,
body.woocommerce-order-received .entry-content .alignfull,
body.woocommerce-order-received .entry-content .alignwide {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.woocommerce-cart .ast-article-single,
body.woocommerce-checkout .ast-article-single,
body.woocommerce-account .ast-article-single,
body.woocommerce-order-received .ast-article-single {
	padding-top: 0 !important;
	padding-bottom: 30px !important;
}

body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-account .entry-header,
body.woocommerce-order-received .entry-header {
	padding-top: 22px !important;
	padding-bottom: 6px !important;
	text-align: left !important;
	border: 0 !important;
}

/* Nothing on these pages needs a sidebar. */
body.woocommerce-cart #secondary,
body.woocommerce-checkout #secondary,
body.woocommerce-account #secondary,
body.woocommerce-order-received #secondary { display: none !important; }

/* ==========================================================================
   2. Page chrome
   ========================================================================== */

/* A soft grey canvas so the white cards read as cards. compat.css paints
   every .site-content white with !important for the rest of the site, which
   is why this has to be !important as well rather than simply later. */
body.woocommerce-cart .site-content,
body.woocommerce-checkout .site-content,
body.woocommerce-account .site-content,
body.woocommerce-order-received .site-content { background-color: var(--sy-bg-2) !important; }

body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-account .entry-title,
body.woocommerce-order-received .entry-title {
	font-size: 22px !important;
	font-weight: 800 !important;
	letter-spacing: -.01em;
	margin: 0 !important;
	text-transform: none !important;
}

/* ---- Notices ---- */

body.sy .woocommerce-message,
body.sy .woocommerce-info,
body.sy .woocommerce-error,
body.sy .woocommerce-notices-wrapper > ul {
	border: 1px solid var(--sy-line) !important;
	border-top: 3px solid var(--sy-orange) !important;
	border-radius: var(--sy-r) !important;
	background: #fff !important;
	padding: 14px 18px !important;
	font-size: 13.5px;
	line-height: 1.55;
	list-style: none;
	margin: 0 0 18px !important;
	color: var(--sy-ink);
}
body.sy .woocommerce-error { border-top-color: var(--sy-red) !important; }
body.sy .woocommerce-message::before,
body.sy .woocommerce-info::before,
body.sy .woocommerce-error::before { display: none !important; }
body.sy .woocommerce-error li { list-style: none; margin: 0 0 4px; }
body.sy .woocommerce-error li:last-child { margin-bottom: 0; }

/* ==========================================================================
   3. Parent theme and WooCommerce resets

   WooCommerce and Astra both clear floats with ::before and ::after on the
   very containers this file turns into flex and grid. An empty pseudo element
   inside a flex row is a flex item: it takes a slot, and the real columns get
   pushed out of place. That single detail is what made the checkout look like
   it had lost its layout, and it is why every container below is stated here
   rather than relied on being clean.
   ========================================================================== */

body.sy form.checkout::before,
body.sy form.checkout::after,
body.sy .col2-set::before,
body.sy .col2-set::after,
body.sy #customer_details::before,
body.sy #customer_details::after,
body.sy .u-columns::before,
body.sy .u-columns::after,
body.sy .cart-collaterals::before,
body.sy .cart-collaterals::after,
body.sy .woocommerce-billing-fields__field-wrapper::before,
body.sy .woocommerce-billing-fields__field-wrapper::after,
body.sy .woocommerce-shipping-fields__field-wrapper::before,
body.sy .woocommerce-shipping-fields__field-wrapper::after,
body.sy .woocommerce-cart-form::before,
body.sy .woocommerce-cart-form::after,
body.sy .sy-acct__grid::before,
body.sy .sy-acct__grid::after {
	content: none !important;
	display: none !important;
}

/* Nothing on these pages is floated by us. */
body.sy .woocommerce .col2-set .col-1,
body.sy .woocommerce .col2-set .col-2,
body.sy .cart-collaterals .cart_totals,
body.sy .cart-collaterals .cross-sells,
body.sy .woocommerce form .form-row {
	float: none !important;
	width: 100% !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/*
 * Cross sells are removed rather than styled.
 *
 * The theme overrides content-product.php, so every product list on the site
 * renders Sayssy card markup. That markup is laid out by the .sy-grid rules,
 * and WooCommerce prints the cross sell list without that class, so the cards
 * fell back to WooCommerce's own floated grid and came out broken. A wholesale
 * buyer working from a design list is not being served by an upsell on the
 * cart page either, so the row is dropped.
 */
body.sy .cart-collaterals .cross-sells,
body.sy .woocommerce .cross-sells { display: none !important; }

/* Astra puts list markers back on anything inside content. */
body.sy .woocommerce ul,
body.sy .woocommerce ol { list-style: none; }
body.sy .woocommerce ul li::marker { content: none; }

body.sy .woocommerce h2,
body.sy .woocommerce h3 { text-transform: none !important; }

/* ==========================================================================
   4. Shared controls: buttons and form fields
   ========================================================================== */

body.sy .woocommerce .button,
body.sy .woocommerce button.button,
body.sy .woocommerce input.button,
body.sy .woocommerce a.button,
body.sy .woocommerce #place_order {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 24px !important;
	border: 1px solid var(--sy-line) !important;
	border-radius: var(--sy-r-sm) !important;
	background: #fff;
	color: var(--sy-ink);
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
body.sy .woocommerce .button:hover,
body.sy .woocommerce button.button:hover,
body.sy .woocommerce a.button:hover {
	border-color: var(--sy-ink) !important;
	background: #fff;
	color: var(--sy-ink);
}

body.sy .woocommerce .button.alt,
body.sy .woocommerce button.button.alt,
body.sy .woocommerce input.button.alt,
body.sy .woocommerce a.button.alt,
body.sy .woocommerce .checkout-button,
body.sy .woocommerce #place_order {
	background-color: var(--sy-orange) !important;
	border-color: var(--sy-orange) !important;
	color: #fff !important;
}
body.sy .woocommerce .button.alt:hover,
body.sy .woocommerce button.button.alt:hover,
body.sy .woocommerce input.button.alt:hover,
body.sy .woocommerce a.button.alt:hover,
body.sy .woocommerce .checkout-button:hover,
body.sy .woocommerce #place_order:hover {
	background-color: var(--sy-orange-dark) !important;
	border-color: var(--sy-orange-dark) !important;
	color: #fff !important;
}

/* ---- Form fields ---- */

body.sy .woocommerce form .form-row {
	padding: 0 !important;
	margin: 0 0 15px !important;
	display: block;
}

body.sy .woocommerce form .form-row label,
body.sy.woocommerce-account .woocommerce-form label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--sy-ink-2);
	margin: 0 0 6px;
	text-transform: none !important;
	line-height: 1.4;
}
body.sy .woocommerce .form-row label .required,
body.sy .woocommerce .form-row abbr.required {
	color: var(--sy-red);
	border: 0 !important;
	text-decoration: none !important;
}
body.sy .woocommerce .form-row .optional { color: var(--sy-muted); font-weight: 400; }

body.sy .woocommerce form .form-row input.input-text,
body.sy .woocommerce form .form-row textarea,
body.sy .woocommerce form .form-row select,
body.sy .woocommerce form .form-row input[type="password"],
body.sy .woocommerce .select2-container .select2-selection--single {
	width: 100% !important;
	height: 46px;
	padding: 0 14px !important;
	border: 1px solid var(--sy-line) !important;
	border-radius: var(--sy-r-sm) !important;
	background: #fff;
	background-image: none;
	font-size: 14px;
	color: var(--sy-ink);
	box-sizing: border-box;
	box-shadow: none !important;
	margin: 0 !important;
}
body.sy .woocommerce form .form-row textarea {
	height: 92px;
	padding: 12px 14px !important;
	line-height: 1.5;
}
body.sy .woocommerce form .form-row input.input-text:focus,
body.sy .woocommerce form .form-row textarea:focus,
body.sy .woocommerce form .form-row select:focus,
body.sy .woocommerce form .form-row input[type="password"]:focus {
	border-color: var(--sy-orange) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--sy-orange-soft) !important;
}

body.sy .woocommerce .select2-container { width: 100% !important; }
body.sy .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding-left: 0;
	color: var(--sy-ink);
}
body.sy .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }

body.sy .woocommerce .form-row .description,
body.sy .woocommerce .form-row span.description {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--sy-muted);
}

/* Fields we fix to one value and hide, such as the country selector. */
body.sy .sy-hidden-field { display: none !important; }

/* ==========================================================================
   5. Cart
   ========================================================================== */

body.sy .woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	overflow: hidden;
	margin: 0 0 22px;
}
body.sy .woocommerce table.shop_table th {
	background: var(--sy-bg-2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sy-muted);
	padding: 13px 14px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--sy-line);
}
body.sy .woocommerce table.shop_table td {
	padding: 15px 14px;
	border: 0;
	border-bottom: 1px solid var(--sy-line-2);
	font-size: 14px;
	vertical-align: middle;
}
body.sy .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }

body.sy .woocommerce table.cart img,
body.sy .woocommerce-cart-form__cart-item .product-thumbnail img {
	width: 68px;
	height: 90px;
	object-fit: cover;
	border-radius: var(--sy-r-sm);
	border: 1px solid var(--sy-line);
	display: block;
	max-width: none;
}
body.sy .woocommerce table.cart td.product-thumbnail { width: 84px; }

body.sy .woocommerce td.product-name a {
	color: var(--sy-ink);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	line-height: 1.4;
}
body.sy .woocommerce td.product-name a:hover { color: var(--sy-orange); }
body.sy .woocommerce td.product-name .sayssy-cart-sku {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--sy-muted);
}
/*
 * The Sizes / Pack / Rate list.
 *
 * WooCommerce prints this as a definition list and floats dt left with dd
 * beside it. Setting both to display:inline, as this file used to, made every
 * value run together on one line and left the labels stranded underneath:
 *
 *     Sizes: M, L, XL, XXL  1 set x 4 pcs = 4 pieces  ₹625 per piece
 *     Pack:
 *     Rate:
 *
 * A two column grid keeps each label with its own value, on its own line, and
 * the float is cleared explicitly because the parent theme sets it too.
 */
body.sy .woocommerce td.product-name dl.variation,
body.sy .woocommerce .woocommerce-checkout-review-order-table dl.variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 3px 10px;
	margin: 7px 0 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--sy-muted);
}
body.sy .woocommerce dl.variation dt {
	grid-column: 1;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 600;
	color: var(--sy-ink-2);
}
body.sy .woocommerce dl.variation dd {
	grid-column: 2;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 400;
}
body.sy .woocommerce dl.variation p { margin: 0 !important; display: block; }

/* Name, code and how many, in that order of importance. */
body.sy .woocommerce td.product-name .sayssy-cart-sku {
	display: block;
	margin: 4px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--sy-muted);
}
body.sy .woocommerce td.product-name .product-quantity {
	display: inline-block;
	margin: 6px 0 0;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--sy-bg-2);
	font-size: 11px;
	font-weight: 700;
	color: var(--sy-ink-2);
}

body.sy .woocommerce td.product-price,
body.sy .woocommerce td.product-subtotal { font-weight: 700; white-space: nowrap; }

body.sy .woocommerce a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--sy-bg-2) !important;
	color: var(--sy-muted) !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none !important;
}
body.sy .woocommerce a.remove:hover { background: var(--sy-red) !important; color: #fff !important; }

body.sy .woocommerce .quantity input.qty {
	width: 76px;
	height: 42px;
	padding: 0 6px !important;
	text-align: center;
	border: 1px solid var(--sy-line) !important;
	border-radius: var(--sy-r-sm) !important;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	color: var(--sy-ink);
	box-sizing: border-box;
}

/* ---- Coupon and update row ---- */

body.sy .woocommerce .cart .actions { padding: 14px !important; background: var(--sy-bg-2); }
body.sy .woocommerce .cart .coupon { display: flex; gap: 8px; flex-wrap: wrap; }
body.sy .woocommerce .cart .coupon input#coupon_code {
	width: 190px;
	height: 46px;
	padding: 0 14px !important;
	border: 1px solid var(--sy-line) !important;
	border-radius: var(--sy-r-sm) !important;
	font-size: 14px;
	box-sizing: border-box;
}

/* ---- Totals ---- */

/*
 * The totals box.
 *
 * It was a card with a bordered table inside it, so it read as a box inside a
 * box, and every line was the same weight and colour. A buyer skimming it
 * could not tell the shipping charge from the tax from the amount they were
 * about to pay. One card, no inner border, and each row is a quiet label on
 * the left against a solid value on the right.
 */
body.sy .cart-collaterals { width: 100%; }

body.sy .cart-collaterals .cart_totals {
	width: 100% !important;
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	padding: 20px;
	box-sizing: border-box;
}
body.sy .cart-collaterals .cart_totals h2 {
	margin: 0 0 4px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var(--sy-line);
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: -.01em;
	text-transform: none !important;
}

body.sy .cart_totals table.shop_table {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	margin: 0 0 16px !important;
	overflow: visible;
	table-layout: fixed;
}
body.sy .cart_totals table.shop_table th,
body.sy .cart_totals table.shop_table td {
	padding: 12px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--sy-line-2) !important;
	background: transparent !important;
	vertical-align: top;
	letter-spacing: 0;
}
body.sy .cart_totals table.shop_table th {
	width: 42%;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: none;
	color: var(--sy-muted);
	text-align: left;
}
body.sy .cart_totals table.shop_table td {
	text-align: right;
	font-size: 14px;
	font-weight: 700;
	color: var(--sy-ink);
}

/* The shipping cell carries a method, a destination and a link, so it needs
   its own rhythm rather than one run-on paragraph. */
body.sy .cart_totals .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
body.sy .cart_totals .woocommerce-shipping-methods li { margin: 0 0 4px; }
body.sy .cart_totals .woocommerce-shipping-methods label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sy-ink);
	margin: 0;
	cursor: pointer;
}
body.sy .cart_totals .woocommerce-shipping-destination {
	display: block;
	margin: 6px 0 0;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--sy-muted);
}
body.sy .cart_totals .shipping-calculator-button {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sy-orange-dark);
	text-decoration: none;
}

/* Tax lines are information, not a headline. */
body.sy .cart_totals .tax-rate th,
body.sy .cart_totals .tax-rate td { font-size: 12.5px; }
body.sy .cart_totals .tax-rate td { font-weight: 600; color: var(--sy-ink-2); }

/* Our own piece and set summary row. */
body.sy .sayssy-piece-summary th,
body.sy .sayssy-piece-summary td {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--sy-muted) !important;
}

body.sy .cart_totals .order-total th,
body.sy .cart_totals .order-total td {
	border-bottom: 0 !important;
	padding-top: 14px !important;
}
body.sy .cart_totals .order-total th { font-size: 14px; font-weight: 800; color: var(--sy-ink); }
body.sy .cart_totals .order-total td {
	font-size: 20px;
	font-weight: 800;
	color: var(--sy-orange);
}

body.sy .woocommerce .wc-proceed-to-checkout { padding: 0 !important; margin: 0; }
body.sy .woocommerce .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	height: 52px;
	font-size: 15px !important;
}

/*
 * Cart layout: the list on the left, the totals on the right.
 *
 * WooCommerce prints the form and the totals as siblings and floats them, and
 * the totals ended up under the list at the bottom of a long page. Placing
 * every child of .woocommerce explicitly means the notices, the back bar and
 * anything a plugin adds take a full width row of their own instead of
 * landing in a column.
 */
@media (min-width: 1000px) {
	body.sy.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 372px;
		gap: 0 28px;
		align-items: start;
	}
	body.sy.woocommerce-cart .woocommerce > * { grid-column: 1 / -1; }
	body.sy.woocommerce-cart .woocommerce > .woocommerce-cart-form {
		grid-column: 1;
		width: 100% !important;
		float: none !important;
	}
	body.sy.woocommerce-cart .woocommerce > .cart-collaterals {
		grid-column: 2;
		width: 100% !important;
		float: none !important;
		position: sticky;
		top: 86px;
	}
}

/* ==========================================================================
   6. Checkout
   ========================================================================== */

.sy-co__left,
.sy-co__right {
	min-width: 0;
	box-sizing: border-box;
}

body.sy.woocommerce-checkout #customer_details .col-1,
body.sy.woocommerce-checkout #customer_details .col-2 {
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	padding: 20px;
	margin: 0 0 16px;
	box-sizing: border-box;
}
/*
 * The empty second column.
 *
 * col-2 holds the shipping form and the order notes. With shipping forced to
 * the billing address and order notes switched off in WooCommerce, both print
 * nothing and the column is left as a bordered white box with nothing in it.
 *
 * :empty alone does not catch it. WooCommerce leaves newlines and tabs inside
 * the div, and a text node of whitespace is enough for :empty to fail, which
 * is why the box was still on screen. :not(:has(*)) asks the real question:
 * are there any element children. Both are listed so the rule still works if
 * the markup is ever whitespace free.
 */
body.sy.woocommerce-checkout #customer_details .col-2:empty,
body.sy.woocommerce-checkout #customer_details .col-2:not(:has(*)) {
	display: none !important;
}

body.sy.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	padding: 20px;
	box-sizing: border-box;
	position: static;
}
body.sy.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	border-radius: 0;
	margin: 0 0 14px;
	background: transparent;
	overflow: visible;
}

body.sy.woocommerce-checkout h3,
body.sy.woocommerce-checkout #order_review_heading {
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: -.01em;
	color: var(--sy-ink);
	margin: 0 0 14px !important;
	padding: 0 0 11px !important;
	border-bottom: 1px solid var(--sy-line);
	text-transform: none !important;
}

/* ---- The review table ---- */

body.sy .woocommerce-checkout-review-order-table th,
body.sy .woocommerce-checkout-review-order-table td {
	padding: 11px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--sy-line-2) !important;
	font-size: 13.5px;
	background: transparent !important;
	text-transform: none;
	letter-spacing: 0;
	color: var(--sy-ink);
}
body.sy .woocommerce-checkout-review-order-table thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sy-muted);
}
body.sy .woocommerce-checkout-review-order-table td { text-align: right; }
body.sy .woocommerce-checkout-review-order-table td.product-name,
body.sy .woocommerce-checkout-review-order-table th { text-align: left; }

/* ==========================================================================
   The order summary line: picture, detail, price

   Markup comes from woocommerce/checkout/review-order.php in the theme. Each
   item is one table cell spanning both columns, laid out as a flex row, which
   is why none of the two column table rules below apply to it.
   ========================================================================== */

body.sy .woocommerce-checkout-review-order-table tbody td.product-name {
	padding: 12px 0 !important;
	text-align: left !important;
}

.sy-oi {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}
.sy-oi * { box-sizing: border-box; }

.sy-oi__thumb {
	position: relative;
	flex: 0 0 52px;
	width: 52px;
	height: 66px;
	border-radius: 6px;
	overflow: visible;
	background: var(--sy-bg-2);
}
.sy-oi__thumb img {
	width: 52px !important;
	height: 66px !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--sy-line) !important;
	border-radius: 6px !important;
	object-fit: cover;
	object-position: center top;
	display: block;
	box-shadow: none !important;
}

/* The quantity as a badge on the picture, the way every shop shows it, rather
   than as "× 4" adrift in the middle of the product name. */
.sy-oi__qty {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--sy-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	font-style: normal;
	line-height: 20px;
	text-align: center;
}

.sy-oi__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sy-oi__name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--sy-ink);
}

.sy-oi__sku {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--sy-muted);
}

.sy-oi__meta {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 1px 8px;
	margin-top: 4px;
}
.sy-oi__row { display: contents; }
.sy-oi__row i {
	grid-column: 1;
	font-style: normal;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--sy-muted);
	white-space: nowrap;
}
.sy-oi__row em {
	grid-column: 2;
	font-style: normal;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--sy-ink-2);
}

.sy-oi__price {
	flex: 0 0 auto;
	padding-left: 6px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--sy-ink);
	white-space: nowrap;
	text-align: right;
}
body.sy .woocommerce-checkout-review-order-table tfoot .order-total th,
body.sy .woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 16px;
	font-weight: 800;
	color: var(--sy-orange);
	border-bottom: 0 !important;
	padding-top: 14px !important;
}
/*
 * The item list scrolls, the money does not.
 *
 * A ten design order made the summary taller than the screen, which pushed
 * the subtotal, the tax lines, the payment method and the Place order button
 * below the fold of a sticky column. The buyer could see what they had picked
 * but not what they owed or how to pay it, which is exactly backwards.
 *
 * The table is split: the head and the foot stay put, the body scrolls at a
 * fixed height. A table cannot normally do this, so each part is given its own
 * display and table-layout: fixed keeps the two columns lined up across all
 * three pieces. The column widths have to be stated once and shared, or the
 * head, the body and the foot each measure themselves and drift apart.
 */
body.sy .woocommerce-checkout-review-order-table { width: 100%; }

/*
 * Column widths belong to the head and the foot only.
 *
 * This is what squeezed every item into a narrow strip and wrapped the product
 * name one letter per line. An item row is a single cell with colspan="2", and
 * that cell is also :first-child, so a rule saying "the first cell is 64% wide"
 * applied to it and the whole line was built inside 64% of an already narrow
 * summary. The item then grew tall enough to trigger the scrollbar with one
 * product in the cart.
 *
 * The head and the foot really are two column tables and still need the widths.
 * The item rows are laid out by flexbox inside the cell, so they need to be
 * left alone entirely.
 */
body.sy .woocommerce-checkout-review-order-table thead th:first-child,
body.sy .woocommerce-checkout-review-order-table tfoot th { width: 58%; }
body.sy .woocommerce-checkout-review-order-table thead th:last-child,
body.sy .woocommerce-checkout-review-order-table tfoot td { width: 42%; }

/* One cell, full width, laid out by the flex row inside it. */
body.sy .woocommerce-checkout-review-order-table tbody tr.cart_item { display: block; width: 100%; }
body.sy .woocommerce-checkout-review-order-table tbody tr.cart_item > td {
	display: block;
	width: 100% !important;
	max-width: none !important;
}

@media (min-width: 1000px) {
	body.sy .woocommerce-checkout-review-order-table { display: block; }

	body.sy .woocommerce-checkout-review-order-table thead,
	body.sy .woocommerce-checkout-review-order-table tfoot,
	body.sy .woocommerce-checkout-review-order-table tfoot tr {
		display: table;
		width: 100%;
		table-layout: fixed;
	}

	body.sy .woocommerce-checkout-review-order-table tbody {
		display: block;
		max-height: 320px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* A thin scrollbar, so the summary does not gain a grey gutter. */
	body.sy .woocommerce-checkout-review-order-table tbody { scrollbar-width: thin; }
	body.sy .woocommerce-checkout-review-order-table tbody::-webkit-scrollbar { width: 5px; }
	body.sy .woocommerce-checkout-review-order-table tbody::-webkit-scrollbar-thumb {
		background: var(--sy-line);
		border-radius: 3px;
	}

	/* A hairline under the list so it is obvious the totals are separate. */
	body.sy .woocommerce-checkout-review-order-table tfoot {
		border-top: 1px solid var(--sy-line);
		margin-top: 2px;
	}
}

/* ---- The money rows ---- */

body.sy .woocommerce-checkout-review-order-table tfoot th {
	font-size: 12.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--sy-muted);
	text-align: left;
}
body.sy .woocommerce-checkout-review-order-table tfoot td {
	font-size: 14px;
	font-weight: 700;
	color: var(--sy-ink);
	text-align: right;
}

body.sy .woocommerce-checkout-review-order-table .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}
body.sy .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li { margin: 0; }
body.sy .woocommerce-checkout-review-order-table .woocommerce-shipping-methods label {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--sy-ink);
}
body.sy .woocommerce-checkout-review-order-table .tax-rate th,
body.sy .woocommerce-checkout-review-order-table .tax-rate td { font-size: 12.5px; }
body.sy .woocommerce-checkout-review-order-table .tax-rate td { font-weight: 600; color: var(--sy-ink-2); }
body.sy .woocommerce-checkout-review-order-table .sayssy-piece-summary th,
body.sy .woocommerce-checkout-review-order-table .sayssy-piece-summary td {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--sy-muted) !important;
}
body.sy .woocommerce-checkout-review-order-table tfoot .order-total th { font-size: 14px; color: var(--sy-ink); }

/* ---- Terms and the privacy notice under the button ---- */

body.sy.woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin: 0 0 10px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--sy-muted);
}
body.sy.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0 0 14px !important;
}
body.sy.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 12px;
	line-height: 1.5;
	color: var(--sy-ink-2);
}
body.sy.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	margin: 0 !important;
	font-weight: 500 !important;
	cursor: pointer;
}
body.sy.woocommerce-checkout .woocommerce-form__label-for-checkbox input {
	width: auto !important;
	height: auto !important;
	margin: 2px 0 0 !important;
	flex: 0 0 auto;
}

/* ---- Two columns on a desktop ---- */

/*
 * Grid, not flex, and every child placed by hand.
 *
 * Flex sizes an item from its content and then negotiates. That negotiation is
 * what collapsed this layout: Astra ships its own checkout rules that put a
 * width and a float on #customer_details and #order_review, and once those
 * applied inside the wrappers the flex bases stopped meaning anything. The
 * form came out as a narrow column of address fields, a wide empty gap, and an
 * order summary squeezed to its minimum content width with every line wrapping
 * mid word.
 *
 * A grid track is a fixed promise. 1fr and 384px are the columns whatever the
 * children think they want, every child is placed explicitly so nothing can be
 * pushed out of position by an extra element, and the floats and widths those
 * parent theme rules set are cleared right here rather than hoping they lose
 * on specificity somewhere else.
 */
@media (min-width: 1000px) {
	body.sy.woocommerce-checkout form.checkout {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 384px !important;
		gap: 0 30px !important;
		align-items: start !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	/* Anything a plugin prints straight into the form takes a full width row
	   of its own instead of stealing a column. */
	body.sy.woocommerce-checkout form.checkout > * { grid-column: 1 / -1; }

	body.sy.woocommerce-checkout form.checkout > .sy-co__left {
		grid-column: 1;
		width: 100% !important;
		max-width: none !important;
		float: none !important;
		min-width: 0;
	}

	/* Follows the buyer down a long address form, so the total they are about
	   to commit to is never off screen. 86px clears the sticky header. */
	body.sy.woocommerce-checkout form.checkout > .sy-co__right {
		grid-column: 2;
		width: 100% !important;
		max-width: none !important;
		float: none !important;
		min-width: 0;
		position: sticky;
		top: 86px;
	}

	/* Astra and WooCommerce both lay the classic checkout out themselves, with
	   a percentage width and a float on each of these. Inside our columns that
	   is exactly wrong, and it is the reason the summary rendered 150px wide. */
	body.sy.woocommerce-checkout #customer_details,
	body.sy.woocommerce-checkout #order_review,
	body.sy.woocommerce-checkout #order_review_heading,
	body.sy.woocommerce-checkout .woocommerce-checkout-review-order {
		width: 100% !important;
		max-width: none !important;
		float: none !important;
		clear: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Below the two column breakpoint the same resets still matter, because the
   floats do not switch themselves off. */
body.sy.woocommerce-checkout #customer_details,
body.sy.woocommerce-checkout #order_review,
body.sy.woocommerce-checkout .woocommerce-checkout-review-order {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

/* ---- Billing and shipping field grid ---- */

body.sy.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.sy.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}
body.sy.woocommerce-checkout .form-row-wide,
body.sy.woocommerce-checkout .form-row.notes { grid-column: 1 / -1; }

/*
 * Half width fields flow rather than being pinned to column 1 and column 2.
 *
 * Pinning looks tidier in the stylesheet and is wrong in practice: the moment
 * one of a pair is missing, the survivor stays nailed to its column and leaves
 * an empty box beside it. That is what put a hole next to the email field when
 * the phone row was not rendered. Letting them flow closes the gap and a pair
 * still sits side by side.
 */
body.sy.woocommerce-checkout .form-row-first,
body.sy.woocommerce-checkout .form-row-last { grid-column: span 1; }

body.sy.woocommerce-checkout #ship-to-different-address {
	margin: 4px 0 14px;
	font-size: 14px;
	font-weight: 700;
}
body.sy.woocommerce-checkout #ship-to-different-address label {
	display: flex !important;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sy-ink);
	margin: 0 !important;
	cursor: pointer;
}
body.sy.woocommerce-checkout #ship-to-different-address input { margin: 0; width: auto !important; }

body.sy.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 12px;
	line-height: 1.55;
	color: var(--sy-muted);
}

body.sy.woocommerce-checkout #place_order {
	width: 100% !important;
	height: 54px !important;
	float: none !important;
	font-size: 15px !important;
	letter-spacing: .01em;
}

.sy-cotrust {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--sy-muted);
}
.sy-cotrust svg { flex: 0 0 auto; margin-top: 1px; }

/* ---- The summary a phone can open ---- */

.sy-cosum {
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	margin: 0 0 16px;
	overflow: hidden;
	box-sizing: border-box;
}
.sy-cosum * { box-sizing: border-box; }

.sy-cosum__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 15px !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--sy-ink) !important;
}

.sy-cosum__label {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 13.5px;
	font-weight: 800;
}
.sy-cosum__label i {
	font-style: normal;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--sy-muted);
}

.sy-cosum__right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
.sy-cosum__total {
	font-size: 15px;
	font-weight: 800;
	color: var(--sy-orange);
	white-space: nowrap;
}
.sy-cosum__right .sy-i {
	transition: transform .18s ease;
	color: var(--sy-muted);
}
.sy-cosum__bar[aria-expanded="true"] .sy-cosum__right .sy-i { transform: rotate(180deg); }

.sy-cosum__body {
	padding: 2px 15px 14px;
	border-top: 1px solid var(--sy-line-2);
}

.sy-cosum__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid var(--sy-line-2);
}
.sy-cosum__item:last-of-type { border-bottom: 0; }

.sy-cosum__thumb {
	flex: 0 0 46px;
	width: 46px;
	height: 58px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--sy-bg-2);
}
.sy-cosum__thumb img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
	display: block;
}

.sy-cosum__name {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.sy-cosum__name b {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--sy-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sy-cosum__name i { font-style: normal; font-size: 11px; color: var(--sy-muted); }

.sy-cosum__price {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 800;
	color: var(--sy-ink);
}
.sy-cosum__note {
	margin: 10px 0 0 !important;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--sy-muted);
}

/* The desktop has the real summary pinned beside the form, so this would be
   the same information twice. */
@media (min-width: 1000px) {
	.sy-cosum { display: none; }
}

/* ---- The bar pinned to the bottom of a phone ---- */

.sy-cobar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 950;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--sy-line);
	box-shadow: 0 -6px 24px rgba(17, 17, 26, .08);
	box-sizing: border-box;
}

.sy-cobar__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 0 0 auto;
	min-width: 92px;
}
.sy-cobar__meta span {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sy-muted);
}
.sy-cobar__meta strong {
	font-size: 16px;
	font-weight: 800;
	color: var(--sy-ink);
	line-height: 1.2;
}

.sy-cobar__btn { flex: 1 1 auto; height: 48px; }
.sy-cobar__btn.is-busy { opacity: .6; pointer-events: none; }

/* The bar and the bottom navigation cannot both own the bottom of a phone
   screen, and on the checkout the button matters more than the nav. The
   floating contact button goes too: it sits exactly where the thumb reaches
   for Place order. */
body.woocommerce-checkout .sy-bnav,
body.woocommerce-checkout .sy-cartbar,
body.woocommerce-checkout .sy-fab { display: none !important; }

@media (min-width: 1000px) {
	.sy-cobar { display: none; }
}

/* ==========================================================================
   7. Payment methods
   ========================================================================== */

body.sy.woocommerce-checkout #payment {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

body.sy.woocommerce-checkout #payment ul.payment_methods {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
	list-style: none;
}

body.sy.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	position: relative;
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: 10px;
	padding: 0;
	margin: 0 0 10px;
	overflow: hidden;
	list-style: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.sy.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.is-on {
	border-color: var(--sy-orange);
	box-shadow: 0 0 0 1px var(--sy-orange) inset;
}

body.sy.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	pointer-events: none;
}

body.sy.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 14px 15px;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--sy-ink) !important;
	cursor: pointer;
	line-height: 1.35;
	text-transform: none !important;
}
body.sy.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--sy-line);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.sy.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.is-on > label::before {
	border-color: var(--sy-orange);
	box-shadow: 0 0 0 4px var(--sy-orange) inset;
}
body.sy.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
	max-height: 24px;
	width: auto;
	margin: 0 0 0 auto !important;
	border: 0 !important;
	border-radius: 0 !important;
}

body.sy.woocommerce-checkout #payment div.payment_box {
	background: var(--sy-bg-2);
	border: 0;
	border-top: 1px solid var(--sy-line-2);
	border-radius: 0;
	margin: 0;
	padding: 14px 15px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--sy-ink-2);
	width: auto;
}
body.sy.woocommerce-checkout #payment div.payment_box::before,
body.sy.woocommerce-checkout #payment div.payment_box::after {
	content: none !important;
	display: none !important;
}
body.sy.woocommerce-checkout #payment div.payment_box p { margin: 0 0 10px; }
body.sy.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
body.sy.woocommerce-checkout #payment div.payment_box .form-row { margin: 10px 0 0 !important; }
body.sy.woocommerce-checkout #payment div.payment_box input.input-text { background: #fff; height: 44px; }

/* ---- Credit against an agent referral ---- */

.sy-credit { margin: 0; }
.sy-credit__lead {
	margin: 0 !important;
	font-size: 13px;
	line-height: 1.6;
	color: var(--sy-ink);
}
.sy-credit__limit {
	margin: 8px 0 0 !important;
	font-size: 12px;
	font-weight: 700;
	color: var(--sy-orange-dark);
}

/* ---- Cash on delivery with an advance ---- */

.sy-cod, .sy-cod * { box-sizing: border-box; }
.sy-cod {
	margin: 12px 0 0;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r-sm);
	background: #fff;
	overflow: hidden;
}
.sy-cod__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 13px;
	font-size: 13px;
	color: var(--sy-ink);
}
.sy-cod__row + .sy-cod__row { border-top: 1px solid var(--sy-line-2); }
.sy-cod__row strong { font-weight: 800; }
.sy-cod__note {
	margin: 9px 0 0 !important;
	padding: 0 13px 12px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--sy-muted);
}

/* ==========================================================================
   8. My Account
   ========================================================================== */

/* ---- Signed out: create an account first, sign in second ---- */

/* No max-width. Capping this at 980px inside a 1180px container left the
   panels floating in the middle of the page while everything above and below
   them ran the full width, which read as a misalignment rather than as a
   centred block. */
.sy-acct { width: 100%; }
.sy-acct, .sy-acct * { box-sizing: border-box; }

/* Tabs are a phone control. On a desktop both panels are on screen together,
   so a tab strip would only be a lid over something already visible. */
.sy-acct__tabs {
	display: flex;
	gap: 6px;
	padding: 4px;
	margin: 0 0 16px;
	background: var(--sy-bg-2);
	border-radius: 10px;
}
.sy-acct__tab {
	flex: 1 1 0;
	height: 42px;
	border: 0 !important;
	border-radius: 8px !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sy-muted) !important;
	cursor: pointer;
	outline: 0;
	transition: background .15s ease, color .15s ease;
}
.sy-acct__tab.is-on {
	background: #fff !important;
	color: var(--sy-ink) !important;
	box-shadow: 0 1px 3px rgba(17, 17, 26, .1) !important;
}

.sy-acct__grid { display: block; }

.sy-acct__panel {
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	padding: 22px 20px;
	margin: 0 0 16px;
	width: 100% !important;
	float: none !important;
}

/*
 * Without JavaScript both panels are visible and the page still works, which
 * is why the hiding is keyed to a class the script adds rather than printed
 * into the HTML. Hiding a form in CSS and revealing it with JavaScript would
 * lock out anybody whose script failed to load.
 */
.sy-acct.is-tabbed .sy-acct__panel { display: none; }
.sy-acct.is-tabbed .sy-acct__panel.is-on { display: block; }

.sy-acct__head { margin: 0 0 18px; }
.sy-acct__head h2 {
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: -.015em;
	color: var(--sy-ink);
	text-transform: none !important;
}
.sy-acct__head p {
	margin: 0 !important;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--sy-muted);
}

.sy-acct__panel .woocommerce-form {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
}

.sy-acct__submit { margin: 4px 0 0 !important; }

/*
 * The submit buttons are painted here in full.
 *
 * They carry .sy-btn--primary, and compat.css sets white text on that class
 * with !important. The background came from `body.sy .woocommerce .button`,
 * which is three classes deep and paints a plain white button. White text on
 * a white button: the Create account button was on the page the whole time,
 * as an empty bordered box.
 */
.sy-acct__submit button,
.sy-acct__panel button[type="submit"] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 50px !important;
	float: none !important;
	padding: 0 20px !important;
	border: 1px solid var(--sy-orange) !important;
	border-radius: var(--sy-r-sm) !important;
	background: var(--sy-orange) !important;
	background-color: var(--sy-orange) !important;
	color: #fff !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
.sy-acct__submit button:hover,
.sy-acct__panel button[type="submit"]:hover {
	background: var(--sy-orange-dark) !important;
	background-color: var(--sy-orange-dark) !important;
	border-color: var(--sy-orange-dark) !important;
	color: #fff !important;
}

/* Sign in is the secondary action of the two, so it is outlined. */
.sy-acct__panel--login .sy-acct__submit button {
	background: #fff !important;
	background-color: #fff !important;
	border-color: var(--sy-line) !important;
	color: var(--sy-ink) !important;
}
.sy-acct__panel--login .sy-acct__submit button:hover {
	background: #fff !important;
	background-color: #fff !important;
	border-color: var(--sy-ink) !important;
	color: var(--sy-ink) !important;
}

/*
 * The registration fields are printed with class "woocommerce-form-row
 * form-row-wide" and no plain "form-row", so every .form-row rule in this file
 * missed them and their help text rendered at body size. Both class names are
 * matched from here on.
 */
.sy-acct__panel .woocommerce-form-row label,
.sy-acct__panel .form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sy-ink-2);
	text-transform: none !important;
}
.sy-acct__panel .woocommerce-form-row,
.sy-acct__panel .form-row { margin: 0 0 15px !important; padding: 0 !important; }

.sy-acct__panel .woocommerce-form-row input.input-text,
.sy-acct__panel .woocommerce-form-row input[type="email"],
.sy-acct__panel .woocommerce-form-row input[type="tel"],
.sy-acct__panel .woocommerce-form-row input[type="text"],
.sy-acct__panel .woocommerce-form-row input[type="password"] {
	width: 100% !important;
	height: 46px;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid var(--sy-line) !important;
	border-radius: var(--sy-r-sm) !important;
	background: #fff;
	font-size: 14px;
	color: var(--sy-ink);
	box-sizing: border-box;
	box-shadow: none !important;
}
.sy-acct__panel .woocommerce-form-row input:focus {
	border-color: var(--sy-orange) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--sy-orange-soft) !important;
}

.sy-acct__panel .woocommerce-form-row .description,
.sy-acct__panel .woocommerce-form-row span.description,
.sy-acct__panel .form-row .description {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--sy-muted);
}

/* WooCommerce's privacy notice is body copy by default and dominated the
   panel it sits at the bottom of. */
.sy-acct__panel .woocommerce-privacy-policy-text,
.sy-acct__panel .woocommerce-privacy-policy-text p {
	margin: 0 0 14px !important;
	font-size: 11.5px !important;
	line-height: 1.5 !important;
	color: var(--sy-muted) !important;
}
.sy-acct__panel .woocommerce-privacy-policy-text a { color: var(--sy-orange-dark); }

.sy-acct__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 15px !important;
}
.sy-acct__remember {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--sy-ink-2) !important;
	cursor: pointer;
}
.sy-acct__remember input { margin: 0 !important; width: auto !important; height: auto !important; }
.sy-acct__lost {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sy-orange-dark);
	text-decoration: none;
}

.sy-acct__fine,
.sy-acct__help {
	margin: 12px 0 0 !important;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--sy-muted);
}
.sy-acct__help a { font-weight: 700; color: var(--sy-orange-dark); }

.sy-loginhint {
	margin: 0 0 14px !important;
	padding: 9px 13px;
	border-radius: var(--sy-r-sm);
	background: var(--sy-bg-2);
	font-size: 12.5px;
	color: var(--sy-ink-2);
}

@media (min-width: 861px) {
	.sy-acct__tabs { display: none; }

	.sy-acct__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 22px;
		align-items: start;
	}

	/* Create account is the first cell, which is the whole point of the
	   template override: a brand new wholesale store is nearly all first
	   time buyers. */
	.sy-acct__panel--register { grid-column: 1; }
	.sy-acct__panel--login    { grid-column: 2; }

	.sy-acct.is-tabbed .sy-acct__panel { display: block; }
	.sy-acct__panel { margin: 0; padding: 26px 24px; }

	.sy-acct--login-only .sy-acct__grid {
		grid-template-columns: minmax(0, 520px);
		justify-content: center;
	}
}

/* ---- Email code sign in ---- */

.sy-eotp, .sy-eotp * { box-sizing: border-box; }
.sy-eotp { margin: 0; }

/* The two steps are swapped with the hidden attribute. Stated explicitly
   because a stylesheet that sets display on a bare div beats the browser
   default for [hidden], and the code box would then be on screen from the
   start with nothing to type into it. */
.sy-eotp__step[hidden],
.sy-cosum__body[hidden] { display: none !important; }
.sy-eotp h2 {
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--sy-ink);
	text-transform: none !important;
}
.sy-eotp__lead {
	margin: 0 0 16px !important;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--sy-muted);
}
.sy-eotp label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sy-ink-2);
	text-transform: none !important;
}
.sy-eotp input {
	width: 100%;
	height: 46px;
	margin: 0 0 12px !important;
	padding: 0 14px;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r-sm);
	background: #fff;
	font-size: 14px;
	color: var(--sy-ink);
}
.sy-eotp #sy-eotp-code {
	letter-spacing: .32em;
	font-size: 18px;
	font-weight: 800;
	text-align: center;
}
.sy-eotp input:focus {
	border-color: var(--sy-orange);
	outline: none;
	box-shadow: 0 0 0 3px var(--sy-orange-soft);
}
.sy-eotp .sy-btn { width: 100%; height: 48px; }
.sy-eotp .sy-btn.is-busy { opacity: .6; pointer-events: none; }
.sy-eotp__again,
.sy-eotp__again:hover,
.sy-eotp__again:focus {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	padding: 4px 0 !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sy-muted) !important;
	cursor: pointer;
	outline: 0;
}
.sy-eotp__msg {
	margin: 10px 0 0 !important;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sy-green);
	min-height: 18px;
}
.sy-eotp__msg.is-error { color: var(--sy-red); }

/* ---- Signed in: the dashboard ---- */

body.sy.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	overflow: hidden;
}
body.sy.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--sy-line-2);
}
body.sy.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
body.sy.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sy-ink);
	text-decoration: none;
}
body.sy.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--sy-orange); }
body.sy.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--sy-orange-soft);
	color: var(--sy-orange-dark);
}
body.sy.woocommerce-account .woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	padding: 22px;
}
body.sy.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

@media (min-width: 861px) {
	body.sy.woocommerce-account.logged-in .woocommerce {
		display: grid;
		grid-template-columns: 236px minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	/*
	 * WooCommerce prints an empty notices wrapper as the first child of
	 * .woocommerce. In a two column grid that empty div silently takes the
	 * first cell, which pushed the navigation into the content column and the
	 * content out of the grid altogether. Every child is placed explicitly so
	 * an extra element cannot shift the layout again.
	 */
	body.sy.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	body.sy.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 2;
	}
	body.sy.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 2;
	}

	body.sy.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 100% !important;
		float: none !important;
		margin: 0;
	}
	body.sy.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; }
	body.sy.woocommerce-account .woocommerce-MyAccount-content {
		width: 100% !important;
		float: none !important;
		margin: 0;
	}
}

/* The signed out page is a single block, so the grid above must not apply. */
body.sy.woocommerce-account:not(.logged-in) .woocommerce { display: block; }

/* ==========================================================================
   9. Order received
   ========================================================================== */

body.sy .woocommerce-order {
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	padding: 24px 22px;
}
body.sy .woocommerce-thankyou-order-received {
	font-size: 18px;
	font-weight: 800;
	color: var(--sy-green);
	margin: 0 0 18px;
}
body.sy ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}
body.sy ul.woocommerce-order-overview li {
	background: var(--sy-bg-2);
	border-radius: var(--sy-r-sm);
	padding: 12px 14px;
	border: 0 !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sy-muted);
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
body.sy ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 5px;
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sy-ink);
}

/* ==========================================================================
   10. Phone
   ========================================================================== */

@media (max-width: 782px) {

	body.woocommerce-cart .ast-container,
	body.woocommerce-checkout .ast-container,
	body.woocommerce-account .ast-container,
	body.woocommerce-order-received .ast-container {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	body.woocommerce-cart .entry-title,
	body.woocommerce-checkout .entry-title,
	body.woocommerce-account .entry-title,
	body.woocommerce-order-received .entry-title { font-size: 19px !important; }

	/* Room for whichever fixed bar owns the bottom of the screen. */
	body.woocommerce-cart .site-content,
	body.woocommerce-account .site-content,
	body.woocommerce-order-received .site-content { padding-bottom: 80px !important; }
	body.woocommerce-checkout .site-content { padding-bottom: 84px !important; }

	body.sy.woocommerce-checkout #customer_details .col-1,
	body.sy.woocommerce-checkout #customer_details .col-2,
	body.sy.woocommerce-checkout #order_review,
	body.sy.woocommerce-account .woocommerce-MyAccount-content,
	.sy-acct__panel { padding: 16px !important; }

	/* ---- The cart table becomes a stack of cards ---- */

	body.sy .woocommerce table.shop_table_responsive,
	body.sy .woocommerce table.cart {
		display: block;
		border: 0;
		background: transparent;
		overflow: visible;
	}
	body.sy .woocommerce table.shop_table_responsive thead,
	body.sy .woocommerce table.cart thead { display: none; }
	body.sy .woocommerce table.shop_table_responsive tbody,
	body.sy .woocommerce table.cart tbody { display: block; width: 100%; }

	body.sy .woocommerce table.shop_table_responsive tbody tr.cart_item {
		display: grid;
		grid-template-columns: 76px 1fr;
		grid-template-areas:
			"thumb name"
			"thumb price"
			"qty   sub";
		gap: 4px 12px;
		background: #fff;
		border: 1px solid var(--sy-line);
		border-radius: var(--sy-r);
		padding: 14px;
		margin: 0 0 12px;
		position: relative;
	}
	body.sy .woocommerce table.shop_table_responsive tbody tr.cart_item td {
		display: block;
		border: 0 !important;
		padding: 0 !important;
		text-align: left !important;
		width: auto !important;
	}

	/*
	 * WooCommerce prints the little column labels with
	 * content: attr(data-title) inside its own max-width 768px query, which
	 * is narrower than this one. Restating the content here means the labels
	 * are correct at every width below 782 rather than only below 768.
	 */
	body.sy .woocommerce table.shop_table_responsive tbody tr.cart_item td::before {
		content: attr(data-title);
		display: block;
		margin-bottom: 3px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--sy-muted);
		float: none !important;
	}

	body.sy .woocommerce table.cart td.product-thumbnail { grid-area: thumb; }
	body.sy .woocommerce table.cart td.product-thumbnail::before { display: none; }
	body.sy .woocommerce table.cart td.product-thumbnail img { width: 76px; height: 100px; }

	body.sy .woocommerce table.cart td.product-name { grid-area: name; padding-right: 26px !important; }
	body.sy .woocommerce table.cart td.product-name::before { display: none; }

	body.sy .woocommerce table.cart td.product-price {
		grid-area: price;
		font-size: 13px;
		font-weight: 600;
		color: var(--sy-muted);
	}
	body.sy .woocommerce table.cart td.product-quantity { grid-area: qty; margin-top: 8px; }
	body.sy .woocommerce table.cart td.product-subtotal {
		grid-area: sub;
		margin-top: 8px;
		text-align: right !important;
		align-self: end;
	}
	body.sy .woocommerce table.cart td.product-subtotal::before { text-align: right; }

	body.sy .woocommerce table.cart td.product-remove {
		position: absolute;
		top: 12px;
		right: 12px;
		padding: 0 !important;
	}
	body.sy .woocommerce table.cart td.product-remove::before { display: none; }

	/* The actions row is an ordinary tr among grid rows. */
	body.sy .woocommerce table.cart tbody tr:not(.cart_item) { display: block; width: 100%; }
	body.sy .woocommerce table.cart tbody tr:not(.cart_item) td {
		display: block;
		width: 100% !important;
		border: 0 !important;
	}

	body.sy .woocommerce .cart .actions {
		background: #fff;
		border: 1px solid var(--sy-line);
		border-radius: var(--sy-r);
		padding: 14px !important;
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	body.sy .woocommerce .cart .coupon { width: 100%; }
	body.sy .woocommerce .cart .coupon input#coupon_code { flex: 1 1 auto; width: auto; min-width: 0; }
	body.sy .woocommerce .cart .actions > .button { width: 100%; margin-top: 10px; }

	body.sy .cart-collaterals,
	body.sy .cart-collaterals .cart_totals { max-width: none; }
	body.sy .cart_totals table.shop_table { background: #fff; }

	/* Two columns of address fields do not fit a phone. */
	body.sy.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	body.sy.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
	body.sy.woocommerce-checkout .form-row-first,
	body.sy.woocommerce-checkout .form-row-last { grid-column: 1; }

	body.sy .woocommerce-checkout-review-order-table th,
	body.sy .woocommerce-checkout-review-order-table td { font-size: 13px; }
}

@media (max-width: 400px) {
	body.woocommerce-cart .ast-container,
	body.woocommerce-checkout .ast-container,
	body.woocommerce-account .ast-container,
	body.woocommerce-order-received .ast-container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.sy-cobar__meta { min-width: 84px; }
	.sy-cobar__meta strong { font-size: 15px; }
}