/**
 * SFD WooCommerce, Cart & Checkout styles
 * Enqueued via functions.php → sfd_enqueue_styles()
 *
 * Targets both the classic WooCommerce shortcode templates
 * AND the block-based woocommerce/cart + woocommerce/checkout blocks.
 */

/* =============================================
   PAGE WRAPPER
   ============================================= */
.sfd-woo-page {
	background: #f7f7f7;
	min-height: 60vh;
	padding: 48px 80px 80px;
}

.sfd-woo-page-inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* Single product page — constrain main content to 1280px */
.single-product .wp-block-group.is-layout-flow {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 80px;
}

/* Product summary card — white background with subtle shadow */
.single-product .summary.entry-summary {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	padding: 32px;
}

/* Product rating stars on single product page */
.single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.single-product .woocommerce-product-rating .star-rating {
	float: none;
	margin: 0;
	font-size: 14px;
	width: 6.4em;
}

.single-product .woocommerce-product-rating .star-rating span::before {
	color: #F9B233;
}

.single-product .woocommerce-review-link {
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	color: #808080;
	text-decoration: none;
}

.single-product .woocommerce-review-link:hover {
	color: #262626;
}

/* Product title on single product page — better line height */
.single-product .product_title.entry-title {
	line-height: 1.3;
	text-transform: capitalize;
}

/* WooCommerce breadcrumb on single product pages — inside the summary column, above the product title */
.single-product .summary .woocommerce-breadcrumb {
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	color: #808080;
	margin-bottom: 8px;
}

.single-product .summary .woocommerce-breadcrumb a {
	color: #808080;
	text-decoration: none;
}

.single-product .summary .woocommerce-breadcrumb a:hover {
	color: #262626;
}

/* ── Page title (h1) ── */
.sfd-woo-page h1,
.sfd-woo-page .wp-block-woocommerce-cart h1,
.sfd-woo-page .wp-block-woocommerce-checkout h1 {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 40px;
	color: #262626;
	margin: 0 0 32px;
}

/* =============================================
   SHARED INPUTS, SELECT, TEXTAREA
   ============================================= */
.sfd-woo-page input[type="text"],
.sfd-woo-page input[type="email"],
.sfd-woo-page input[type="tel"],
.sfd-woo-page input[type="number"],
.sfd-woo-page input[type="password"],
.sfd-woo-page input[type="search"],
.sfd-woo-page select,
.sfd-woo-page textarea,
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-country-input select {
	font-family: 'Nunito', sans-serif !important;
	font-size: 15px !important;
	color: #262626 !important;
	background: #ffffff !important;
	border: 1px solid #D9D9D9 !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05) !important;
	outline: none !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	width: 100%;
}

.sfd-woo-page input:focus,
.sfd-woo-page select:focus,
.sfd-woo-page textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
	border-color: #8CD933 !important;
	box-shadow: 0 0 0 3px rgba(140, 217, 51, 0.18) !important;
}

/* =============================================
   SHARED BUTTONS
   ============================================= */
.sfd-woo-page .button,
.sfd-woo-page button[type="submit"],
.sfd-woo-page input[type="submit"],
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-cart__submit .wc-block-cart__submit-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #8CD933 !important;
	color: #262626 !important;
	border: 2px solid transparent !important;
	border-radius: 12px !important;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	padding: 12px 24px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: opacity 0.15s !important;
	box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05) !important;
	width: 100%;
}

.sfd-woo-page .button:hover,
.sfd-woo-page button[type="submit"]:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	opacity: 0.88 !important;
	color: #262626 !important;
}

/* Secondary buttons (e.g. "Continue shopping", coupon apply) */
.sfd-woo-page .button.alt,
.sfd-woo-page .button--secondary,
.wc-block-cart__submit-container .wc-block-components-button.outlined {
	background: #ffffff !important;
	color: #325D00 !important;
	border: 1px solid #56990F !important;
}

/* =============================================
   CART PAGE, BLOCK CART
   ============================================= */

/* Outer container: two-column on desktop, stacked on mobile */
.wp-block-woocommerce-cart .wc-block-cart {
	gap: 32px;
}

/* Items column */
.wc-block-cart-items {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #ebebeb;
	overflow: hidden;
}

/* Cart item row */
.wc-block-cart-items__row {
	border-bottom: 1px solid #f0f0f0;
	padding: 20px 24px;
	align-items: center;
}

.wc-block-cart-items__row:last-child {
	border-bottom: none;
}

/* Product name */
.wc-block-cart-item__product-name,
.wc-block-cart-items__row .wc-block-cart-item__product a {
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	color: #262626 !important;
	text-decoration: none !important;
}

/* Price */
.wc-block-cart-item__prices .wc-block-formatted-money-amount,
.wc-block-cart-item__total .wc-block-formatted-money-amount {
	font-family: 'Nunito', sans-serif !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	color: #262626 !important;
}

/* Remove link */
.wc-block-cart-item__remove-link {
	color: #F34188 !important;
	font-family: 'Nunito', sans-serif !important;
	font-size: 13px !important;
}

/* Order summary sidebar */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #ebebeb;
	overflow: hidden;
	padding: 24px;
}

/* Totals rows */
.wc-block-components-totals-item {
	font-family: 'Nunito', sans-serif !important;
	font-size: 15px !important;
	color: #646464 !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid #f0f0f0 !important;
}

.wc-block-components-totals-item:last-child {
	border-bottom: none !important;
}

.wc-block-components-totals-item__label {
	font-weight: 600 !important;
}

.wc-block-components-totals-item__value {
	font-weight: 800 !important;
	color: #262626 !important;
}

/* Totals, Grand total row */
.wc-block-components-totals-footer-item {
	font-family: 'Nunito', sans-serif !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #262626 !important;
	padding: 14px 0 !important;
}

/* Coupon input */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-family: 'Nunito', sans-serif !important;
	font-size: 14px !important;
	color: #325D00 !important;
}

/* =============================================
   CHECKOUT PAGE, BLOCK CHECKOUT
   ============================================= */

/* Two-column layout: form left, summary right */
.wp-block-woocommerce-checkout .wc-block-checkout {
	gap: 32px;
}

/* Panel / card wrapper */
.wc-block-components-sidebar-layout .wc-block-checkout__main,
.wp-block-woocommerce-checkout .wc-block-checkout__main {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Each checkout step block */
.wc-block-checkout__contact-fields,
.wc-block-checkout__shipping-fields,
.wc-block-checkout__billing-fields,
.wc-block-checkout__payment-method,
.wc-block-checkout__additional-fields {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #ebebeb;
	padding: 28px 24px;
}

/* Step heading */
.wc-block-components-checkout-step__title,
.wc-block-checkout__contact-fields h2,
.wc-block-checkout__shipping-fields h2,
.wc-block-checkout__billing-fields h2,
.wc-block-checkout__payment-method h2 {
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	color: #262626 !important;
	margin-bottom: 20px !important;
}

/* Step number badge */
.wc-block-components-checkout-step__heading-number {
	background: #8CD933 !important;
	color: #262626 !important;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 800 !important;
	border-radius: 50% !important;
}

/* Field labels */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-country-input label,
.wc-block-components-checkbox .wc-block-components-checkbox__label {
	font-family: 'Nunito', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #646464 !important;
}

/* Checkbox accent */
.wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: #8CD933 !important;
	border-color: #8CD933 !important;
}

/* Payment method radio buttons */
.wc-block-components-radio-control__input:checked {
	border-color: #8CD933 !important;
	background: #8CD933 !important;
}

.wc-block-components-radio-control-accordion-option {
	border-radius: 10px !important;
	border: 1px solid #ebebeb !important;
	margin-bottom: 8px !important;
	overflow: hidden;
}

.wc-block-components-radio-control-accordion-option--selected {
	border-color: #8CD933 !important;
	box-shadow: 0 0 0 2px rgba(140, 217, 51, 0.3) !important;
}

/* Order summary sidebar (checkout) */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #ebebeb;
	padding: 24px;
	position: sticky;
	top: 100px; /* just below fixed header */
}

/* Notices / alerts */
.wc-block-components-notice-banner {
	border-radius: 10px !important;
	font-family: 'Nunito', sans-serif !important;
	font-size: 14px !important;
}

.wc-block-components-notice-banner.is-error {
	border-left-color: #F34188 !important;
	background: #fff5f8 !important;
}

.wc-block-components-notice-banner.is-success {
	border-left-color: #8CD933 !important;
	background: #f3ffe6 !important;
}

/* Spinner / loading overlay */
.wc-block-components-spinner {
	border-top-color: #8CD933 !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
	.sfd-woo-page {
		padding: 40px 24px 64px;
	}

	.wc-block-cart-items__row {
		padding: 16px;
	}
}

@media (max-width: 600px) {
	.sfd-woo-page {
		padding: 32px 16px 48px;
	}

	.sfd-woo-page h1 {
		font-size: 26px;
	}
}

/* =============================================
   MY ACCOUNT, Orders, Subscriptions, etc.
   These rules target both the regular /my-account/* pages and the
   chrome-less ?embed=1 view that the SPA iframes into the Settings
   tab. Typography matches the SPA so the embedded content reads as
   a continuation of the dashboard rather than a different surface.
   ============================================= */

.woocommerce-account .woocommerce{
	font-family: 'Nunito', sans-serif;
	color: #262626;
}

/* Section headings inside account pages */
.woocommerce-account .woocommerce h1,
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce h3{
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	color: #262626;
	margin: 0 0 16px;
}
.woocommerce-account .woocommerce h2 { font-size: 20px; line-height: 28px; }
.woocommerce-account .woocommerce h3 { font-size: 16px; line-height: 22px; }

/* Body copy + paragraphs */
.woocommerce-account .woocommerce p{
	font-size: 14px;
	line-height: 1.55;
	color: #646464;
	margin: 0 0 12px;
}

/* ── Orders table ────────────────────────────────────────────── */
.woocommerce-orders-table,
.woocommerce-MyAccount-orders {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	overflow: hidden;
}

/* In embed mode the SPA's card frame already provides the outer border,
   so the table itself should be flush, no double frame. */

/* In embed mode the SPA card column is too narrow for a horizontal
   table, so render every order as a vertical card with label/value
   pairs instead. WC ships data-title on each td via shop_table_responsive,
   which gives us the label without needing JS. */

/* WC's block-theme integration applies zebra striping at the td level
   (`tbody tr:nth-child(2n) td`), so an !important on the row alone
   isn't enough, we also need to neutralise per-cell backgrounds. */

/* Also catch any other shop_table inside an embed page (subscriptions
   list, downloads, view-order details) where WC's defaults still
   add tbody borders that our card layout doesn't want. */

/* Order ID becomes the card title, full-width header at the top of
   each card, no inline label, larger font, with a divider below. */

/* Total cell: WC outputs `<span class="woocommerce-Price-amount">$10</span> / month`
   so the price span and the " / month" text node become two separate
   flex items, which space-between then spreads apart. Pin the price
   (and the trailing text node it carries with it) to the right edge so
   they read as a single value. */

/* Actions cell sits below the others as a full-width button */

.woocommerce-orders-table thead th {
	background: #fafafa;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #646464;
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid #e6e6e6;
}

.woocommerce-orders-table tbody tr {
	transition: background-color 0.15s ease;
}
.woocommerce-orders-table tbody tr:hover {
	background: #fff7f9;   /* faint pink wash matching SPA accent */
}
.woocommerce-orders-table tbody td {
	padding: 14px 16px;
	color: #262626;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}
.woocommerce-orders-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Order-number cell, emphasise it */
.woocommerce-orders-table__cell-order-number a,
.woocommerce-orders-table__cell-order-number {
	font-weight: 700;
	color: #262626;
}

/* Status column → coloured pill */
.woocommerce-orders-table__cell-order-status {
	font-weight: 700;
	text-transform: capitalize;
}
.woocommerce-orders-table__cell-order-status::first-letter {
	text-transform: uppercase;
}

/* ── Edit-address page (and other WC forms inside my-account) ──── */
/* List view: the two address cards (Billing + Shipping) */

/* Form view: editing an address (or any other WC form) */

/* Side-by-side first/last name on wider screens; stack on narrow */

/* Select2 (country/state dropdowns), match input style */

/* Select2 dropdown panel (the open list), the container is portaled to
   <body> so it lives outside .woocommerce; match the SPA typography
   instead of whatever select2's default 1em inherits from the document. */

/* Save / submit button, match SPA primary */

/* Form-level success/error messages */

/* "Browse products" CTA inside the empty subscriptions/orders notice
   pushes members back to the shop. In embed mode we want them to stay
   inside the dashboard, so hide it. */

/* ── View subscription page ────────────────────────────────────── */
/* The page renders three blocks:
   - <table class="shop_table subscription_details"> with status / dates
     metadata as label/value rows
   - Action buttons (Reactivate, Change address, etc.) if any
   - <table class="shop_table order_details"> with the line items
   - <section class="woocommerce-customer-details"> with billing address  */

/* Metadata table → becomes a rounded card with label/value rows */

/* Line-items table (class shop_table order_details, no "woocommerce-table--"
   prefix), card-framed version of the view-order items table. HTML
   <table> elements ignore their own padding; inner padding is achieved
   via cell padding-left/right instead. */

/* The "/ month" suffix after the price on subscription lines reads as
   a separate flex/inline item next to the price span. Keep them right-
   aligned together via inline-block + white-space nowrap on the cell. */

/* Action buttons row above the subscription_details table ("Reactivate",
   "Change address", etc.), WC uses <form class="subscription_details"
   or inline buttons with .button class. */

/* Related orders table (shown below a subscription's details) */

/* Subscription details table — smaller text, tighter spacing */
.woocommerce-MyAccount-content table.shop_table.subscription_details {
	font-size: 13px;
	line-height: 1.4;
}
.woocommerce-MyAccount-content table.shop_table.subscription_details th,
.woocommerce-MyAccount-content table.shop_table.subscription_details td {
	font-size: 13px;
	line-height: 1.4;
	padding: 8px 12px;
}

/* ── Payment methods page ──────────────────────────────────────── */
/* Same card-per-row treatment as orders + a styled "Add payment
   method" button. The empty table is suppressed when no rows exist
   so the user only sees the action. */

/* Method cell as the card title */

/* Actions cell stacks the two buttons full-width */

/* "Make default" and "Delete" are both secondary actions, outline
   style so neither dominates the row. Delete gets a muted red text
   tint on hover to signal destructiveness without shouting. */

/* If there are no saved methods, hide the empty table entirely so the
   user only sees the "Add payment method" CTA. :empty matches a tbody
   with no element children. */

/* The hidden delete-token warning banner, keep it hidden inline-style
   visible if WC opens it, but match the SPA palette. */

/* "Add payment method" button, match SPA primary */

/* Action buttons, match the SPA's primary "saveBtnPink" style:
   deep magenta (#B8144B), white text, 700 weight, 8px radius. Covers
   WC core (.woocommerce-Button), custom SPA action buttons (.button
   inside .woocommerce-MyAccount-content), and WC Subscriptions action
   buttons (Cancel/Reactivate/Change address, rendered as plain .button). */
.woocommerce-orders-table .woocommerce-button.button.view,
.woocommerce-MyAccount-content .woocommerce-button.button,
.woocommerce-MyAccount-content .button{
	background: #B8144B;
	color: #ffffff;
	border: 0;
	border-radius: 8px;
	padding: 10px 20px;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.woocommerce-orders-table .woocommerce-button.button.view:hover,
.woocommerce-MyAccount-content .woocommerce-button.button:hover,
.woocommerce-MyAccount-content .button:hover{
	background: #9d1140;
	color: #ffffff;
}

/* Pagination beneath the table */
.woocommerce-pagination ul.page-numbers,
.woocommerce-MyAccount-content .woocommerce-pagination ul {
	list-style: none;
	display: flex;
	gap: 4px;
	padding: 16px 0 0;
	margin: 0;
	justify-content: center;
}
.woocommerce-pagination .page-numbers {
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid #e6e6e6;
	color: #646464;
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	text-decoration: none;
}
.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current {
	background: #EE728E;
	border-color: #EE728E;
	color: #ffffff;
}

/* ── Order details (single order view) ───────────────────────── */
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-table--order-details {
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	color: #262626;
}

/* Section wrappers become rounded cards in embed mode */

/* Order status notice at the top */

/* Items table inside view-order, flush inside the card */

/* Customer details (billing/shipping), two-column grid on wider screens */

/* "Order again" button, kill WC's stock green, match SPA pink.
   wp-element-button is a block-theme class that ships with its own
   green background, so we need !important here. */

.woocommerce-table--order-details {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	overflow: hidden;
	margin: 0 0 24px;
}
.woocommerce-table--order-details thead th {
	background: #fafafa;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #646464;
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid #e6e6e6;
}
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
}
.woocommerce-table--order-details tbody tr:last-child td {
	border-bottom: 0;
}
.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-table--order-details tfoot tr:last-child th {
	border-bottom: 0;
	font-weight: 700;
	color: #262626;
}

/* Status banner that WC shows above the order details */
.woocommerce-order .woocommerce-notice {
	background: #FFF3F5;
	border: 1px solid #FCD2DC;
	color: #C90467;
	padding: 14px 16px;
	border-radius: 10px;
	font-weight: 600;
	margin: 0 0 20px;
}

/* Address blocks at the bottom of the order details */
.woocommerce-customer-details address {
	background: #fafafa;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	padding: 14px 16px;
	font-style: normal;
	line-height: 1.55;
	color: #262626;
}

/* Mobile: stack table cells responsively (WC ships shop_table_responsive
   classes on the markup; nudge the visuals to match SPA spacing). */
@media (max-width: 600px) {
	.woocommerce-orders-table tbody td {
		padding: 10px 14px;
	}
	.woocommerce-orders-table thead {
		display: none;
	}
	.woocommerce-orders-table tbody tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	.woocommerce-orders-table tbody td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		border-bottom: 0;
	}
	.woocommerce-orders-table tbody td::before {
		content: attr(data-title);
		font-weight: 700;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #646464;
	}
}

/* =============================================
   ADD PAYMENT METHOD FORM (embed)
   /my-account/add-payment-method/?embed=1

   Renders each gateway as a SPA-style card. Whichever gateway is
   selected shows its fields (Stripe iframe / card inputs) in a subtle
   inner panel. Submit button re-uses the SPA primary pink.
   ============================================= */

/* Gateway list */

/* Radio + label row */

/* Expanded fields for the selected gateway */

/* Card field labels (WC + Stripe) */

/* Stripe-hosted card field iframe containers */

/* Bottom action row */

/* =============================================
   REFER A FRIEND, /my-account/myreferrals/?embed=1
   WPGens plugin markup (.gens-refer-a-friend)
   ============================================= */

/* Modern-template two-column container. The plugin clamps this to a
   narrow max-width that looks cramped inside the embed iframe; let it
   fill the available width. */

/* ── Rewards box (You receive · Friend receives) ────────────────
   WPGens ships this with a blue background in the modern template.
   Repaint with SPA tokens: soft pink tint, primary pink accent on
   the reward amount, simple vertical divider between the two halves. */

/* The bare <span> WPGens puts between the two halves, turn it into
   a thin vertical divider. */

/* ── URL + code cards ─────────────────────────── */

/* ── Share row ────────────────────────────────── */
/* Buttons stretch equally to fill the row; wrap to the next line on
   narrow viewports. Flex-basis of 160px keeps them readable before
   wrapping kicks in. */

/* Match brand colours for each network */

/* Email share form */

/* Email + name inputs, stack full-width */

/* + / - "add another recipient" links, keep small, right-aligned */

/* "Send Emails" submit, full width + SPA pink, text vertically centered.
   The plugin sets an implicit line-height on the input that pushes the
   glyph baseline upward; lock it to 1 and equalise padding so it sits
   dead-centre inside the pink chip. */

/* ── Stats (Earned / Pending) ─────────────────── */
/* Two counter cards centered in the available width, with breathing room
   on the outside and a clear gap between them. Wraps on narrow screens. */

/* ── Coupons / friends tables ─────────────────── */
/* Style as SPA cards per row, matching the orders-table treatment
   already established for embed mode. */

/* =============================================
   CUSTOM PRODUCT REVIEWS
   Replaces Judge.me with self-hosted review
   submission + display on single product pages.
   ============================================= */

/* Hide the Judge.me review widget container */
#judgeme_product_reviews,
.jdgm-widget,
.jdgm-review-widget {
	display: none !important;
}

.sfd-product-reviews {
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px solid #e5e7eb;
	clear: both;
}

/* .sfd-product-reviews__inner {
	max-width: 800px;
	margin: 0 auto;
} */

.sfd-product-reviews__heading {
	font-family: 'Nunito', sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: #262626;
	margin: 0 0 24px;
}

/* ── Summary ── */
.sfd-product-reviews__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.sfd-product-reviews__summary-stars {
	display: flex;
	gap: 2px;
}

.sfd-product-reviews__summary-text {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.sfd-product-reviews__summary-rating {
	font-family: 'Nunito', sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: #262626;
}

.sfd-product-reviews__summary-count {
	font-size: 14px;
	color: #646464;
}

.sfd-product-reviews__empty {
	font-size: 16px;
	color: #646464;
	margin-bottom: 20px;
}

/* ── Actions ── */
.sfd-product-reviews__actions {
	margin-bottom: 32px;
}

/* ── Form ── */
.sfd-product-reviews__form-wrapper {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 32px;
	margin-bottom: 32px;
}

.sfd-product-reviews__form-title {
	font-family: 'Nunito', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #262626;
	margin: 0 0 24px;
}

.sfd-product-reviews__form-field {
	margin-bottom: 20px;
}

.sfd-product-reviews__form-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
}

.sfd-product-reviews__form-field label .required {
	color: #ef4444;
}

.sfd-product-reviews__form-field input[type="text"],
.sfd-product-reviews__form-field input[type="email"],
.sfd-product-reviews__form-field textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 15px;
	font-family: 'Nunito', sans-serif;
	color: #262626;
	background: #fff;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.sfd-product-reviews__form-field input[type="text"]:focus,
.sfd-product-reviews__form-field input[type="email"]:focus,
.sfd-product-reviews__form-field textarea:focus {
	outline: none;
	border-color: #8CD933;
	box-shadow: 0 0 0 3px rgba(140, 217, 51, 0.15);
}

.sfd-product-reviews__form-field input[type="file"] {
	font-size: 14px;
	color: #646464;
}

/* ── Star rating in form ── */
.sfd-product-reviews__form-rating {
	display: flex;
	gap: 4px;
}

.sfd-product-reviews__star svg {
	fill: #d1d5db;
	transition: fill 0.15s;
	cursor: pointer;
}

.sfd-product-reviews__star--on svg,
.sfd-product-reviews__star--hover svg {
	fill: #F9B233;
}

/* ── Form note ── */
.sfd-product-reviews__form-note {
	margin-bottom: 20px;
}

.sfd-product-reviews__form-note p {
	font-size: 13px;
	color: #9ca3af;
	margin: 0;
}

/* ── Form actions ── */
.sfd-product-reviews__form-actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.sfd-btn--border {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	border: 2px solid #d1d5db;
	border-radius: 8px;
	background: transparent;
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #646464;
	cursor: pointer;
	transition: all 0.2s;
}

.sfd-btn--border:hover {
	border-color: #9ca3af;
	color: #262626;
}

/* ── Feedback messages ── */
.sfd-product-reviews__form-feedback {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 600;
}

.sfd-product-reviews__form-feedback--success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.sfd-product-reviews__form-feedback--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* ── Review cards ── */
.sfd-product-reviews__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sfd-product-reviews__card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	margin: 0;
}

.sfd-product-reviews__card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.sfd-product-reviews__stars {
	display: flex;
	gap: 2px;
}

.sfd-product-reviews__date {
	font-size: 13px;
	color: #9ca3af;
}

.sfd-product-reviews__text {
	font-size: 15px;
	line-height: 1.6;
	color: #374151;
	margin: 0 0 16px;
}

.sfd-product-reviews__card-footer {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sfd-product-reviews__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #8CD933;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Nunito', sans-serif;
	flex-shrink: 0;
}

.sfd-product-reviews__attr-text {
	display: flex;
	flex-direction: column;
}

.sfd-product-reviews__name {
	font-size: 14px;
	font-weight: 700;
	color: #262626;
}

.sfd-product-reviews__result {
	font-size: 12px;
	color: #8CD933;
	font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.sfd-product-reviews__form-wrapper {
		padding: 20px;
	}

	.sfd-product-reviews__form-actions {
		flex-direction: column;
	}

	.sfd-product-reviews__form-actions .sfd-btn {
		width: 100%;
	}

	.sfd-product-reviews__card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

/* =============================================
   REVIEWS MODAL (POPUP)
   ============================================= */
.sfd-reviews-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

.sfd-reviews-modal--open .sfd-reviews-modal {
	display: flex;
}

.sfd-reviews-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.sfd-reviews-modal__content {
	position: relative;
	background: #fff;
	border-radius: 16px;
	width: 90%;
	max-width: 680px;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: sfd-modal-in 0.25s ease-out;
}

@keyframes sfd-modal-in {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.sfd-reviews-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: #f3f4f6;
	color: #646464;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
	z-index: 1;
}

.sfd-reviews-modal__close:hover {
	background: #e5e7eb;
	color: #262626;
}

.sfd-reviews-modal__header {
	padding: 32px 32px 20px;
	border-bottom: 1px solid #e5e7eb;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
	border-radius: 16px 16px 0 0;
}

.sfd-reviews-modal__title {
	font-family: 'Nunito', sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: #262626;
	margin: 0 0 12px;
	padding-right: 40px;
}

.sfd-reviews-modal__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.sfd-reviews-modal__stars {
	display: flex;
	gap: 2px;
}

.sfd-reviews-modal__rating {
	font-family: 'Nunito', sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: #262626;
}

.sfd-reviews-modal__count {
	font-size: 14px;
	color: #646464;
}

.sfd-reviews-modal__write-btn {
	margin-top: 4px;
}

/* Form inside modal */
.sfd-reviews-modal__form-wrapper {
	padding: 24px 32px;
	border-bottom: 1px solid #e5e7eb;
	background: #f9fafb;
}

/* Body (review cards) */
.sfd-reviews-modal__body {
	padding: 24px 32px 32px;
}

.sfd-reviews-modal__body .sfd-product-reviews__list {
	gap: 16px;
}

/* Prevent body scroll when modal is open */
body.sfd-reviews-modal--open {
	overflow: hidden;
}

/* Responsive modal */
@media (max-width: 768px) {
	.sfd-reviews-modal__content {
		width: 100%;
		max-width: 100%;
		max-height: 100vh;
		border-radius: 0;
		height: 100%;
	}

	.sfd-reviews-modal__header {
		padding: 24px 20px 16px;
		border-radius: 0;
	}

	.sfd-reviews-modal__form-wrapper {
		padding: 20px;
	}

	.sfd-reviews-modal__body {
		padding: 20px;
	}

	.sfd-reviews-modal__title {
		font-size: 20px;
	}
}

/* =============================================
   SINGLE PRODUCT PAGE — QUANTITY STEPPER
   ============================================= */

/* The form wrapper — flex row on desktop, stacked on mobile */
.sfd-single-product__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}

/* Quantity stepper container */
.sfd-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid #E6E6E6;
	border-radius: 12px;
	overflow: hidden;
	height: 44px;
}

/* Stepper buttons */
.sfd-qty-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border: none;
	background: #fff;
	cursor: pointer;
	padding: 0;
	margin: 0;
	transition: background 0.15s;
}

.sfd-qty-stepper__btn:hover {
	background: #f5f5f5;
}

.sfd-qty-stepper__btn:active {
	background: #e8e8e8;
}

.sfd-qty-stepper__btn svg {
	display: block;
	pointer-events: none;
}

/* Quantity input */
.sfd-qty-stepper__input {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	border-left: 1px solid #E6E6E6 !important;
	border-right: 1px solid #E6E6E6 !important;
	border-top: none !important;
	border-bottom: none !important;
	border-radius: 0 !important;
	text-align: center !important;
	font-family: 'Nunito', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #262626 !important;
	background: #fff !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	-moz-appearance: textfield !important;
}

.sfd-qty-stepper__input::-webkit-inner-spin-button,
.sfd-qty-stepper__input::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Add to cart button */
.sfd-single-product__btn.single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 44px !important;
	padding: 0 24px !important;
	background: #8CD933 !important;
	color: #262626 !important;
	border: 2px solid transparent !important;
	border-radius: 12px !important;
	font-family: 'Nunito', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background 0.15s, border-color 0.15s !important;
	white-space: nowrap !important;
}

.sfd-single-product__btn.single_add_to_cart_button:hover {
	background: #7ec92e !important;
}

.sfd-single-product__btn.single_add_to_cart_button:active {
	background: #70b828 !important;
}

/* Product excerpt / short description on single product page */
.woocommerce-product-details__short-description {
	font-size: 16px;
	line-height: 1.6;
	color: #646464;
	margin: 16px 0;
}

/* Hide SKU on single product page */
.single-product .sku,
.single-product .sku_wrapper {
	display: none;
}

/* Product meta (categories) — match blog card category pill style */
.single-product .product_meta {
	margin-top: 16px;
}

.single-product .posted_in {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	font-size: 0; /* hide the "Categories:" label text */
}

.single-product .posted_in a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: #fff;
	border: 1px solid #E4E4E4;
	border-radius: 100px;
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-size: 10px;
	font-weight: 600;
	color: #808080;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.single-product .posted_in a::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5h4.17l4.33 4.33a1 1 0 0 1 0 1.41L7.24 10a1 1 0 0 1-1.41 0L1.5 5.67V1.5z' stroke='%23808080' stroke-width='1.25' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='3.5' r='.75' fill='%23808080'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.single-product .posted_in a:hover {
	color: #262626;
}

/* Related products section — spacing from main content */
.single-product .related.products {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid #e5e7eb;
}

/* Related products heading — close to the cards */
.single-product .related.products h2 {
	margin-bottom: 16px;
}

/* Related products grid — use CSS grid so 4 cards fit properly */
.single-product .related.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	clear: both;
}

/* Prevent WooCommerce default ::before/::after pseudo-elements from
   being treated as grid items and taking up a column */
.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after {
	display: none !important;
	content: none !important;
}

/* Override WooCommerce default column widths for the grid */
.single-product .related.products ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* Product loop items — subtle card style with faint border and radius */
.products li.product {
	background: #ffffff;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.products li.product:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Product loop title — black (related products and loop) */
.woocommerce-loop-product__title {
	font-size: 1rem;
	line-height: 1.4;
	color: #262626 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.8em;
}

.woocommerce-loop-product__title a {
	color: #262626 !important;
	text-decoration: none;
}

/* Product loop card — wraps the image and details in a flex column so
   the card properly contains both the image and product info. */
.sfd-loop-product__card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Product loop image link — ensures the image fills the top of the card */
.sfd-loop-product__image-link {
	display: block;
	line-height: 0;
}

.sfd-loop-product__image-link img {
	width: 100%;
	height: auto;
	display: block;
}

/* Product loop details container — wraps title, price, and add-to-cart
   button inside each product card. Provides consistent padding so the
   text content doesn't touch the card edges. */
.sfd-loop-product__details {
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

/* Product loop price */
.sfd-loop-product__price {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #262626;
}

.sfd-loop-product__price .woocommerce-Price-amount {
	font-weight: 700;
}

.sfd-loop-product__price del {
	font-size: 14px;
	font-weight: 600;
	color: #808080;
	margin-right: 6px;
}

.sfd-loop-product__price ins {
	text-decoration: none;
}

/* Product loop add-to-cart button */
.sfd-loop-product__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #8CD933 !important;
	color: #262626 !important;
	border: 2px solid transparent !important;
	border-radius: 12px !important;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	padding: 8px 16px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: opacity 0.15s !important;
	box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05) !important;
	min-height: 40px;
	margin-top: auto !important;
}

.sfd-loop-product__btn:hover {
	opacity: 0.88 !important;
	color: #262626 !important;
	background: #8CD933 !important;
}

/* Stock badge — sits on its own line below the price */
.single-product .sfd-stock-badge {
	margin-top: 8px;
}

/* On-sale badge — pink pill style */
.single-product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	background: #F34188;
	color: #ffffff;
	border-radius: 100px;
	font-family: 'Nunito', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	min-height: auto;
	min-width: auto;
	margin: 0;
	border: none;
	box-shadow: none;
	text-shadow: none;
}

/* On-sale badge — shop/archive pages (circular badge) */
.woocommerce span.onsale {
	min-height: 50px;
	min-width: 50px;
	font-size: 1em;
	font-weight: 600;
	position: absolute;
	text-align: center;
	line-height: 3.236;
	top: -.5em;
	left: -.5em;
	margin: 0;
	border-radius: 100%;
	background-color: #6EC40B;
	color: #fff;
	font-size: .7em;
	z-index: 9;
}

/* Live views social-proof widget */
.sfd-live-views {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #646464;
}

.sfd-live-views svg {
	flex-shrink: 0;
}

/* Responsive: stack form elements on small screens */
@media (max-width: 480px) {
	.sfd-single-product__form {
		flex-direction: column;
		align-items: stretch;
	}

	.sfd-single-product__btn.single_add_to_cart_button {
		width: 100%;
	}
}