/* Ambikly Storefront — minimal styles matching the admin SaaS look */
.ambikly-shop { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.ambikly-shop__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 24px;
}
.ambikly-shop[data-columns="2"] .ambikly-shop__grid { --cols: 2; }
.ambikly-shop[data-columns="4"] .ambikly-shop__grid { --cols: 4; }
/* Was: the merchant's chosen desktop column count (2/3/4) applied at
   every viewport width, so on a phone each card was squeezed to a
   sliver — narrow enough that even prices and one-word titles wrapped
   mid-character. Product grids need their own breakpoints regardless
   of how many columns the merchant configured for desktop. */
@media (max-width: 640px) {
    .ambikly-shop__grid,
    .ambikly-shop[data-columns="2"] .ambikly-shop__grid,
    .ambikly-shop[data-columns="4"] .ambikly-shop__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}
@media (max-width: 420px) {
    .ambikly-shop__grid,
    .ambikly-shop[data-columns="2"] .ambikly-shop__grid,
    .ambikly-shop[data-columns="4"] .ambikly-shop__grid {
        grid-template-columns: 1fr;
    }
}

.ambikly-product-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.ambikly-product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.ambikly-product-card__media { display: block; aspect-ratio: 1 / 1; background: #f3f4f6; }
.ambikly-product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ambikly-product-card__body { padding: 16px; }
.ambikly-product-card__title { font-size: 1rem; font-weight: 600; color: #111827; margin: 0 0 8px; }
.ambikly-product-card__price { margin: 0 0 12px; color: #111827; }
.ambikly-product-card__price del { color: #9ca3af; margin-right: 6px; }
.ambikly-product-card__price strong { color: #111827; }

.ambikly-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #111827;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.ambikly-btn:hover { background: #f9fafb; }
.ambikly-btn--primary { background: #ea580c; color: #fff; border-color: #ea580c; }
.ambikly-btn--primary:hover { background: #c2410c; border-color: #c2410c; color: #fff; }
.ambikly-btn--block { width: 100%; margin-top: 16px; }
.ambikly-link { background: none; border: 0; color: #ea580c; cursor: pointer; padding: 0; }

.ambikly-pagination { display: flex; gap: 6px; margin-top: 24px; justify-content: center; flex-wrap: wrap; }
.ambikly-page { padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px; color: #374151; text-decoration: none; }
.ambikly-page.is-current { background: #ea580c; color: #fff; border-color: #ea580c; }
.ambikly-page--ellipsis { border: none; padding: 6px 2px; color: #9ca3af; }

.ambikly-product-detail {
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
    max-width: 1100px; margin: 0 auto; padding: 32px 16px;
}
/* The 1fr/1fr above is meant for the image+info row only
   (.ambikly-product-detail__main, which lays itself out in its own
   nested grid). Without this, every other direct child — the
   breadcrumb, the Description/Reviews sections, and the "You may also
   like" related-products block — got auto-placed into that same
   2-column grid too: the breadcrumb was squeezed beside the product
   image instead of spanning the top, and the related-products' own
   4-column grid was squeezed into a half-width column, overflowing
   its product cards' side-by-side buttons past the card edge.
   .ambikly-product-detail__main itself needs the same treatment — it
   was still being auto-placed into a single outer column too, which
   squeezed its own nested image|info grid into half the page's real
   content width: a small, oddly-cropped product photo with a wide
   dead strip of empty space beside it instead of a normal two-column
   product layout. */
.ambikly-product-detail > .ambikly-breadcrumb,
.ambikly-product-detail > .ambikly-product-detail__main,
.ambikly-product-detail > .ambikly-product-detail__section { grid-column: 1 / -1; }
.ambikly-product-detail__media img { width: 100%; border-radius: 12px; }
.ambikly-product-detail__price { font-size: 1.25rem; margin: 12px 0; }
.ambikly-product-detail__desc { color: #374151; margin: 16px 0; }
.ambikly-add-to-cart-form { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.ambikly-add-to-cart-form input[type="number"] { width: 80px; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; }

.ambikly-cart, .ambikly-checkout, .ambikly-account, .ambikly-thankyou {
    max-width: 1100px; margin: 0 auto; padding: 32px 16px;
}
.ambikly-cart-table { width: 100%; border-collapse: collapse; }
.ambikly-cart-table th, .ambikly-cart-table td { padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
/* min-width:0 lets the flex child actually shrink instead of forcing
   the row wider; overflow-wrap lets one long, unbroken product name
   wrap instead of stretching the whole table. */
.ambikly-cart-table__item-inner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ambikly-cart-table__item-inner > span { min-width: 0; overflow-wrap: anywhere; }
/* Wide tables (many columns, long content) get their own horizontal
   scroll rather than pushing the whole page wider on small screens. */
.ambikly-cart-table__scroll { overflow-x: auto; }
.ambikly-cart-table__thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.ambikly-cart-table__thumb--placeholder { display: flex; align-items: center; justify-content: center; background: #f3f4f6; font-size: 1.25rem; }
.ambikly-cart-table__unavailable { font-size: 0.8125rem; color: #b91c1c; font-weight: 600; margin-top: 2px; }
.ambikly-cart-table__row--unavailable { background: #fef2f2; }
.ambikly-cart__qty { width: 64px; padding: 6px; border: 1px solid #d1d5db; border-radius: 6px; }
.ambikly-cart__qty:disabled { opacity: 0.6; }
.ambikly-cart__totals { padding: 16px; background: #f9fafb; border-radius: 8px; }
.ambikly-cart__totals > div { display: flex; justify-content: space-between; margin: 6px 0; }
.ambikly-cart__total-row { border-top: 1px solid #e5e7eb; padding-top: 10px; margin-top: 6px !important; font-size: 1.05rem; }
.ambikly-cart__warning { font-size: 0.875rem; color: #b91c1c; margin: 0 0 8px; }
.ambikly-cart__coupon { display: flex; gap: 8px; margin: 16px 0; }
.ambikly-cart__coupon input { flex: 1; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; }
.ambikly-cart__applied-coupons { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ambikly-cart__applied-coupon { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; font-size: 0.9rem; }
.ambikly-cart__applied-coupon-code { font-weight: 600; color: #c2410c; text-transform: uppercase; }
.ambikly-cart__applied-coupon button { margin-left: auto; }
.ambikly-cart__applied-coupon--invalid { background: #f9fafb; border-color: #e5e7eb; color: #6b7280; }
.ambikly-cart__applied-coupon--invalid .ambikly-cart__applied-coupon-code { color: #6b7280; }
.ambikly-cart__continue-shopping { display: inline-block; margin-top: 12px; font-size: 0.875rem; color: #ea580c; text-decoration: none; font-weight: 500; }
.ambikly-cart__continue-shopping:hover { text-decoration: underline; }
.ambikly-cart__empty { padding: 48px 16px; text-align: center; color: #6b7280; }
.ambikly-cart__empty .ambikly-cart__continue-shopping { margin-top: 0; }
.ambikly-checkout__empty { padding: 48px 16px; text-align: center; color: #6b7280; }
.ambikly-checkout__empty a { color: #ea580c; font-weight: 600; }
.ambikly-checkout__empty a:hover { color: #c2410c; }

/* Order-confirmation page — was three bare <p> tags with no items, no
   confirmation of what was actually paid for; the data (order->items())
   was always there, just never shown. */
.ambikly-thankyou__banner { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.ambikly-thankyou__check { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #ecfdf5; color: #059669; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; }
.ambikly-thankyou__banner h1 { margin: 0 0 4px; }
.ambikly-thankyou__sub { margin: 0; color: #6b7280; }
.ambikly-thankyou__grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.ambikly-thankyou__status { text-transform: capitalize; padding: 2px 8px; border-radius: 9999px; font-size: 0.85em; background: #fef3c7; color: #92400e; }
.ambikly-thankyou__status--paid, .ambikly-thankyou__status--completed { background: #d1fae5; color: #065f46; }
.ambikly-thankyou__status--failed { background: #fee2e2; color: #991b1b; }
@media (max-width: 720px) {
    .ambikly-thankyou__grid { grid-template-columns: 1fr; }
}

/* Two-column block layout — items on the left, sticky summary on the right */
.ambikly-cart__grid { display: grid; gap: 24px; }
.ambikly-cart--two-column .ambikly-cart__grid { grid-template-columns: minmax(0, 1fr) 320px; }
.ambikly-cart--stacked .ambikly-cart__grid { grid-template-columns: 1fr; }
@media (max-width: 768px) {
    .ambikly-cart--two-column .ambikly-cart__grid { grid-template-columns: 1fr; }
}
.ambikly-cart__sidebar { display: flex; flex-direction: column; gap: 12px; }
.ambikly-cart--two-column .ambikly-cart__sidebar { position: sticky; top: 24px; align-self: start; }
.ambikly-btn--block { width: 100%; justify-content: center; }

/* SSR preview rendered before JS hydrates — keeps perceived speed up. */
.ambikly-cart__ssr { padding: 12px 0; }
.ambikly-cart__ssr-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 768px) {
    .ambikly-cart__ssr-grid { grid-template-columns: 1fr; }
}
.ambikly-cart__ssr-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ambikly-cart__ssr-items li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #f3f4f6; border-radius: 8px; font-size: 0.875rem; }
.ambikly-cart__ssr-items img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.ambikly-cart__ssr-name { flex: 1; color: #111827; }
.ambikly-cart__ssr-qty { color: #6b7280; font-variant-numeric: tabular-nums; }
.ambikly-cart__ssr-more { color: #6b7280; font-style: italic; justify-content: center; }
.ambikly-cart__ssr-summary { background: #f9fafb; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ambikly-cart__ssr-subtotal { display: flex; justify-content: space-between; font-size: 1rem; }
.ambikly-cart__ssr-subtotal strong { color: #111827; }
/* When JS hydrates the container, the SSR block is replaced — but the
   above styles keep the first paint clean if hydration is slow. */

.ambikly-checkout__form { display: grid; grid-template-columns: 1fr 380px; gap: 32px; }
@media (max-width: 768px) {
    .ambikly-checkout__form, .ambikly-product-detail { grid-template-columns: 1fr; }
}
.ambikly-field { display: block; margin-bottom: 12px; }
.ambikly-field > span { display: block; font-size: 0.875rem; color: #374151; margin-bottom: 4px; }
.ambikly-field > input, .ambikly-field > select, .ambikly-field > textarea, .ambikly-checkout__note textarea {
    width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; box-sizing: border-box; font-family: inherit; font-size: inherit;
}
/* Was: this rule only listed `input` — a Checkout Field Editor custom
   field of type "select" or "textarea" (dynamicField() in
   storefront.js) landed in this same .ambikly-field wrapper but got
   none of it: a bare, browser-default-sized <select>/<textarea>
   sitting next to full-width, bordered sibling fields. */
.ambikly-field > textarea { resize: vertical; min-height: 80px; }
.ambikly-checkout__gateway { display: block; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; margin: 8px 0; cursor: pointer; }
.ambikly-checkout__gateway:has(input:checked) { border-color: #ea580c; background: #fff7ed; }
.ambikly-checkout__row { display: flex; justify-content: space-between; padding: 6px 0; }
.ambikly-checkout__row--total { padding-top: 12px; border-top: 1px solid #e5e7eb; font-size: 1.05rem; }
.ambikly-checkout__note { display: block; margin-top: 16px; }
.ambikly-checkout__note textarea { min-height: 80px; resize: vertical; }
.ambikly-checkout__digital-note { margin: 12px 0; padding: 10px 12px; background: #fff7ed; color: #9a3412; border-radius: 8px; font-size: 0.875rem; }
.ambikly-checkout__shipping-toggle { margin: 12px 0; font-size: 0.875rem; color: #374151; }
.ambikly-checkout__warning { padding: 10px 12px; background: #fef2f2; color: #b91c1c; border-radius: 8px; font-size: 0.875rem; }
.ambikly-checkout__shipping-methods { margin: 8px 0 16px; }
.ambikly-checkout__hint { font-size: 0.875rem; color: #6b7280; margin: 8px 0; }
/* Payment/Shipping method radio groups had only a visual <h3> above
   them, no <fieldset>/<legend> — assistive tech announced each radio
   in isolation with no group context ("Payment" / "Shipping method").
   Resetting the browser's default fieldset border/padding keeps this
   visually identical to the plain heading it replaces. */
.ambikly-checkout__fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.ambikly-checkout__fieldset > legend { font-size: 1.125rem; font-weight: 600; padding: 0; margin: 0 0 8px; width: 100%; }
/* No path back to the cart existed once items were in it — only the
   empty-cart state (above) linked anywhere. A customer who wanted to
   change a quantity mid-checkout had nothing but the browser back
   button, which re-fetches and re-renders the whole form. */
.ambikly-checkout__edit-cart { float: right; font-size: 0.8125rem; font-weight: 500; color: #ea580c; text-decoration: none; }
.ambikly-checkout__edit-cart:hover { text-decoration: underline; }
.ambikly-account__section { margin-bottom: 24px; }
.ambikly-account-table { width: 100%; border-collapse: collapse; }
.ambikly-account-table th, .ambikly-account-table td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left; }
.ambikly-btn--outline { background: #fff; color: #ea580c; border-color: #ea580c; }
.ambikly-btn--outline:hover { background: #fff7ed; }
.ambikly-shop__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ambikly-shop__heading { display: flex; flex-direction: column; gap: 4px; }
.ambikly-shop__active-filter { margin: 0; font-weight: 600; color: #111827; font-size: 0.95rem; }
.ambikly-shop__count { color: #6b7280; font-size: 0.875rem; }
.ambikly-shop__controls { display: flex; gap: 8px; flex-wrap: wrap; }
.ambikly-shop__controls input, .ambikly-shop__controls select { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.875rem; }
.ambikly-shop__empty { padding: 32px; text-align: center; color: #6b7280; }
.ambikly-product-card__media { position: relative; }
.ambikly-product-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; color: #d1d5db; }
/* Badges stack in a column instead of all sitting at the same
   absolute top:10px/left:10px point — a product matching more than
   one rule (e.g. New + Hot, or Sale + Sold out) used to pile every
   badge into the same spot, illegible. */
.ambikly-product-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ambikly-product-card__badge { padding: 2px 8px; background: #ef4444; color: #fff; font-size: 0.7rem; border-radius: 9999px; font-weight: 600; }
.ambikly-product-card__badge--type { position: absolute; top: 10px; right: 10px; left: auto; background: #f97316; }
.ambikly-product-card__badge--new { background: #22c55e; }
.ambikly-product-card__badge--hot { background: #f97316; }
.ambikly-product-card__badge--soldout { background: #6b7280; }
.ambikly-product-card--out-of-stock .ambikly-product-card__media img { opacity: 0.6; }
.ambikly-product-card__title a { color: inherit; text-decoration: none; }
.ambikly-product-card__rating { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: #6b7280; margin-bottom: 8px; }
.ambikly-product-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* min-width + white-space: nowrap stop these labels from breaking
   character-by-character ("V/i/e/w") whenever the card renders
   narrower than both buttons' text needs — the "You may also like"
   row hardcodes 4 columns with no minimum card width, so this isn't
   only a narrow-viewport case the existing grid breakpoints catch;
   any sufficiently narrow host container (a theme's own narrower
   content wrapper, a page-builder column) squeezes it the same way.
   flex-wrap above lets the second button drop to its own full-width
   line instead of both being crushed side by side. */
.ambikly-product-card__actions .ambikly-btn { flex: 1 1 auto; min-width: 88px; white-space: nowrap; }
.ambikly-product-card__actions .ambikly-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
/* Up to 4 separate addons (wishlist, quick-view, compare, flash-sales)
   each push their own button into this row via the
   ambikly_product_card_actions filter, with no coordination between
   them — flex-wrap plus a per-button min-width keeps a text-labeled
   one (e.g. quick-view's "Quick view") from being squeezed into
   letter-by-letter wrapping the same way __actions above was. */
.ambikly-product-card__extras { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.ambikly-product-card__extras .ambikly-btn:not(.ambikly-btn--icon) { min-width: 88px; white-space: nowrap; }
.ambikly-stars { color: #f59e0b; letter-spacing: 1px; font-size: 0.875rem; }
.ambikly-stars .is-half { opacity: 0.5; }
.ambikly-breadcrumb { display: flex; align-items: center; gap: 6px; color: #6b7280; font-size: 0.875rem; margin-bottom: 16px; flex-wrap: wrap; }
.ambikly-breadcrumb a { color: #ea580c; text-decoration: none; }
.ambikly-product-detail__main { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 768px) { .ambikly-product-detail__main { grid-template-columns: 1fr; } }
.ambikly-product-detail__media-placeholder { aspect-ratio: 1/1; background: #f3f4f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 5rem; color: #d1d5db; }
.ambikly-product-gallery__main img { width: 100%; border-radius: 12px; }
.ambikly-product-gallery__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; }
.ambikly-product-gallery__thumb { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; border-radius: 8px; overflow: hidden; flex: 0 0 64px; height: 64px; }
.ambikly-product-gallery__thumb.is-active { border-color: #ea580c; }
.ambikly-product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ambikly-product-detail__rating { display: flex; align-items: center; gap: 6px; color: #6b7280; font-size: 0.875rem; margin: 4px 0 8px; }
.ambikly-product-detail__plans { border: 0; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.ambikly-plan { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; }
.ambikly-plan:has(input:checked) { border-color: #ea580c; background: #fff7ed; }
.ambikly-plan__name { flex: 1; }
.ambikly-product-detail__attributes { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.ambikly-product-detail__attribute select { padding: 8px; border: 1px solid #d1d5db; border-radius: 8px; width: 100%; }
.ambikly-product-detail__qty { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.ambikly-product-detail__qty input { width: 80px; padding: 8px; border: 1px solid #d1d5db; border-radius: 8px; }
.ambikly-product-detail__terms { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ambikly-tag { padding: 2px 10px; background: #f3f4f6; color: #374151; border-radius: 9999px; font-size: 0.75rem; text-decoration: none; }
.ambikly-tag:hover { background: #e5e7eb; }
.ambikly-product-detail__meta { font-size: 0.875rem; color: #6b7280; margin: 8px 0; }
.ambikly-product-detail__section { margin: 40px 0; }
.ambikly-product-detail__section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; color: #111827; }
.ambikly-reviews__summary { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ambikly-reviews__list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
.ambikly-review { padding: 16px; border: 1px solid #e5e7eb; border-radius: 10px; }
.ambikly-review header { display: flex; align-items: center; gap: 8px; }
.ambikly-review__verified { font-size: 0.7rem; padding: 2px 6px; background: #d1fae5; color: #065f46; border-radius: 9999px; }
.ambikly-review h4 { margin: 8px 0 6px; font-size: 1rem; }
.ambikly-review p { margin: 0; color: #374151; }
.ambikly-review time { color: #9ca3af; font-size: 0.75rem; display: block; margin-top: 6px; }
.ambikly-review-form { display: flex; flex-direction: column; gap: 12px; max-width: 540px; }
/* Was: no `display: block` on the label or its span, unlike every
   other form on the storefront (.ambikly-field's checkout/custom-field
   labels) — the label text and its input rendered inline/overlapping
   instead of stacked, since a bare <label><span>text</span><input/></label>
   has no block-level children by default. */
.ambikly-review-form label { display: block; }
.ambikly-review-form label > span { display: block; font-size: 0.875rem; color: #374151; margin-bottom: 4px; }
.ambikly-review-form input, .ambikly-review-form select, .ambikly-review-form textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: inherit; }
.ambikly-review-form__notice { color: #047857; font-size: 0.875rem; margin: 0; }
/* Honeypot — offscreen rather than display:none, since some spam bots
   specifically skip display:none/visibility:hidden fields. */
.ambikly-review-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ambikly-account { display: grid; grid-template-columns: 220px 1fr; gap: 32px; max-width: 1100px; margin: 0 auto; padding: 32px 16px; }
@media (max-width: 768px) { .ambikly-account { grid-template-columns: 1fr; } }

/* Logged-out state: a single centered card, not the sidebar+main grid
   above (there's no sidebar to lay out), styled to match the rest of
   the storefront instead of WordPress's unstyled default login form. */
.ambikly-account--guest { grid-template-columns: 1fr; justify-items: center; padding-top: 64px; }
.ambikly-account__login-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ambikly-account__login-title { font-size: 1.25rem; font-weight: 600; color: #111827; margin: 0 0 20px; text-align: center; }
.ambikly-account__login-card #loginform p { margin: 0 0 16px; }
.ambikly-account__login-card label { display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 6px; }
.ambikly-account__login-card input.input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    box-sizing: border-box;
}
.ambikly-account__login-card input.input:focus { outline: 2px solid #fdba74; outline-offset: 1px; border-color: #ea580c; }
.ambikly-account__login-card .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.ambikly-account__login-card .login-remember input { margin: 0; }
.ambikly-account__login-card .login-submit { margin-bottom: 0; }
.ambikly-account__login-card .login-submit input[type="hidden"] { display: none; }
.ambikly-account__login-card button.wp-submit,
.ambikly-account__login-card input.button-primary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    background: #ea580c;
    border: 1px solid #ea580c;
    color: #fff;
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
}
.ambikly-account__login-card button.wp-submit:hover,
.ambikly-account__login-card input.button-primary:hover { background: #c2410c; border-color: #c2410c; }
.ambikly-account__lost-password { text-align: center; margin: 16px 0 0; font-size: 0.875rem; }
.ambikly-account__lost-password a { color: #ea580c; text-decoration: none; }
.ambikly-account__lost-password a:hover { text-decoration: underline; }
.ambikly-account__nav { list-style: none; padding: 0; margin: 0; }
.ambikly-account__nav-link { display: block; padding: 8px 12px; border-radius: 8px; color: #374151; text-decoration: none; margin-bottom: 4px; }
.ambikly-account__nav-link:hover { background: #f3f4f6; }
.ambikly-account__nav-link.is-active { background: #fff7ed; color: #ea580c; font-weight: 500; }
.ambikly-account__stats { display: flex; gap: 16px; margin: 24px 0; }
.ambikly-account__stat { background: #f9fafb; padding: 16px; border-radius: 8px; flex: 1; }
.ambikly-account__stat span { display: block; font-size: 0.875rem; color: #6b7280; }
.ambikly-account__stat strong { font-size: 1.25rem; color: #111827; }
.ambikly-account__addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ambikly-account__address { padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.875rem; line-height: 1.5; }
.ambikly-account__profile dt { font-weight: 600; color: #374151; margin-top: 8px; }
.ambikly-account__profile dd { margin: 4px 0 8px; color: #6b7280; }
.ambikly-account__profile-note { font-size: 0.8125rem; color: #9ca3af; margin-top: 8px; }
.ambikly-mini-cart { display: inline-block; }
.ambikly-mini-cart__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: transparent; cursor: pointer; color: inherit; border-radius: 8px; }
.ambikly-mini-cart__trigger:hover { background: rgba(0,0,0,0.04); }
.ambikly-mini-cart__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; background: #ea580c; color: #fff; font-size: 0.75rem; font-weight: 600; }
.ambikly-mini-cart__count[data-count="0"] { background: #9ca3af; }
.ambikly-mini-cart__subtotal { font-size: 0.875rem; font-weight: 600; color: inherit; }
.ambikly-mini-drawer { position: fixed; inset: 0; z-index: 9999; display: flex; }
.ambikly-mini-drawer__scrim { position: absolute; inset: 0; background: rgba(15,23,42,0.4); }
.ambikly-mini-drawer__panel { position: relative; margin-left: auto; width: 100%; max-width: 400px; height: 100%; background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; animation: ambikly-slide-in 0.18s ease-out; }
@keyframes ambikly-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.ambikly-mini-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
.ambikly-mini-drawer__header h2 { margin: 0; font-size: 1rem; font-weight: 600; color: #111827; }
.ambikly-mini-drawer__close { background: none; border: 0; font-size: 28px; line-height: 1; color: #6b7280; cursor: pointer; }
.ambikly-mini-drawer__close:hover { color: #111827; }
.ambikly-mini-drawer__body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.ambikly-mini-drawer__empty { color: #6b7280; text-align: center; padding: 32px 0; }
.ambikly-mini-drawer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ambikly-mini-drawer__item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid #f3f4f6; border-radius: 8px; }
.ambikly-mini-drawer__item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.ambikly-mini-drawer__placeholder { width: 56px; height: 56px; border-radius: 6px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.ambikly-mini-drawer__info { flex: 1; min-width: 0; }
.ambikly-mini-drawer__name { font-weight: 500; color: #111827; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ambikly-mini-drawer__qty { color: #6b7280; font-size: 0.75rem; margin-top: 2px; }
.ambikly-mini-drawer__remove { background: none; border: 0; color: #9ca3af; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.ambikly-mini-drawer__remove:hover { color: #dc2626; background: #fef2f2; }
.ambikly-mini-drawer__footer { border-top: 1px solid #e5e7eb; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ambikly-mini-drawer__total { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; }
.ambikly-mini-drawer__total strong { color: #111827; font-weight: 700; }
.ambikly-mini-drawer__actions { display: flex; gap: 8px; }
.ambikly-mini-drawer__actions .ambikly-btn { flex: 1; justify-content: center; }

/* Reviews block */
.ambikly-reviews-block { display: flex; flex-direction: column; gap: 16px; }
.ambikly-reviews-block .ambikly-reviews__summary { display: flex; align-items: baseline; gap: 8px; font-size: 1rem; }
.ambikly-reviews-block .ambikly-reviews__summary strong { font-size: 1.5rem; color: #111827; }
.ambikly-reviews-block .ambikly-reviews__count { color: #6b7280; font-size: 0.875rem; }
.ambikly-reviews-block .ambikly-reviews__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ambikly-reviews-block .ambikly-reviews__item { border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; background: #fff; }
.ambikly-reviews-block .ambikly-reviews__stars { color: #f59e0b; letter-spacing: 2px; margin-bottom: 4px; }
.ambikly-reviews-block .ambikly-reviews__title { margin: 4px 0; font-size: 1rem; color: #111827; }
.ambikly-reviews-block .ambikly-reviews__content { margin: 4px 0; color: #374151; line-height: 1.5; }
.ambikly-reviews-block .ambikly-reviews__meta { margin-top: 8px; color: #6b7280; font-size: 0.8125rem; display: flex; gap: 8px; align-items: center; }
.ambikly-reviews-block .ambikly-reviews__empty { color: #6b7280; }

/* Featured product block */
.ambikly-featured-product { display: grid; gap: 24px; align-items: center; padding: 24px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.ambikly-featured-product--media-left { grid-template-columns: minmax(240px, 1fr) 1fr; }
.ambikly-featured-product--media-right { grid-template-columns: 1fr minmax(240px, 1fr); }
.ambikly-featured-product--media-right .ambikly-featured-product__media { order: 2; }
.ambikly-featured-product--media-top { grid-template-columns: 1fr; }
.ambikly-featured-product__media img { width: 100%; height: auto; border-radius: 8px; display: block; }
.ambikly-featured-product__body { display: flex; flex-direction: column; gap: 12px; }
.ambikly-featured-product__title { margin: 0; font-size: 1.5rem; color: #111827; line-height: 1.2; }
.ambikly-featured-product__title a { color: inherit; text-decoration: none; }
.ambikly-featured-product__title a:hover { text-decoration: underline; }
.ambikly-featured-product__price { font-size: 1.125rem; }
.ambikly-featured-product__price del { color: #6b7280; margin-right: 8px; }
.ambikly-featured-product__price strong { color: #111827; font-weight: 700; }
.ambikly-featured-product__excerpt { color: #374151; line-height: 1.55; }
@media (max-width: 640px) {
    .ambikly-featured-product--media-left,
    .ambikly-featured-product--media-right { grid-template-columns: 1fr; }
    .ambikly-featured-product--media-right .ambikly-featured-product__media { order: 0; }
}

/* Add-to-cart inline error */
.ambikly-add-to-cart-form__error {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #b91c1c;
    font-size: 0.875rem;
}

/* Checkout inline error */
.ambikly-checkout__error {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #b91c1c;
    font-size: 0.875rem;
}

/* Bundle contents on PDP */
.ambikly-bundle-contents {
    margin: 16px 0 24px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}
.ambikly-bundle-contents h3 {
    margin: 0 0 12px;
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.ambikly-bundle-contents ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ambikly-bundle-contents li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #111827;
}
.ambikly-bundle-contents .ambikly-bundle-contents__qty {
    color: #6b7280;
    font-size: 0.875rem;
}
.ambikly-bundle-contents .ambikly-bundle-contents__opt {
    color: #6b7280;
    font-size: 0.75rem;
    margin-left: 6px;
    font-style: italic;
}