/* ============================================================================
   AURANA — WooCommerce + Contact Form 7 skin
   Maps the plugin-generated markup (cart, checkout, account, notices, forms)
   onto the Aurana design system so every commerce surface matches the site.
   Loaded after aurana.css on Woo/form pages.
   ========================================================================== */

/* ---------------------------------------------------------------- notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	font-family: var(--sans);
	font-size: .9rem;
	line-height: 1.6;
	border: 1px solid var(--line);
	border-left: 2px solid var(--accent);
	background: var(--bg-raised);
	color: var(--text);
	border-radius: var(--r-sm);
	padding: 16px 20px;
	margin: 0 0 24px;
	list-style: none;
}
.woocommerce-error { border-left-color: #a23b3b; }
.woocommerce-message { border-left-color: var(--sage, #6B7758); }
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { display: none; }
.woocommerce-message .button,
.woocommerce-info .button { float: right; }

/* --------------------------------------------------------------- buttons */
/* Woo buttons take the Aurana filled-pill treatment. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 15px 30px;
	border-radius: 999px;
	background: var(--text);
	color: var(--bg);
	border: 1px solid var(--text);
	line-height: 1;
	cursor: pointer;
	transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.woocommerce a.button.wc-backward {          /* "return to shop" — quiet outline */
	background: transparent;
	color: var(--text);
	border-color: var(--line-strong);
}
.woocommerce a.button.wc-backward:hover { background: var(--text); color: var(--bg); }

/* ------------------------------------------------------------ form fields */
/* Woo + CF7 inputs share the Aurana field style. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input.qty,
.woocommerce-page table.cart td.actions .coupon .input-text,
.select2-container .select2-selection,
.woocommerce form .form-row select,
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select {
	font-family: var(--sans);
	font-size: .95rem;
	color: var(--text);
	background: var(--bg-raised);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	padding: 13px 16px;
	width: 100%;
	transition: border-color .3s;
	-webkit-appearance: none;
	appearance: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	outline: none;
	border-color: var(--accent);
}
.woocommerce form .form-row label,
.wpcf7 label {
	font-family: var(--sans);
	font-size: .8rem;
	letter-spacing: .04em;
	color: var(--text-soft);
	margin-bottom: 6px;
	display: block;
}
.select2-container--default .select2-selection--single { height: auto; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; }

/* ------------------------------------------------------------- CART page */
.woocommerce-cart .woocommerce { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.woocommerce table.shop_table {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-family: var(--sans);
}
.woocommerce table.shop_table th {
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-faint);
	font-weight: 400;
	padding: 18px 20px;
	background: var(--bg-raised);
	border: 0;
}
.woocommerce table.shop_table td {
	padding: 20px;
	border-top: 1px solid var(--line);
	vertical-align: middle;
	color: var(--text-soft);
}
.woocommerce table.cart img { width: 72px; border-radius: var(--r-xs); }
.woocommerce table.cart .product-name a {
	font-family: var(--display);
	font-size: 1.1rem;
	color: var(--text);
}
.woocommerce table.cart .product-name a:hover { color: var(--accent); }
.woocommerce .cart .quantity { display: inline-flex; }
.woocommerce .cart .quantity input.qty { width: 64px; text-align: center; padding: 10px; }
.woocommerce a.remove {
	color: var(--text-faint) !important;
	font-weight: 400;
	width: 26px; height: 26px; line-height: 24px;
	border: 1px solid var(--line);
	border-radius: 50%;
}
.woocommerce a.remove:hover { background: var(--accent) !important; color: #fff !important; border-color: var(--accent); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { width: 100%; }
.woocommerce .cart_totals h2 {
	font-family: var(--display);
	font-size: 1.6rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 16px;
}
.woocommerce .cart_totals table { border: 1px solid var(--line); border-radius: var(--r-md); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; text-align: center; }
.woocommerce .cart-collaterals .cross-sells > h2,
.woocommerce .upsells > h2,
.woocommerce .related > h2 {
	font-family: var(--display);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 24px;
}

/* the empty-cart state, styled to the brand */
.cart-empty.woocommerce-info {
	text-align: center;
	font-family: var(--display);
	font-size: 1.5rem;
	color: var(--text);
	background: none;
	border: 0;
	border-left: 0;
	padding: 40px 0 10px;
}
.return-to-shop { text-align: center; margin-bottom: 40px; }

/* -------------------------------------------------------- CHECKOUT page */
.woocommerce-checkout .woocommerce { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--display);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 20px;
	font-weight: 300;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; }
#order_review {
	background: var(--bg-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 28px;
}
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: var(--r-md);
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--bg-inset);
	color: var(--text-soft);
	border-radius: var(--r-sm);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bg-inset); }
.woocommerce-checkout #place_order { width: 100%; margin-top: 12px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { color: var(--text-soft); font-size: .84rem; }
.woocommerce-checkout table.shop_table { border-radius: var(--r-md); }
.woocommerce-info a { color: var(--accent); }

/* ----------------------------------------------------- MY ACCOUNT page */
.woocommerce-account .woocommerce { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
	padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px;
	color: var(--text-soft);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--text); color: var(--bg); border-color: var(--text); }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	max-width: 460px;
	background: var(--bg-raised);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 30px;
}

/* ---------------------------------------------------- CONTACT FORM 7 ---- */
.wpcf7 { font-family: var(--sans); }
.wpcf7-form p { margin: 0 0 18px; }
.wpcf7 .wpcf7-submit {
	font-family: var(--sans);
	font-size: .72rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
	padding: 16px 34px; border-radius: 999px;
	background: var(--text); color: var(--bg); border: 1px solid var(--text);
	cursor: pointer; width: auto;
	transition: background-color .4s var(--ease), border-color .4s;
}
.wpcf7 .wpcf7-submit:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.wpcf7-spinner { margin: 0 0 0 12px; }
.wpcf7 .wpcf7-not-valid-tip { color: #a23b3b; font-size: .78rem; margin-top: 4px; }
.wpcf7-response-output {
	font-size: .86rem !important;
	border-radius: var(--r-sm) !important;
	border-width: 1px !important;
	padding: 12px 16px !important;
	margin: 18px 0 0 !important;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--sage, #6B7758) !important; color: var(--text) !important; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #a23b3b !important; color: var(--text) !important; }

/* the footer newsletter form: single email + submit rendered as the pill field.
   CF7 wraps our two tags; we lay them out to match the static .signup control. */
.foot .wpcf7 { margin-top: 6px; }
.foot .wpcf7-form { position: relative; }
.foot .wpcf7-form p { margin: 0; }
.foot .wpcf7 input.wpcf7-email {
	width: 100%;
	background: transparent;
	border: 1px solid var(--foot-line);
	border-radius: var(--r-sm);
	padding: 15px 120px 15px 18px;
	font-size: .84rem;
	color: var(--foot-text);
}
.foot .wpcf7 input.wpcf7-email::placeholder { color: var(--foot-soft); }
.foot .wpcf7 input.wpcf7-email:focus { outline: none; border-color: var(--accent); }
.foot .wpcf7 .wpcf7-submit {
	position: absolute; right: 6px; top: 6px; bottom: 6px;
	padding: 0 20px; font-size: .62rem;
	background: var(--accent-bright); color: #16140F; border-color: var(--accent-bright);
}
.foot .wpcf7 .wpcf7-submit:hover { background: var(--accent); border-color: var(--accent); }
.foot .wpcf7 .wpcf7-spinner { position: absolute; right: 96px; top: 50%; transform: translateY(-50%); }
.foot .wpcf7-response-output { color: var(--foot-soft) !important; border-color: var(--foot-line) !important; }

/* ---------------------------------------------- price / misc typography */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
	color: var(--text);
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 400;
}
.woocommerce .woocommerce-breadcrumb { display: none; } /* we render our own crumb */

/* dark world: commerce surfaces invert cleanly via the tokens already */
.world-dark .woocommerce table.shop_table th,
.world-dark #order_review { background: var(--bg-raised); }

/* responsive */
@media (max-width: 780px) {
	.woocommerce table.shop_table thead { display: none; }
	.woocommerce-cart table.cart td { display: block; text-align: right; padding: 12px 16px; }
	.woocommerce-cart table.cart td::before { content: attr(data-title); float: left; color: var(--text-faint); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
	.woocommerce-cart table.cart td.product-remove,
	.woocommerce-cart table.cart td.product-thumbnail { text-align: left; }
	.foot .wpcf7 input.wpcf7-email { padding-right: 110px; }
}

/* ---------------------------------------------------------- bag drawer ---- */
/* The drawer must read as a panel above the page in BOTH worlds — in the dark
   world var(--bg) equals the page ground, so use a raised surface + shadow. */
.drawer {
	background: var(--bg-raised);
	box-shadow: -30px 0 80px rgba(0, 0, 0, .28);
}
.world-dark .drawer { box-shadow: -30px 0 90px rgba(0, 0, 0, .6); }
.scrim { background: rgba(18, 17, 14, .55); }
.world-dark .scrim { background: rgba(0, 0, 0, .66); }

/* the server-rendered mini-cart line items */
.citem-thumb { display: block; }
.citem-thumb img { width: 68px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-xs); }
.citem h3 { font-family: var(--display); font-size: 1.02rem; font-weight: 400; line-height: 1.3; }
.citem h3 a { color: var(--text); }
.citem h3 a:hover { color: var(--accent); }
.citem .meta { font-size: .74rem; color: var(--text-faint); margin-top: 4px; }
.citem .meta:empty { display: none; }
.citem .line-price { font-family: var(--sans); }