/* Treetale Home — cart / checkout / account polish (<5KB).
   Scoped to Woo page body classes; loaded only on is_cart/is_checkout/is_account_page. */

/* ---- Checkout header (parts/checkout-header.html → pattern theme/checkout-header) ---- */
/* Full-bleed + --site-gutter, exactly like .site-header and the footer, so the
   logo sits on the same left edge as the checkout form below it at every
   width. A max-width cap here would drift away from the body on wide screens. */
.tt-checkout-header__inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 18px var(--site-gutter, 20px);
}

/* Checkout body shares the cart's shell so both align with the header. */
.tt-checkout-main {
	padding: 0 var(--site-gutter, 20px) 96px;
}

.tt-checkout-main > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.woocommerce-checkout .wp-block-woocommerce-checkout {
	margin: 0;
	max-width: none;
}

.tt-checkout-header__logo img {
	display: block;
	height: 18px;
	width: auto;
}

.tt-checkout-header__back {
	color: #1a1a1a;
	font-size: 12px;
	letter-spacing: .1em;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 3px;
}

/* ---- Cart page shell (templates/page-cart.html) ----
   Full-bleed + --site-gutter so the cart's left/right edges line up with the
   header nav and the footer. WP's global padding (32px) does not. */
.tt-cart-main {
	padding: 0 var(--site-gutter, 20px) 96px;
}

.tt-cart-main > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.tt-cart-titlebar {
	align-items: baseline;
	border-bottom: 1px solid rgba(26, 26, 26, .1);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	margin: 0 0 32px;
	padding: 40px 0 16px;
}

.tt-cart-title {
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.tt-cart-continue {
	color: #6e6a5f;
	font-size: 12px;
	letter-spacing: .1em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease;
}

.tt-cart-continue:hover {
	color: #1a1a1a;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Cart body: give the items/summary columns room and keep the summary from
   hugging the line-items on wide screens. */
.woocommerce-cart .wp-block-woocommerce-cart {
	margin: 0;
	max-width: none;
}

/* Cross-sells ("Może Ci się spodobać"): the product-collection cards wrap
   their titles to 1 or 2 lines, which left the Add-to-cart buttons on
   different baselines. Stretch every card and pin the button to the bottom. */
.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product-template__responsive,
.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product-template {
	align-items: stretch;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product-template__responsive > li,
.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product-template > li {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-post-title {
	margin-bottom: .5rem;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-price {
	margin-top: auto;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-button,
.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-button {
	margin-top: .75rem;
}

/* ---- Block cart + checkout: align wc-blocks with the brand ---- */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
	font-family: inherit;
}

.wc-block-components-button:not(.is-link) {
	background: #1a1a1a;
	border: 0;
	border-radius: 0;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	min-height: 52px;
	text-transform: uppercase;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background: #4a4a4a;
	color: #fff;
}

.wc-block-components-checkout-step__heading,
.wc-block-components-title {
	font-weight: 500;
	letter-spacing: .01em;
}

.wc-block-components-checkout-return-to-cart-button,
.wc-block-components-totals-coupon-link {
	color: #1a1a1a;
}

.wc-block-components-product-name {
	color: #1a1a1a;
	font-weight: 500;
}

.wc-block-components-formatted-money-amount {
	font-variant-numeric: tabular-nums;
}

.wc-block-components-radio-control__option,
.wc-block-components-checkbox {
	border-radius: 0;
}

/* Square, ink-bordered payment / shipping option cards */
.wc-block-components-radio-control-accordion-option,
.wc-block-checkout__shipping-method-option {
	border-radius: 0;
}

/* ---- My Account — editorial split (templates/page-my-account.html) ----
   Logged out: form panel left, full-bleed lifestyle image right. The image is
   the PAGE's featured image, so it is swappable in wp-admin with no deploy
   (production is FTP-only); with none set the panel stays a calm sand field
   with the wordmark watermark, which still reads as intentional.
   My Account is still classic PHP (Woo has not blockified it), and global WC
   styles are stripped plugin-side, so every rule below is ours to own. */
.tt-account {
	align-items: stretch;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 78vh;
}

/* The theme's vertical rhythm puts a 32px margin on main and on every child
   group. The split has to sit flush under the header with both columns
   starting level, so it is cancelled here rather than fought per element. */
.tt-account,
.tt-account > * {
	margin-top: 0 !important;
}

.tt-account__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 72px var(--site-gutter, 20px) 88px;
}

.tt-account__inner {
	margin: 0;
	max-width: 420px;
	width: 100%;
}

.tt-account__eyebrow {
	color: #6e6a5f;
	font-size: 11px;
	letter-spacing: .18em;
	margin: 0 0 28px;
	text-transform: uppercase;
}

.tt-account__visual {
	background: #ede8e1;
	overflow: hidden;
	position: relative;
}

.tt-account__visual::before {
	background: url(../images/treetale-home-logo.svg) center/58% no-repeat;
	content: "";
	inset: 0;
	opacity: .07;
	position: absolute;
}

.tt-account__visual .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
	position: relative;
}

.tt-account__visual img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* ---- The Woo form itself ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul,
.woocommerce-account .u-columns.col2-set {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account h2 {
	font-size: clamp(26px, 2.4vw, 32px);
	font-weight: 300;
	letter-spacing: -.01em;
	line-height: 1.15;
	margin: 0 0 32px;
	text-transform: none;
}

/* Ollie fills form.login/register with a tinted card and 32px of padding. The
   editorial panel IS the surface here, so the form itself must be chrome-less
   — and Ollie's stylesheet outranks/outlasts ours, hence !important. */
.woocommerce-account form.login,
.woocommerce-account form.register {
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Password field + Woo's show/hide toggle. Woo's own CSS is stripped
   plugin-side, so without this the button renders as a stray 16x6 box under
   the field instead of an eye inside it. */
.woocommerce-account .password-input {
	display: block;
	position: relative;
}

.woocommerce-account .show-password-input {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A5F' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/18px no-repeat;
	border: 0;
	cursor: pointer;
	height: 24px;
	padding: 0;
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
}

.woocommerce-account .show-password-input.display-password {
	opacity: .55;
}

.woocommerce-account .password-input input.input-text {
	padding-right: 46px;
}

.woocommerce-account form.register {
	border-top: 1px solid rgba(26, 26, 26, .12);
	margin-top: 48px;
	padding-top: 40px;
}

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .woocommerce-form-row--wide {
	margin: 0 0 18px;
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .woocommerce-form__label-for-checkbox {
	color: #6e6a5f;
	display: block;
	font-size: 11px;
	letter-spacing: .12em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-form-row input.input-text,
.woocommerce-account .woocommerce-Input.input-text {
	height: 52px;
	padding: 0 14px;
	width: 100%;
}

.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form__label-for-checkbox {
	align-items: center;
	display: flex;
	gap: 8px;
	letter-spacing: .06em;
	margin: 4px 0 20px;
}

.woocommerce-account .woocommerce-form__input-checkbox {
	accent-color: #1a1a1a;
	height: 15px;
	margin: 0;
	width: 15px;
}

.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button,
.woocommerce-account a.button {
	background: #1a1a1a;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	padding: 18px 26px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 200ms ease;
	width: 100%;
}

.woocommerce-account button.button:hover,
.woocommerce-account a.button:hover {
	background: #4a4a4a;
	color: #fff;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 18px 0 0;
}

.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-privacy-policy-text a {
	color: #6e6a5f;
	font-size: 12px;
	letter-spacing: .04em;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-LostPassword a:hover {
	color: #1a1a1a;
}

.woocommerce-account .woocommerce-privacy-policy-text p {
	color: #6e6a5f;
	font-size: 12px;
	line-height: 1.6;
}

.woocommerce-account .woocommerce-notices-wrapper li,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	border: 1px solid rgba(26, 26, 26, .18);
	font-size: 13px;
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 16px;
}

.woocommerce-account .woocommerce-error {
	border-color: #a3423a;
	color: #a3423a;
}

/* ---- Logged in: the dashboard owns the full width, no hero image ---- */
body.logged-in .tt-account {
	display: block;
	min-height: 0;
}

body.logged-in .tt-account__visual,
body.logged-in .tt-account__eyebrow {
	display: none;
}

body.logged-in .tt-account__panel {
	display: block;
	padding: 56px var(--site-gutter, 20px) 96px;
}

body.logged-in .tt-account__inner {
	max-width: none;
}

body.logged-in .woocommerce-account .woocommerce {
	display: grid;
	gap: 64px;
	grid-template-columns: 210px 1fr;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	color: #6e6a5f;
	display: block;
	font-size: 12px;
	letter-spacing: .1em;
	padding: 11px 0;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid rgba(26, 26, 26, .08);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	color: #1a1a1a;
}

.woocommerce-account .woocommerce-MyAccount-content {
	font-size: 15px;
	line-height: 1.65;
}

.woocommerce-account .woocommerce-MyAccount-content a {
	color: #1a1a1a;
}

.woocommerce-account table.shop_table {
	border: 1px solid rgba(26, 26, 26, .12);
	border-collapse: collapse;
	width: 100%;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	border-bottom: 1px solid rgba(26, 26, 26, .08);
	padding: 13px 14px;
	text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button {
	width: auto;
}

@media (max-width: 900px) {
	.tt-account {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.tt-account__panel {
		padding: 48px var(--site-gutter, 20px) 56px;
	}

	.tt-account__inner {
		max-width: none;
	}

	/* Image stays as the editorial opener but must not eat the whole first
	   screen — the login heading has to be visible above the fold. */
	.tt-account__visual {
		min-height: 30vh;
		order: -1;
	}

	body.logged-in .woocommerce-account .woocommerce {
		gap: 32px;
		grid-template-columns: 1fr;
	}
}

/* ---- Cart suggestions (msf/cart-suggestions) ----
   Reuses the PLP product cards, so plp.css is enqueued on the cart and this
   only has to undo the PLP page shell: plp.css puts the shop's own 80px gutter
   on .grid-wrap, but .tt-cart-main already supplies --site-gutter. */
.tt-cart-suggestions {
	margin: 8px 0 0;
}

.woocommerce-cart .tt-cart-suggestions .grid-wrap {
	padding-left: 0;
	padding-right: 0;
}

.tt-cart-suggestions__heading {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

/* Cross-sells sit inside the cart's line-items column, not the full page, and
   plp.css's breakpoints are viewport-based — at a wide viewport they keep four
   tracks inside that column and the cards get crushed. Size them off the
   container instead. auto-FIT, not auto-fill: with three cross-sells auto-fill
   leaves an empty fourth track and shrinks the cards; auto-fit collapses it so
   they fill the column. */
.woocommerce-cart .tt-cart-suggestions--cross-sell .grid-4 {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.tt-cart-suggestions--cross-sell {
	margin-top: 40px;
}


/* plp.css drops to a single column on phones, which is right for browsing the
   shop but turns a suggestion strip into a full screen of scrolling between
   the basket and the checkout button. Keep suggestions two-up. */
@media (max-width: 768px) {
	/* minmax(0,…), not 1fr: a bare 1fr track floors at the card's min-content
	   width (title + price on one row), which pushed the second column past the
	   viewport edge. */
	.woocommerce-cart .tt-cart-suggestions .grid-4 {
		gap: 24px 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* At half-width the title and price no longer fit on one row. */
	.woocommerce-cart .tt-cart-suggestions .pcard .footer {
		display: block;
	}

	.woocommerce-cart .tt-cart-suggestions .pcard .footer .price {
		display: block;
		margin-top: 4px;
		text-align: left;
	}
}

/* ---- Empty cart ----
   Woo centres its empty state and marks the title with `with-empty-cart-icon`,
   whose ::before is a sad-face SVG from wc-blocks' stylesheet. Swapped for the
   same outline cart mark the header uses, and the headings re-cut to the
   store's type scale. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center/contain no-repeat;
	content: "";
	display: block;
	height: 56px;
	margin: 0 auto 22px;
	width: 56px;
}

.woocommerce-cart .wc-block-cart__empty-cart__title {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	margin: 56px 0 0;
	text-transform: uppercase;
}

/* Woo's dotted rule between the empty message and the suggestions. */
.woocommerce-cart .wp-block-separator.is-style-dots {
	margin: 28px auto 44px;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	margin: 0 0 28px;
	text-align: left;
	text-transform: uppercase;
}