/*
 * Shop pages (checkout, cart, account, order received, tracking, wishlist, search, 404) in the CustomKaro design.
 * Loaded only when Qikink's CustomKaro_Lovable::shop_skin_active() is true. The design's header and footer come from the shadow
 * hosts; everything here restyles what WooCommerce and the theme print, using the design's colours and fonts.
 */
body.ck-shop-page {
	--ck-ink: #1a1816;
	--ck-coral: #f04a2a;
	--ck-cream: #f6f4ec;
	--ck-line: rgba(26, 24, 22, 0.15);
	--ck-display: "Archivo Black", system-ui, sans-serif;
	--ck-body: "Hind", system-ui, sans-serif;
	background: var(--ck-cream);
	color: var(--ck-ink);
	font-family: var(--ck-body);
	-webkit-font-smoothing: antialiased;
}
body.ck-shop-page #page { background: var(--ck-cream); }
body.ck-shop-page.ck-home-page #content { background: var(--ck-cream); }
body.ck-shop-page.ck-home-page #content .col-full { max-width: 80rem; margin: 0 auto; padding: 40px 24px 72px; }
@media (max-width: 640px) {
	body.ck-shop-page.ck-home-page #content .col-full { padding: 24px 16px 56px; }
}

/* Type */
body.ck-shop-page :is(h1, h2, h3, h4, h5, .entry-title, .page-title, .wc-block-components-title, .wp-block-heading) {
	font-family: var(--ck-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--ck-ink);
}
body.ck-shop-page :is(h1, .entry-title, .page-title) { font-size: clamp(2rem, 6vw, 3.75rem); line-height: 0.95; margin: 0 0 24px; }
body.ck-shop-page :is(h2, .wc-block-components-title) { font-size: 1.5rem; margin: 0 0 16px; }
body.ck-shop-page :is(h3, h4) { font-size: 1.125rem; }
body.ck-shop-page :is(p, li, label, td, th, span, div, input, select, textarea, button) { font-family: var(--ck-body); }
body.ck-shop-page :is(h1, h2, h3, h4, .entry-title, .page-title, .wc-block-components-title) { font-family: var(--ck-display); }
body.ck-shop-page a { color: var(--ck-ink); text-underline-offset: 4px; }
body.ck-shop-page a:hover { color: var(--ck-coral); }
body.ck-shop-page .woocommerce-breadcrumb, body.ck-shop-page .breadcrumb-wrap { display: none; }

/* Fields */
body.ck-shop-page :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea),
body.ck-shop-page .wc-block-components-text-input input,
body.ck-shop-page .wc-blocks-components-select__select,
body.ck-shop-page .wc-block-components-combobox .components-combobox-control__input {
	border: 1px solid var(--ck-line);
	border-radius: 12px !important;
	background: #fff;
	color: var(--ck-ink);
	box-shadow: none;
}
body.ck-shop-page :is(input, select, textarea):focus,
body.ck-shop-page .wc-block-components-text-input input:focus {
	border-color: var(--ck-coral);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(240, 74, 42, 0.2);
}
body.ck-shop-page :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ck-coral); }
body.ck-shop-page .wc-block-components-checkbox .wc-block-components-checkbox__input:checked,
body.ck-shop-page .wc-block-components-radio-control__input:checked::before { background-color: var(--ck-coral); border-color: var(--ck-coral); }
body.ck-shop-page label { color: rgba(26, 24, 22, 0.75); font-size: 14px; }
body.ck-shop-page .required { color: var(--ck-coral); }

/* Buttons */
body.ck-shop-page :is(.wc-block-components-button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce-Button, button[type="submit"], .checkout-button, .wp-element-button):not(.wc-block-components-button--outlined) {
	border: 0;
	border-radius: 999px;
	background: var(--ck-coral);
	color: var(--ck-ink);
	font-family: var(--ck-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-transform: none;
	box-shadow: none;
	transition: transform 0.15s, background 0.15s, color 0.15s;
}
body.ck-shop-page :is(.wc-block-components-button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce-Button, button[type="submit"], .checkout-button, .wp-element-button):not(.wc-block-components-button--outlined):hover {
	background: var(--ck-ink);
	color: var(--ck-cream);
	transform: translateY(-1px);
}
body.ck-shop-page .wc-block-components-button .wc-block-components-button__text { color: inherit; }

/* Cards: order summary, cart totals, coupon, shipping/payment options */
body.ck-shop-page :is(.wc-block-components-sidebar .wc-block-components-totals-wrapper, .wp-block-woocommerce-checkout-order-summary-block) { border-color: rgba(26, 24, 22, 0.1); }
body.ck-shop-page :is(.wc-block-checkout__sidebar, .wc-block-cart__sidebar, .wc-block-components-sidebar) {
	border-radius: 20px;
}
body.ck-shop-page .wp-block-woocommerce-checkout-order-summary-block,
body.ck-shop-page .wp-block-woocommerce-cart-order-summary-block {
	border: 1px solid rgba(26, 24, 22, 0.1);
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
}
body.ck-shop-page .wc-block-components-radio-control > .wc-block-components-radio-control__option,
body.ck-shop-page .wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--ck-line) !important;
	border-radius: 12px !important;
	background: #fff;
	box-shadow: none !important;
	overflow: hidden;
}
body.ck-shop-page .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent;
}
body.ck-shop-page .wc-block-components-radio-control-accordion-content { padding: 0 16px 16px; }
body.ck-shop-page .wc-block-components-radio-control > .wc-block-components-radio-control__option-checked,
body.ck-shop-page .wc-block-components-radio-control-accordion-option:has(input:checked) { border-color: var(--ck-ink) !important; box-shadow: 0 0 0 1px var(--ck-ink) !important; }
body.ck-shop-page .wc-block-components-notice-banner { border-radius: 12px; }

/* Prices */
body.ck-shop-page :is(.wc-block-components-product-price, .wc-block-formatted-money-amount, .amount, .price, .woocommerce-Price-amount) { color: var(--ck-ink); }
body.ck-shop-page :is(.wc-block-components-product-price__value, .wc-block-cart-item__prices, .wc-block-components-order-summary-item__individual-prices, .wc-block-components-order-summary-item__total-price) { color: var(--ck-coral); font-weight: 700; }
body.ck-shop-page .wc-block-components-totals-item__value,
body.ck-shop-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--ck-ink); font-weight: 700; }
body.ck-shop-page .wc-block-components-product-name { font-family: var(--ck-body); font-weight: 700; color: var(--ck-ink); text-decoration: none; }
body.ck-shop-page .wc-block-cart-items th { font-family: var(--ck-display); text-transform: uppercase; letter-spacing: -0.02em; }

/* Classic account / tracking / lists */
body.ck-shop-page .woocommerce form.login,
body.ck-shop-page .woocommerce form.register,
body.ck-shop-page .woocommerce-form-track-order,
body.ck-shop-page .woocommerce form.lost_reset_password,
body.ck-shop-page .woocommerce-EditAccountForm,
body.ck-shop-page .woocommerce-address-fields {
	border: 1px solid rgba(26, 24, 22, 0.1);
	border-radius: 20px;
	background: #fff;
	padding: 24px;
	margin: 0 0 24px;
}
body.ck-shop-page .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.ck-shop-page .woocommerce-MyAccount-navigation li a {
	display: block; width: 100%; height: auto; box-sizing: border-box; border: 1px solid var(--ck-line); border-radius: 12px; background: #fff; padding: 10px 16px; font-size: 14px; font-weight: 600; text-decoration: none; text-align: left; white-space: normal;
}
/* Theme prepends a bare <br> before the label (its own icon-on-top layout); combined with our nav it used to collapse into a near-circular blob with the icon squeezed into a corner. Not needed for our flat list style. */
body.ck-shop-page .woocommerce-MyAccount-navigation li a br { display: none; }
body.ck-shop-page .woocommerce-MyAccount-navigation li.is-active a { background: var(--ck-ink); border-color: var(--ck-ink); color: var(--ck-cream); }

/* Address book: theme's 'Edit' link uses a text-indent:-9999px icon-hiding hack meant to pair with 
   overflow:hidden, which was never set here - the real link text ("Edit Billing address") overflowed the 
   indent back into view and wrapped one character per line inside a 28px box. Show a normal small pill link 
   instead of relying on that hack. */
body.ck-shop-page .woocommerce-Address-title.title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.ck-shop-page .woocommerce-Address-title.title p { margin: 0; }
body.ck-shop-page .woocommerce-Address a.edit {
	display: inline-block; width: auto; height: auto; float: none; text-indent: 0; overflow: visible; position: static;
	padding: 4px 10px; border: 1px solid var(--ck-line); border-radius: 999px; background: #fff;
	font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; margin-top: 0;
}
body.ck-shop-page .woocommerce-Address a.edit::before { display: none; }
body.ck-shop-page :is(table.shop_table, table.woocommerce-orders-table, .woosw-list table) {
	border: 1px solid rgba(26, 24, 22, 0.1); border-radius: 16px; border-collapse: separate; border-spacing: 0; background: #fff; overflow: hidden;
}
body.ck-shop-page :is(table.shop_table, table.woocommerce-orders-table) th { font-family: var(--ck-display); font-weight: 400; text-transform: uppercase; font-size: 12px; letter-spacing: 0.02em; background: rgba(26, 24, 22, 0.04); }
body.ck-shop-page :is(table.shop_table, table.woocommerce-orders-table) :is(th, td) { border-color: rgba(26, 24, 22, 0.08); padding: 12px 16px; }
body.ck-shop-page .woocommerce-message, body.ck-shop-page .woocommerce-info, body.ck-shop-page .woocommerce-error {
	border: 1px solid rgba(26, 24, 22, 0.15); border-left: 4px solid var(--ck-coral); border-radius: 12px; background: #fff; color: var(--ck-ink);
}

/* Order received */
body.ck-shop-page .woocommerce-order-overview { list-style: none; margin: 0 0 24px; padding: 20px; border: 1px solid rgba(26, 24, 22, 0.1); border-radius: 20px; background: #fff; display: flex; flex-wrap: wrap; gap: 16px 32px; }
body.ck-shop-page .woocommerce-notice--success { border-left-color: #2e9d55; }

/* Search results and 404 */
body.ck-shop-page ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
body.ck-shop-page ul.products li.product { width: auto; margin: 0; float: none; border: 1px solid rgba(26, 24, 22, 0.1); border-radius: 20px; background: #fff; padding: 0 0 16px; overflow: hidden; }
body.ck-shop-page ul.products li.product :is(h2, .woocommerce-loop-product__title) { font-family: var(--ck-body); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 12px 16px 0; }
body.ck-shop-page ul.products li.product .price { padding: 0 16px; color: var(--ck-coral); font-weight: 700; }
body.ck-shop-page .error-404, body.ck-shop-page .no-results { text-align: center; padding: 48px 0; }
body.ck-shop-page .woocommerce form .password-input .show-password-input { display: none; }

/* The theme's own rules are heavier than ours on WooCommerce's block buttons and headings: say it twice. */
body.ck-shop-page .wc-block-components-button:not(.wc-block-components-button--outlined),
body.ck-shop-page .wc-block-cart__submit-button {
	background: var(--ck-coral) !important; color: var(--ck-ink) !important; border-radius: 999px !important;
}
body.ck-shop-page .wc-block-components-button:not(.wc-block-components-button--outlined):hover,
body.ck-shop-page .wc-block-cart__submit-button:hover { background: var(--ck-ink) !important; color: var(--ck-cream) !important; }
body.ck-shop-page :is(.wc-block-cart__totals-title, .wc-block-cart-items__header th, .wc-block-cart-items__header span) {
	font-family: var(--ck-display) !important; font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em; color: var(--ck-ink);
}
body.ck-shop-page :is(.page-title, .page-title *, .woocommerce-products-header__title) { font-family: var(--ck-display) !important; font-weight: 400; text-transform: uppercase; }

/* Order received, polish */
body.ck-shop-page :is(strong, b, address, em, dt, dd, blockquote) { font-family: var(--ck-body); }
body.ck-shop-page :is(strong, b) { font-weight: 700; }
body.ck-shop-page address { font-style: normal; line-height: 1.6; }
body.ck-shop-page .woocommerce-notice--success.woocommerce-thankyou-order-received {
	border: 1px solid rgba(26, 24, 22, 0.1); border-left: 4px solid var(--ck-coral); border-radius: 12px; background: #fff; color: var(--ck-ink);
	padding: 24px; font-size: 18px; font-weight: 700; text-align: left;
}
body.ck-shop-page .woocommerce-order-overview li { border-color: rgba(26, 24, 22, 0.1); }
body.ck-shop-page :is(.woocommerce-table--order-details, .shop_table) tfoot .woocommerce-Price-amount,
body.ck-shop-page :is(.woocommerce-table--order-details, .shop_table) tfoot .amount { color: var(--ck-ink); }
body.ck-shop-page .woocommerce-table--order-details tfoot tr:last-child .woocommerce-Price-amount { color: var(--ck-coral); font-family: var(--ck-display); }

/* Empty cart: WooCommerce's "New in store" grid lists the internal base product (CustomKaro, Rs 0). Hide it; the header's Shop link leads on. */
body.ck-shop-page .wp-block-woocommerce-empty-cart-block .wp-block-separator,
body.ck-shop-page .wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title),
body.ck-shop-page .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new { display: none !important; }

/* Short pages (empty cart, wishlist): keep the footer at the bottom of the screen. */
body.ck-shop-page #page { min-height: 100vh; display: flex; flex-direction: column; }
body.ck-shop-page #page > div.ck-lv-host:last-of-type { margin-top: auto; }
