/**
 * khwabi — storefront chrome + WooCommerce + content pages.
 * Mirrors the khwabi Next.js design (cart, checkout, account, auth, pages).
 * Loaded after style.css; reuses the --kh-* tokens defined there.
 */

/* Small icon helpers */
.khwabi-icon-sm { width: 1rem; height: 1rem; }
[dir="ltr"] .khwabi-icon-flip { transform: rotate(180deg); }

/* Pagination wraps on narrow screens instead of overflowing. */
.woocommerce nav.woocommerce-pagination ul { flex-wrap: wrap; justify-content: center; row-gap: .35rem; }

/* Narrow phones (≤480px): let the hero highlight wrap instead of being clipped. */
@media (max-width: 480px) {
	.khwabi-hero-highlight { white-space: normal; }
	.khwabi-hero h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
	.khwabi-hero-stats { gap: 1rem; }
}

/* =========================================================================
   Header — announcement + main + category nav
   ====================================================================== */
.khwabi-header { position: sticky; inset-block-start: 0; z-index: 50; }
.khwabi-announce-inner { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.khwabi-announce-icon { width: .9rem; height: .9rem; color: var(--kh-accent-300); }
.khwabi-announce-dot { color: var(--kh-brand-400); }
@media (max-width: 640px) { .khwabi-announce-dot, .khwabi-announce-cod { display: none; } }

.khwabi-header-main { background: rgba(253,251,246,.95); backdrop-filter: blur(10px); border-block-end: 1px solid var(--kh-cream-300); }
.khwabi-header-inner { min-height: 4rem; }
@media (min-width: 1024px) { .khwabi-header-inner { min-height: 4.5rem; } }

.khwabi-header-search { display: none; flex: 1; margin-inline: 1rem; }
@media (min-width: 1024px) { .khwabi-header-search { display: block; } }
.khwabi-header-search .woocommerce-product-search { position: relative; display: flex; }
.khwabi-header-search input[type="search"] { border-radius: 999px; background: #fff; }
.khwabi-header-search button { position: absolute; inset-inline-end: .3rem; inset-block: .3rem; border: 0; background: var(--kh-brand-600); color: #fff; border-radius: 999px; padding-inline: 1rem; cursor: pointer; font-size: .8rem; }

.khwabi-search-toggle { display: inline-grid; }
@media (min-width: 1024px) { .khwabi-search-toggle { display: none; } }

/* Mobile: keep only search + cart in the top bar (language + account live in the drawer). */
@media (max-width: 640px) {
	.khwabi-header-actions .khwabi-lang-switcher,
	.khwabi-header-actions .khwabi-account-btn { display: none; }
	.khwabi-header-inner { gap: .4rem; }
}

/* Category nav row */
.khwabi-catnav { display: none; background: var(--kh-cream-50); border-block-end: 1px solid var(--kh-cream-300); }
@media (min-width: 1024px) { .khwabi-catnav { display: block; } }
.khwabi-catnav-inner { display: flex; align-items: center; gap: .35rem; min-height: 3rem; }
.khwabi-catnav-drop { position: relative; }
.khwabi-catnav-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--kh-brand-600); color: #fff; border: 0; border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.khwabi-catnav-btn:hover { background: var(--kh-brand-700); }
.khwabi-catnav-caret { transition: transform .2s; }
.khwabi-catnav-drop.is-open .khwabi-catnav-caret { transform: rotate(180deg); }
.khwabi-catnav-panel { position: absolute; inset-block-start: calc(100% + .4rem); inset-inline-start: 0; z-index: 50; width: min(36rem, 90vw); background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); box-shadow: var(--kh-shadow); padding: .75rem; opacity: 0; visibility: hidden; transform: translateY(-.35rem); transition: opacity .15s, transform .15s, visibility .15s; }
.khwabi-catnav-drop:hover .khwabi-catnav-panel,
.khwabi-catnav-drop.is-open .khwabi-catnav-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.khwabi-catnav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.khwabi-catnav-grid a { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--kh-radius); font-size: .875rem; font-weight: 500; color: var(--kh-ink-700); text-decoration: none; }
.khwabi-catnav-grid a:hover { background: var(--kh-brand-50); }
.khwabi-catnav-emoji { font-size: 1.25rem; line-height: 1; }
.khwabi-catnav-links { display: flex; align-items: center; gap: .15rem; }
.khwabi-catnav-links a { padding: .4rem .9rem; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--kh-ink-700); text-decoration: none; }
.khwabi-catnav-links a:hover, .khwabi-catnav-links a.is-active { background: var(--kh-brand-50); color: var(--kh-brand-800); }

/* Drawer extras */
.khwabi-drawer-heading { margin: 1rem 0 .5rem; padding-inline: .75rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kh-ink-300); border-block-start: 1px solid var(--kh-cream-300); padding-block-start: 1rem; }
.khwabi-drawer-cats { display: flex; flex-direction: column; gap: .1rem; }
.khwabi-drawer-cats a { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: var(--kh-radius); font-size: .875rem; font-weight: 500; color: var(--kh-ink-700); text-decoration: none; }
.khwabi-drawer-cats a:hover { background: var(--kh-brand-50); }
.khwabi-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem; border-block-start: 1px solid var(--kh-cream-300); }
.khwabi-drawer-account { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--kh-brand-800); text-decoration: none; }
.khwabi-drawer-account svg { width: 1.25rem; height: 1.25rem; }

/* =========================================================================
   Footer — newsletter + 4/5-col grid
   ====================================================================== */
.khwabi-newsletter { border-block-end: 1px solid var(--kh-brand-700); }
.khwabi-newsletter-inner { display: grid; gap: 1.5rem; padding-block: 2.5rem; }
@media (min-width: 768px) { .khwabi-newsletter-inner { grid-template-columns: 1fr 1fr; align-items: center; } }
.khwabi-newsletter-title { font-family: var(--kh-font-display); font-size: 1.5rem; color: #fff; margin: 0; }
.khwabi-newsletter-sub { margin: .35rem 0 0; font-size: .9rem; color: var(--kh-brand-300); }
.khwabi-newsletter-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.khwabi-newsletter-form input { flex: 1; min-width: 12rem; border-radius: 999px; border-color: var(--kh-brand-700); background: var(--kh-brand-800); color: #fff; }
.khwabi-newsletter-form input::placeholder { color: var(--kh-brand-300); }
.khwabi-newsletter-thanks { width: 100%; margin: 0; color: var(--kh-accent-300); font-weight: 600; }

.khwabi-footer-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .khwabi-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .khwabi-footer-grid { grid-template-columns: 2fr 1fr 1.2fr 1.2fr; } }
.khwabi-footer-contact-item { display: flex; align-items: center; gap: .6rem; }
.khwabi-footer-ci { width: 1rem; height: 1rem; color: var(--kh-accent-400); flex: none; }
.khwabi-footer-bottom-note { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.khwabi-footer-bottom-dot { color: var(--kh-brand-500); }

/* =========================================================================
   Shared: field, empty state, summary card
   ====================================================================== */
.khwabi-field { margin-block-end: 0; }
.khwabi-field label { display: block; margin-block-end: .35rem; font-size: .875rem; font-weight: 600; color: var(--kh-ink-700); }
.khwabi-field .kh-optional { font-weight: 400; font-size: .75rem; color: var(--kh-ink-300); }

.khwabi-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 4rem 1.5rem; border: 1px dashed var(--kh-cream-300); border-radius: var(--kh-radius-xl); background: var(--kh-cream-50); }
.khwabi-empty--inset { padding: 3rem 1.5rem; }
.khwabi-empty-icon svg { width: 3rem; height: 3rem; color: var(--kh-brand-300); }
.khwabi-empty-title { font-size: 1.25rem; color: var(--kh-brand-900); margin: 0; }
.khwabi-empty-desc { max-width: 24rem; color: var(--kh-ink-500); margin: 0; }

.khwabi-summary { background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: 1.25rem; }
.khwabi-summary-title { font-family: var(--kh-font); font-size: 1.1rem; font-weight: 700; color: var(--kh-ink-900); margin: 0 0 1rem; }
.khwabi-summary-rows { display: flex; flex-direction: column; gap: .7rem; margin: 0; font-size: .9rem; }
.khwabi-summary-rows > div { display: flex; align-items: center; justify-content: space-between; }
.khwabi-summary-rows dt { color: var(--kh-ink-500); margin: 0; }
.khwabi-summary-rows dd { margin: 0; font-weight: 600; color: var(--kh-ink-900); }
.khwabi-summary-rows dd.is-free { color: var(--kh-brand-600); }
.khwabi-summary-rows dd.is-discount { color: var(--kh-clay-600); }
.khwabi-summary-total { border-block-start: 1px solid var(--kh-cream-300); padding-block-start: .8rem; margin-block-start: .2rem; }
.khwabi-summary-total dt { font-size: 1rem; font-weight: 700; color: var(--kh-ink-900); }
.khwabi-summary-total dd { font-size: 1.2rem; font-weight: 800; color: var(--kh-brand-700); }
.khwabi-summary-cta { width: 100%; margin-block-start: 1.25rem; }

/* WooCommerce page wrapper (cart / checkout / account) */
.khwabi-wc-page { padding-block: 2rem; }
.khwabi-wc-title { font-family: var(--kh-font-display); font-size: clamp(1.6rem, 4vw, 2.25rem); color: var(--kh-brand-900); margin: 0 0 1.5rem; }
.khwabi-wc-page .khwabi-breadcrumb { margin-block-end: 1rem; }

/* =========================================================================
   Cart
   ====================================================================== */
.khwabi-cart { padding-block: .5rem; }
.khwabi-cart-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .khwabi-cart-grid { grid-template-columns: 2fr 1fr; align-items: start; } }

.khwabi-ship-progress { margin-block-end: 1.25rem; border: 1px solid var(--kh-brand-100); background: var(--kh-brand-50); border-radius: var(--kh-radius-lg); padding: 1rem; }
.khwabi-ship-progress p { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; color: var(--kh-brand-800); }
.khwabi-ship-bar { height: .5rem; border-radius: 999px; background: var(--kh-brand-100); overflow: hidden; }
.khwabi-ship-bar span { display: block; height: 100%; border-radius: 999px; background: var(--kh-brand-500); transition: width .3s; }

.khwabi-cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.khwabi-cart-item { display: flex; gap: 1rem; align-items: stretch; background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: .75rem; }
.khwabi-cart-thumb { display: grid; place-items: center; width: 5rem; height: 5rem; flex: none; border-radius: var(--kh-radius); background: var(--kh-cream-100); overflow: hidden; font-size: 2rem; text-decoration: none; }
.khwabi-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.khwabi-cart-thumb .khwabi-media-ph { width: 100%; height: 100%; }
.khwabi-cart-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.khwabi-cart-name { font-size: .9rem; font-weight: 700; color: var(--kh-ink-900); text-decoration: none; line-height: 1.35; }
.khwabi-cart-name:hover { color: var(--kh-brand-700); }
.khwabi-cart-unit { margin-block-start: .25rem; font-size: .875rem; font-weight: 700; color: var(--kh-brand-700); }
.khwabi-cart-controls { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; padding-block-start: .5rem; gap: .5rem; }
.khwabi-qty { display: inline-flex; align-items: center; border: 1px solid var(--kh-cream-300); border-radius: 999px; }
.khwabi-qty-btn { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--kh-brand-800); cursor: pointer; border-radius: 999px; }
.khwabi-qty-btn:hover { background: var(--kh-brand-50); }
.khwabi-qty-btn svg { width: .9rem; height: .9rem; }
.khwabi-qty-input { width: 2.25rem; text-align: center; border: 0; background: transparent; font-weight: 700; font-size: .875rem; padding: 0; -moz-appearance: textfield; }
.khwabi-qty-input::-webkit-outer-spin-button, .khwabi-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.khwabi-qty-input:focus { box-shadow: none; outline: none; }
.khwabi-cart-remove { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--kh-ink-400); text-decoration: none; }
.khwabi-cart-remove:hover { color: var(--kh-clay-600); }
.khwabi-cart-remove svg { width: 1rem; height: 1rem; }
@media (max-width: 480px) { .khwabi-cart-remove-label { display: none; } }
.khwabi-cart-line { display: none; align-self: center; font-weight: 700; color: var(--kh-ink-900); font-size: .9rem; }
@media (min-width: 640px) { .khwabi-cart-line { display: block; } }
.khwabi-cart-continue { display: inline-flex; align-items: center; gap: .5rem; margin-block-start: 1.25rem; font-size: .875rem; font-weight: 600; color: var(--kh-brand-700); text-decoration: none; }
.khwabi-cart-continue:hover { color: var(--kh-brand-800); }
.khwabi-cart-continue svg { width: 1rem; height: 1rem; }
.khwabi-cart-update { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.khwabi-cart-aside .khwabi-summary { padding: 1.25rem; }
@media (min-width: 1024px) { .khwabi-cart-aside .khwabi-summary { position: sticky; top: 6rem; } }

/* =========================================================================
   Checkout
   ====================================================================== */
.khwabi-checkout-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .khwabi-checkout-grid { grid-template-columns: 2fr 1fr; align-items: start; } }
.khwabi-checkout-main { display: flex; flex-direction: column; gap: 1.5rem; }
.khwabi-cform-section { background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: 1.25rem; }
.khwabi-cform-head { display: flex; align-items: center; gap: .6rem; font-family: var(--kh-font); font-size: 1.1rem; font-weight: 700; color: var(--kh-ink-900); margin: 0 0 1rem; }
.khwabi-step { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 999px; background: var(--kh-brand-600); color: #fff; font-size: .85rem; font-weight: 700; }
.khwabi-cform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Neutralise WooCommerce's default float/47%-width on form rows so the grid controls sizing. */
.khwabi-cform-grid .form-row { margin: 0; padding: 0; display: flex; flex-direction: column; width: auto !important; float: none !important; }
.khwabi-cform-grid .form-row-wide { grid-column: 1 / -1; }
.khwabi-cform-grid .form-row label { margin-block-end: .35rem; font-size: .875rem; font-weight: 600; color: var(--kh-ink-700); }
.khwabi-cform-grid .form-row .optional { color: var(--kh-ink-300); font-weight: 400; }
.khwabi-cform-grid .woocommerce-input-wrapper { display: block; width: 100%; }
.khwabi-cform-grid .kh-hidden { display: none !important; }
@media (max-width: 560px) { .khwabi-cform-grid { grid-template-columns: 1fr; } .khwabi-cform-grid .form-row-first, .khwabi-cform-grid .form-row-last { grid-column: 1 / -1; } }

/* COD payment box */
.khwabi-checkout #payment, .khwabi-cform-payment #payment { background: transparent; border: 0; padding: 0; border-radius: 0; }
.khwabi-checkout #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; border: 0; }
.khwabi-checkout #payment ul.payment_methods li { display: flex; align-items: center; gap: 1rem; border: 2px solid var(--kh-brand-500); background: var(--kh-brand-50); border-radius: var(--kh-radius-lg); padding: 1rem; }
.khwabi-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--kh-brand-600); width: 1.15rem; height: 1.15rem; }
.khwabi-checkout #payment ul.payment_methods li label { font-weight: 700; color: var(--kh-ink-900); margin: 0; }
.khwabi-checkout #payment ul.payment_methods li img { display: none; }
.khwabi-checkout #payment div.payment_box { background: transparent; color: var(--kh-ink-500); margin: 0; padding: .35rem 0 0; font-size: .85rem; }
.khwabi-checkout #payment div.payment_box::before { display: none; }
.khwabi-checkout #payment .place-order { padding: 1.25rem 0 0; margin: 0; }
.khwabi-checkout #payment .place-order .button,
.khwabi-checkout #payment #place_order { width: 100%; padding: .95rem 1.5rem; font-size: .95rem; }
.khwabi-checkout .woocommerce-terms-and-conditions-wrapper { margin-block-end: 1rem; }
.khwabi-cod-box { display: flex; align-items: center; gap: 1rem; border: 2px solid var(--kh-brand-500); background: var(--kh-brand-50); border-radius: var(--kh-radius-lg); padding: 1rem; }
.khwabi-cod-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 999px; background: var(--kh-brand-600); color: #fff; }
.khwabi-cod-title { margin: 0; font-weight: 700; color: var(--kh-ink-900); }
.khwabi-cod-desc { margin: .1rem 0 0; font-size: .85rem; color: var(--kh-ink-500); }

.khwabi-checkout-summary { padding: 1.25rem; }
@media (min-width: 1024px) { .khwabi-checkout-summary { position: sticky; top: 6rem; } }
.khwabi-checkout-summary .shop_table { border: 0; background: transparent; }
.khwabi-checkout-summary .shop_table thead { display: none; }
.khwabi-checkout-summary .shop_table td, .khwabi-checkout-summary .shop_table th { border: 0; padding: .35rem 0; font-size: .875rem; }
.khwabi-checkout-summary .shop_table .product-name { color: var(--kh-ink-700); }
.khwabi-checkout-summary .shop_table .product-total { text-align: end; font-weight: 700; }
.khwabi-checkout-summary .cart-subtotal th, .khwabi-checkout-summary .order-total th { font-weight: 600; color: var(--kh-ink-500); }
.khwabi-checkout-summary .order-total { border-block-start: 1px solid var(--kh-cream-300); }
.khwabi-checkout-summary .order-total th { font-size: 1rem; font-weight: 700; color: var(--kh-ink-900); padding-block-start: .8rem; }
.khwabi-checkout-summary .order-total td { text-align: end; font-size: 1.15rem; font-weight: 800; color: var(--kh-brand-700); padding-block-start: .8rem; }
.khwabi-secure-note { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 1rem 0 0; font-size: .78rem; color: var(--kh-ink-400); text-align: center; }
.khwabi-secure-note svg { color: var(--kh-brand-500); }
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-block-end: 1rem; }

/* =========================================================================
   Order received / success
   ====================================================================== */
.khwabi-success { max-width: 48rem; margin-inline: auto; padding-block: 1rem; }
.khwabi-success-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.khwabi-success-check { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 999px; background: var(--kh-brand-100); color: var(--kh-brand-600); }
.khwabi-success-check svg { width: 3rem; height: 3rem; }
.khwabi-success-title { margin: 1.25rem 0 0; font-family: var(--kh-font-display); font-size: clamp(1.6rem, 4vw, 2.25rem); color: var(--kh-brand-900); }
.khwabi-success-sub { margin: .5rem 0 0; color: var(--kh-ink-500); }
.khwabi-success-order { margin-block-start: 1.25rem; border: 1px solid var(--kh-cream-300); background: #fff; border-radius: var(--kh-radius-lg); padding: .75rem 1.5rem; text-align: center; }
.khwabi-success-order-label { margin: 0; font-size: .75rem; color: var(--kh-ink-400); }
.khwabi-success-order-no { margin: .15rem 0 0; font-family: var(--kh-font-display); font-size: 1.5rem; font-weight: 700; color: var(--kh-brand-700); }
.khwabi-success-note { margin: 1rem auto 0; max-width: 28rem; font-size: .875rem; color: var(--kh-ink-500); }
.khwabi-success-steps { display: grid; gap: .75rem; margin-block-start: 2rem; }
@media (min-width: 640px) { .khwabi-success-steps { grid-template-columns: repeat(3, 1fr); } }
.khwabi-success-step { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: 1rem; }
.khwabi-success-step-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--kh-brand-50); color: var(--kh-brand-600); }
.khwabi-success-step p { margin: 0; font-size: .875rem; font-weight: 500; color: var(--kh-ink-700); }
.khwabi-success-summary { margin-block-start: 2rem; }
.khwabi-success-items { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.khwabi-success-item { display: flex; align-items: center; gap: .75rem; }
.khwabi-success-item-thumb { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: var(--kh-radius); background: var(--kh-cream-100); overflow: hidden; font-size: 1.5rem; }
.khwabi-success-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.khwabi-success-item-thumb .khwabi-media-ph { width: 100%; height: 100%; }
.khwabi-success-item-qty { position: absolute; inset-block-start: -.4rem; inset-inline-end: -.4rem; display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem; border-radius: 999px; background: var(--kh-brand-600); color: #fff; font-size: .7rem; font-weight: 700; }
.khwabi-success-item-name { flex: 1; font-size: .875rem; font-weight: 500; color: var(--kh-ink-700); }
.khwabi-success-item-total { font-size: .875rem; font-weight: 700; color: var(--kh-ink-900); }
.khwabi-success-address { margin-block-start: 1rem; border-radius: var(--kh-radius); background: var(--kh-brand-50); padding: .75rem; font-size: .85rem; color: var(--kh-brand-800); }
.khwabi-success-address-dot { margin-inline: .5rem; }
.khwabi-success-actions { display: flex; flex-direction: column; gap: .75rem; justify-content: center; margin-block-start: 2rem; }
@media (min-width: 640px) { .khwabi-success-actions { flex-direction: row; } }

/* =========================================================================
   Auth (login / register)
   ====================================================================== */
.khwabi-auth { max-width: 56rem; margin-inline: auto; padding-block: 1rem; }
.khwabi-auth-card { display: grid; overflow: hidden; border: 1px solid var(--kh-cream-300); background: #fff; border-radius: var(--kh-radius-xl); box-shadow: var(--kh-shadow); }
@media (min-width: 1024px) { .khwabi-auth-card { grid-template-columns: 1fr 1fr; } }
.khwabi-auth-brand { display: none; position: relative; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 2rem; color: var(--kh-cream-100); background: linear-gradient(135deg, var(--kh-brand-700), var(--kh-brand-900)); }
@media (min-width: 1024px) { .khwabi-auth-brand { display: flex; } }
.khwabi-auth-brand .khwabi-logo-name { color: #fff; }
.khwabi-auth-brand .khwabi-logo-tag { color: var(--kh-accent-300); }
.khwabi-auth-emojis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.khwabi-auth-emojis span { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--kh-radius-lg); background: rgba(61,71,31,.6); font-size: 1.75rem; }
.khwabi-auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.khwabi-auth-points li { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.khwabi-auth-point-ic { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 999px; background: rgba(230,160,42,.2); color: var(--kh-accent-300); }
.khwabi-auth-form { padding: 1.5rem; }
@media (min-width: 640px) { .khwabi-auth-form { padding: 2rem; } }
.khwabi-auth-title { font-family: var(--kh-font-display); font-size: 1.75rem; color: var(--kh-brand-900); margin: 0; }
.khwabi-auth-subtitle { margin: .25rem 0 1.5rem; font-size: .875rem; color: var(--kh-ink-500); }
.khwabi-form { display: flex; flex-direction: column; gap: 1rem; }
.khwabi-form .khwabi-field label { display: block; margin-block-end: .35rem; font-size: .875rem; font-weight: 600; color: var(--kh-ink-700); }
.khwabi-remember { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--kh-ink-600); }
.khwabi-remember input { width: auto; }
.khwabi-auth-submit { width: 100%; margin-block-start: .25rem; }
.khwabi-auth-lost { margin: 0; text-align: center; }
.khwabi-auth-lost a { font-size: .85rem; color: var(--kh-ink-500); text-decoration: none; }
.khwabi-auth-lost a:hover { color: var(--kh-brand-700); }
.khwabi-auth-switch { margin: 0; text-align: center; font-size: .875rem; color: var(--kh-ink-500); }
.khwabi-auth-switch button { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--kh-brand-700); cursor: pointer; padding: 0; }
.khwabi-auth-switch button:hover { text-decoration: underline; }
.woocommerce-account .woocommerce > .u-columns, .woocommerce-account .col2-set { all: unset; }

/* =========================================================================
   My Account (dashboard + sidebar)
   ====================================================================== */
.woocommerce-account.logged-in .woocommerce { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 16rem 1fr; } }
/* Neutralise WooCommerce's default float layout so the grid controls placement. */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after { content: none !important; display: none !important; }
.khwabi-account-nav { background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: 1rem; }
.khwabi-account-user { display: flex; align-items: center; gap: .75rem; padding-block-end: 1rem; margin-block-end: 1rem; border-block-end: 1px solid var(--kh-cream-300); }
.khwabi-account-avatar { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: 999px; background: var(--kh-brand-100); color: var(--kh-brand-700); font-weight: 700; font-size: 1.05rem; }
.khwabi-account-user-meta { min-width: 0; }
.khwabi-account-user-name { margin: 0; font-weight: 700; color: var(--kh-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khwabi-account-user-email { margin: 0; font-size: .78rem; color: var(--kh-ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khwabi-account-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.khwabi-account-nav ul li a { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: var(--kh-radius); font-size: .875rem; font-weight: 600; color: var(--kh-ink-700); text-decoration: none; }
.khwabi-account-nav ul li a:hover { background: var(--kh-brand-50); color: var(--kh-brand-800); }
.khwabi-account-nav ul li.is-active a { background: var(--kh-brand-600); color: #fff; }
.woocommerce-MyAccount-content { min-width: 0; }

.khwabi-dash-head h1 { font-family: var(--kh-font-display); font-size: 1.6rem; color: var(--kh-brand-900); margin: 0; }
.khwabi-dash-head p { margin: .1rem 0 0; color: var(--kh-ink-500); }
.khwabi-dash-cards { display: grid; gap: 1rem; margin-block: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .khwabi-dash-cards { grid-template-columns: repeat(3, 1fr); } }
.khwabi-dash-card { background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: 1.25rem; }
.khwabi-dash-card-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--kh-radius); margin-block-end: .75rem; }
.kh-card-brand { background: var(--kh-brand-50); color: var(--kh-brand-600); }
.kh-card-accent { background: var(--kh-accent-50); color: var(--kh-accent-600); }
.kh-card-cream { background: var(--kh-cream-200); color: var(--kh-ink-700); }
.khwabi-dash-card-value { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--kh-ink-900); }
.khwabi-dash-card-label { margin: .1rem 0 0; font-size: .875rem; color: var(--kh-ink-500); }
.khwabi-dash-orders-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .75rem; }
.khwabi-dash-orders-head h2 { font-family: var(--kh-font); font-size: 1.1rem; font-weight: 700; color: var(--kh-ink-900); margin: 0; }
.khwabi-dash-orders-head a { display: inline-flex; align-items: center; gap: .3rem; font-size: .875rem; font-weight: 600; color: var(--kh-brand-700); text-decoration: none; }
.khwabi-order-rows { display: flex; flex-direction: column; gap: .75rem; }
.khwabi-order-row { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: .85rem 1rem; text-decoration: none; }
.khwabi-order-row:hover { border-color: var(--kh-brand-200); box-shadow: var(--kh-shadow-soft); }
.khwabi-order-row-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--kh-radius); background: var(--kh-brand-50); color: var(--kh-brand-600); }
.khwabi-order-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.khwabi-order-row-no { font-weight: 700; color: var(--kh-ink-900); font-size: .9rem; }
.khwabi-order-row-meta { font-size: .78rem; color: var(--kh-ink-400); }
.khwabi-order-row-status { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; background: var(--kh-brand-100); color: var(--kh-brand-800); }
.khwabi-status--processing, .khwabi-status--pending, .khwabi-status--on-hold { background: var(--kh-accent-100); color: var(--kh-accent-800); }
.khwabi-status--completed { background: var(--kh-brand-600); color: #fff; }
.khwabi-status--cancelled, .khwabi-status--failed { background: #f3d9d0; color: var(--kh-clay-700); }
.khwabi-order-row-total { font-weight: 700; color: var(--kh-ink-900); font-size: .9rem; }

/* =========================================================================
   Page hero + content pages
   ====================================================================== */
.khwabi-pagehero { border-block-end: 1px solid var(--kh-cream-300); background: linear-gradient(135deg, var(--kh-cream-50), var(--kh-brand-50)); }
.khwabi-pagehero .khwabi-container { padding-block: 2.5rem; }
@media (min-width: 640px) { .khwabi-pagehero .khwabi-container { padding-block: 3.25rem; } }
.khwabi-pagehero-title { font-family: var(--kh-font-display); font-size: clamp(1.75rem, 4vw, 3rem); color: var(--kh-brand-900); margin: .25rem 0 0; }
.khwabi-pagehero-sub { margin: .5rem 0 0; max-width: 40rem; font-size: 1.05rem; color: var(--kh-ink-500); }

/* About */
.khwabi-about { padding-block: 3rem; }
.khwabi-about-intro { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .khwabi-about-intro { grid-template-columns: 1fr 1fr; } }
.khwabi-about-prose { display: flex; flex-direction: column; gap: 1rem; color: var(--kh-ink-600); line-height: 1.7; }
.khwabi-about-prose p { margin: 0; }
.khwabi-about-lead { font-weight: 600; color: var(--kh-brand-800); }
.khwabi-about-cta { align-self: flex-start; margin-block-start: .5rem; }
.khwabi-about-emojis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.khwabi-about-emojis span { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--kh-radius-lg); background: var(--kh-cream-100); font-size: 2.25rem; box-shadow: var(--kh-shadow-soft); }
.khwabi-about-values { margin-block-start: 4rem; }
.khwabi-about-values > h2 { text-align: center; font-family: var(--kh-font-display); font-size: 1.75rem; color: var(--kh-brand-900); margin-block-end: 2rem; }
.khwabi-about-values-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .khwabi-about-values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .khwabi-about-values-grid { grid-template-columns: repeat(4, 1fr); } }
.khwabi-value-card { text-align: center; background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: 1.25rem; }
.khwabi-value-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto .75rem; border-radius: var(--kh-radius-lg); background: var(--kh-brand-50); color: var(--kh-brand-600); }
.khwabi-value-ic svg { width: 1.75rem; height: 1.75rem; }
.khwabi-value-card h3 { font-family: var(--kh-font); font-size: 1rem; color: var(--kh-ink-900); margin: 0; }
.khwabi-value-card p { margin: .35rem 0 0; font-size: .875rem; color: var(--kh-ink-500); }

/* Contact */
.khwabi-contact { padding-block: 3rem; }
.khwabi-contact-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .khwabi-contact-grid { grid-template-columns: 1fr 1fr; } }
.khwabi-contact-info { display: flex; flex-direction: column; gap: 1rem; }
.khwabi-contact-card { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: 1.25rem; }
.khwabi-contact-ic { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: var(--kh-radius); background: var(--kh-brand-50); color: var(--kh-brand-600); }
.khwabi-contact-ic svg { width: 1.5rem; height: 1.5rem; }
.khwabi-contact-label { margin: 0; font-size: .8rem; color: var(--kh-ink-400); }
.khwabi-contact-value { margin: .1rem 0 0; font-weight: 600; color: var(--kh-ink-900); }
.khwabi-contact-form { display: flex; flex-direction: column; gap: 1rem; background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); padding: 1.5rem; }
.khwabi-contact-send { align-self: flex-start; }
.khwabi-contact-thanks { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; border: 1px solid var(--kh-brand-200); background: var(--kh-brand-50); border-radius: var(--kh-radius-lg); padding: 2rem; }
.khwabi-contact-thanks-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--kh-brand-600); color: #fff; }
.khwabi-contact-thanks p { margin: 0; font-weight: 600; color: var(--kh-brand-800); }

/* FAQ */
.khwabi-faq { max-width: 48rem; padding-block: 3rem; }
.khwabi-accordion { display: flex; flex-direction: column; gap: .75rem; }
.khwabi-accordion-item { overflow: hidden; background: #fff; border: 1px solid var(--kh-cream-300); border-radius: var(--kh-radius-lg); }
.khwabi-accordion-btn { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: 1rem; border: 0; background: transparent; font: inherit; font-weight: 700; text-align: start; color: var(--kh-ink-900); cursor: pointer; }
.khwabi-accordion-btn:hover { background: var(--kh-cream-50); }
.khwabi-accordion-caret { flex: none; color: var(--kh-brand-600); transition: transform .3s; }
.khwabi-accordion-item.is-open .khwabi-accordion-caret { transform: rotate(180deg); }
.khwabi-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.khwabi-accordion-item.is-open .khwabi-accordion-panel { grid-template-rows: 1fr; }
.khwabi-accordion-inner { overflow: hidden; min-height: 0; }
.khwabi-accordion-inner > p { margin: 0; padding: 0 1rem 1rem; font-size: .9rem; line-height: 1.7; color: var(--kh-ink-600); }

/* Legal */
.khwabi-legal { max-width: 48rem; display: flex; flex-direction: column; gap: 2rem; padding-block: 3rem; }
.khwabi-legal-section h2 { font-family: var(--kh-font-display); font-size: 1.25rem; color: var(--kh-brand-900); margin: 0 0 .75rem; }
.khwabi-legal-body { display: flex; flex-direction: column; gap: .5rem; }
.khwabi-legal-body p { margin: 0; line-height: 1.7; color: var(--kh-ink-600); }