/* ==========================================================================
   TradeCanvas overrides
   --------------------------------------------------------------------------
   Fixes that logically belong in assets/sass/, but style.css is minified and
   compiled from that sass and the build toolchain isn't part of this
   codebase - anything edited directly in style.css would be lost on the next
   recompile. This file is enqueued after 'screen' in functions.php, so these
   rules win without touching the compiled output.

   If the sass build is ever restored, these should be folded back into the
   relevant partial and this file emptied. Each block notes its sass home.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Checkout: billing / shipping column alignment
   Sass home: assets/sass/woocommerce/_checkout.scss

   The billing column's field wrapper is laid out as a two-column grid, but
   its shipping counterpart never got the same rule - so billing showed
   First/Last name side by side while shipping stacked them full width, and
   the two columns' rows stopped lining up. Mirroring the rule fixes the
   asymmetry.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.woocommerce-checkout .shipping_wrap .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
		align-items: end;
	}

	.woocommerce-checkout .shipping_wrap .woocommerce-shipping-fields__field-wrapper .form-row-first,
	.woocommerce-checkout .shipping_wrap .woocommerce-shipping-fields__field-wrapper .form-row-last {
		width: 100%;
	}

	/* Fields in both columns should start on the same line. The billing column
	   is headed by an <h3>, the shipping column by a checkbox + label, and the
	   two render at different heights - which pushed the shipping fields down
	   relative to billing regardless of the grid above. Giving both heading
	   rows a shared min-height levels the two columns without depending on
	   either one's natural height. */
	.woocommerce-checkout .shipping_wrap .woocommerce-billing-fields > h3,
	.woocommerce-checkout .shipping_wrap #ship-to-different-address {
		display: flex;
		align-items: center;
		min-height: 40px;
		margin-bottom: 20px;
	}

	/* #ship-to-different-address carries its own margin from the compiled
	   stylesheet; the rule above owns the spacing now, so stop it doubling up. */
	.woocommerce-checkout .shipping_wrap #ship-to-different-address label {
		margin-bottom: 0;
	}
}


/* --------------------------------------------------------------------------
   Referral code button glitch
   Sass home: assets/sass/woocommerce/_referral_code.scss

   `.link-button-wrapper` is rendered by the WooRewards plugin, and the theme
   styles it with the buttondefault mixin - yellow fill, 50px pill radius, and
   an arrow bolted on as an unconditional ::after.

   When the plugin swaps that wrapper's contents for the revealed referral
   code, all of that styling stays put: the pill radius on a now box-shaped
   element reads as "a rounded corner square", and the ::after arrow has
   nothing to point at but is still drawn. Hence the reported glitch.

   Scoped to :has(input, textarea) so it can only ever apply once a code field
   is actually present - the initial button state has no input inside it, so
   this cannot affect how the button first renders.
   -------------------------------------------------------------------------- */
.referral_codes_section .three_col_bottom .link-button-wrapper:has(input, textarea) {
	background-color: transparent;
	border-radius: 0;
	padding: 0;
	width: 100%;
	display: flex;
	gap: 8px;
	white-space: normal;
	text-transform: none;
}

/* the arrow is button furniture - it has no meaning next to a code field */
.referral_codes_section .three_col_bottom .link-button-wrapper:has(input, textarea)::after {
	content: none;
}

.referral_codes_section .three_col_bottom .link-button-wrapper:has(input, textarea):hover {
	filter: none;
}


/* --------------------------------------------------------------------------
   My Subscriptions: the no-subscription state
   Sass home: assets/sass/woocommerce/ (no partial exists for this tab yet)

   Shown when a member has no active plan - a plain statement that there's no
   subscription, then the bronze/silver/gold plans with prices and perks.
   Card styling deliberately borrows the existing .status_card language rather
   than inventing a new one.
   -------------------------------------------------------------------------- */
.woocommerce-subscriptions .no_subscription_notice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	padding: 14px 18px;
	background-color: #FFFFFF;
	border-radius: 8px;
}

.woocommerce-subscriptions .no_subscription_notice p {
	margin: 0;
}

.woocommerce-subscriptions .no_subscription_notice svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.woocommerce-subscriptions .subscription_plans_wrap {
	margin-top: 24px;
}

.woocommerce-subscriptions .subscription_plans {
	display: grid;
	gap: 20px;
	/* one column on small screens, three once there's room - the count is
	   fixed at three tiers, so no auto-fit guessing needed */
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.woocommerce-subscriptions .subscription_plans {
		grid-template-columns: repeat(3, 1fr);
	}
}

.woocommerce-subscriptions .subscription_plan_card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background-color: #FFFFFF;
	border-radius: 8px;
}

.woocommerce-subscriptions .subscription_plan_card .price_wrap {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 4px 0 8px;
}

.woocommerce-subscriptions .subscription_plan_card .price_wrap h2,
.woocommerce-subscriptions .subscription_plan_card .price_wrap h6 {
	margin: 0;
}

.woocommerce-subscriptions .subscription_plan_card .benefit_wrap {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.woocommerce-subscriptions .subscription_plan_card .benefit_wrap p {
	margin: 0;
}

.woocommerce-subscriptions .subscription_plan_card .benefit_wrap .tick {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 4px;
}

.woocommerce-subscriptions .subscription_plans_cta {
	margin-top: 20px;
}


/* --------------------------------------------------------------------------
   Price calculator: Paper Type pills
   Sass home: assets/sass/import/_calculator.scss

   Paper Type was a dropdown while Canvas Type opposite it was pill buttons.
   The markup is now a .selector_group, which picks up the generic
   .selector_group .tag pill styling on its own — this only matches the
   bottom spacing .canvas_type already has, so the two sides sit level.

   Note the .print_select rule in _calculator.scss is now dead, along with
   the #print_type_select id. Tidy up if that partial is next touched.
   -------------------------------------------------------------------------- */
.section_calculator .product_section .print_type {
	margin-bottom: 12px;
}


/* --------------------------------------------------------------------------
   Footer newsletter signup (Klaviyo)
   Sass home: assets/sass/import/_footer.scss

   The arrow icon used to sit directly inside .email_sign_up, absolutely
   positioned. It's now wrapped in a real submit <button>, so the button takes
   over the positioning and the svg sits statically inside it.

   Vertical centring: the original design pinned the arrow at top: 7px, which
   only centres it if the input is exactly the height that assumed. On the
   live site it rendered low. Instead the input and button share a wrapper
   (.email_sign_up_field) that is exactly the input's height, and the button
   centres within that with top: 50% / translateY(-50%). That holds whatever
   the input's height ends up being. The wrapper matters: centring against the
   whole form would pull the arrow down, since the form also contains the
   status message.
   -------------------------------------------------------------------------- */
footer .newsletter_wrap .email_sign_up .email_sign_up_field {
	position: relative;
}

/* An inline input leaves a few px of descender space beneath it, making the
   wrapper taller than the input and pulling the centred arrow low. Block
   display removes it; the input is already width: 100%, so layout is unchanged. */
footer .newsletter_wrap .email_sign_up .email_sign_up_field input {
	display: block;
}

footer .newsletter_wrap .email_sign_up .email_sign_up_submit {
	position: absolute;
	right: -14px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

/* Must out-rank the compiled rule, which is:
     footer .footer_top .newsletter_wrap .content_wrap .email_sign_up svg
       { position:absolute; right:-14px; top:7px }   <- 4 classes, 2 elements
   An earlier, shorter selector here (3 classes) lost to it, so the icon kept
   top:7px / right:-14px - now relative to the button - and sat 7px low and
   14px right inside a correctly centred button. Using the same path plus the
   button class (5 classes) wins, and top/right are reset explicitly. */
footer .footer_top .newsletter_wrap .content_wrap .email_sign_up .email_sign_up_submit svg {
	position: static;
	top: auto;
	right: auto;
	display: block;
}

footer .newsletter_wrap .email_sign_up .email_sign_up_submit:disabled {
	cursor: progress;
	opacity: 0.5;
}

footer .newsletter_wrap .email_sign_up .email_sign_up_submit:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 50%;
}

footer .newsletter_wrap .email_sign_up_status {
	margin: 8px 0 0;
	font-size: 13px;
	min-height: 1em;
}

footer .newsletter_wrap .email_sign_up_status[data-state="error"] {
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   .screen-reader-text — visually hidden, still announced by screen readers
   Sass home: none yet

   A standard class every WordPress theme is expected to provide: WordPress
   core and WooCommerce both output elements carrying it (form labels,
   pagination text, and so on) and rely on the theme to hide them visually.
   This theme never defined it, so that text may have been showing on screen.
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}