/* ==========================================================================
   Iniam custom homepage theme
   Scoped to pages where homepage_select = 'iniam' (body gets class .aiz-iniam)
   Colors sampled directly from the supplied Iniam design (Figma export).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');

.aiz-iniam {
    --iniam-maroon: #6b061d;
    --iniam-maroon-dark: #4b120e;
    --iniam-maroon-darker: #380a08;
    --iniam-cream: #faf5ee;
    --iniam-cream-soft: #f8f1e8;
    --iniam-tan: #fbe9d8;
    --iniam-orange: #f68409;
    --iniam-orange-dark: #d96f08;
    --iniam-text: #241a14;
    --iniam-text-muted: #7a6a5c;
    --iniam-border: #eee0cc;
}

/* Light polish on the shared header/nav when this theme is active — colors/labels
   themselves are admin-configurable (Website Settings > Header, and Element Style)
   and were already updated to match the brand; this just tightens spacing/hover. */
.aiz-iniam .header_menu_links {
    letter-spacing: 0.01em;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #323232 !important;
}

.aiz-iniam .header_menu_links:hover {
    color: var(--iniam-orange) !important;
}

/* Give search/wishlist/cart the same hover shadow the account icon already gets
   for free from .nav-user-info:hover .nav-user-img (aiz-core.css) — keeps all four
   header icon buttons feeling consistent. These wrappers previously had no explicit
   size, so they hugged the tiny icon graphic instead of forming a clean 40x40 circle
   like the account icon's .nav-user-img — that's why the hover looked like nothing
   was happening. */
.aiz-iniam #wishlist > a > span.position-relative,
.aiz-iniam .iniam-cart-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 !important;
    transition: box-shadow 0.3s ease;
}

.aiz-iniam .iniam-search-toggle:hover a,
.aiz-iniam #wishlist > a:hover > span.position-relative,
.aiz-iniam #wishlist > a > span.position-relative:hover,
.aiz-iniam .iniam-cart-icon-wrap:hover {
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.16);
}

/* Header logo — the default 40px cap renders noticeably smaller than the design */
.aiz-iniam #header-logo-preview {
    height: 52px !important;
}

/* Product actions follow the compact 45px Figma control row. */
.aiz-iniam .iniam-buy-actions {
    flex-wrap: nowrap;
    gap: 20px;
}

.aiz-iniam .iniam-quantity-control {
    width: 84px;
    min-width: 84px;
    height: 45px;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    justify-content: center;
}

.aiz-iniam .iniam-quantity-control .inc-btn,
.aiz-iniam .iniam-quantity-control .dec-btn {
    width: 24px !important;
    height: 35px !important;
    margin: 0 !important;
    padding: 0;
}

.aiz-iniam .iniam-quantity-control .input-number {
    width: 24px !important;
    margin: 0 !important;
    padding: 0;
}

.aiz-iniam .iniam-cart-button {
    height: 45px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 20px !important;
    background-color: var(--iniam-orange) !important;
    color: #fff4e6 !important;
    box-shadow: 1px 2px 0 #2a2a2a;
}

.aiz-iniam .iniam-cart-button:hover {
    background-color: var(--iniam-orange-dark) !important;
}

.aiz-iniam .iniam-wishlist-inline {
    width: 46px;
    min-width: 46px;
    height: 46px;
    margin: 0 !important;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.5) !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aiz-iniam .iniam-wishlist-inline svg {
    width: 46px;
    height: 46px;
}

@media (max-width: 767px) {
    .aiz-iniam #header-logo-preview {
        height: 38px !important;
    }

    .aiz-iniam .iniam-buy-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .aiz-iniam .iniam-cart-button {
        flex: 1 1 calc(100% - 94px) !important;
    }
}

/* Search: icon-only by default, input expands on click (reuses the existing
   class-toggle/.active mechanism the mobile search icon already relied on, now applied
   at every width instead of only below 991px). */
.aiz-iniam .iniam-search-toggle a {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: opacity 0.15s ease;
}

.aiz-iniam .iniam-search-toggle a:hover {
    opacity: 0.7;
}

.aiz-iniam .front-header-search {
    display: none !important;
}

.aiz-iniam .front-header-search.active {
    display: flex !important;
}

/* Icon buttons for search / account / wishlist / cart in the top header row —
   no distinct circle fill, they sit flush on the header background per design. */
.aiz-iniam #wishlist > a,
.aiz-iniam .iniam-header-cart .nav-cart-box > a,
.aiz-iniam .nav-user-img {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50%;
    background: transparent;
    border: none !important;
    color: #323232 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
}

.aiz-iniam #wishlist svg path,
.aiz-iniam .iniam-header-cart svg path,
.aiz-iniam .iniam-header-cart svg circle {
    fill: #323232 !important;
}

.aiz-iniam #wishlist .badge {
    background-color: var(--iniam-orange) !important;
}

/* Cart in the top row: icon-only circular button, hide the verbose price/item text
   (still available in the dropdown on click). The count badge is a child of the icon
   wrap itself (not a sibling positioned against the full-height <a>), so it sits
   exactly at the icon's own top-right corner regardless of the header row's height. */
.aiz-iniam .iniam-header-cart .nav-cart-box > a > span:nth-child(2),
.aiz-iniam .iniam-header-cart .nav-cart-box > a > span:nth-child(3) {
    display: none !important;
}

.aiz-iniam .iniam-cart-icon-wrap {
    position: relative;
}

.aiz-iniam .iniam-cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--iniam-orange);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Real header icon SVGs supplied in the design (search / account / wishlist / cart) */
.aiz-iniam .iniam-header-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
}


@media (max-width: 991px) {
    .aiz-iniam #compare > a,
    .aiz-iniam #wishlist > a,
    .aiz-iniam .iniam-header-cart .nav-cart-box > a,
    .aiz-iniam .nav-user-img {
        width: 34px;
        height: 34px;
    }
}

/* ---------- Top announcement bar (static, no dismiss) ---------- */
.iniam-announce-bar {
    background: #6a041b;
    color: #fff;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 9px 16px;
}

.iniam-home {
    background-color: var(--iniam-cream-soft);
    color: var(--iniam-text);
    overflow-x: hidden;
}

.iniam-home img {
    max-width: 100%;
}

.iniam-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Section title ---------- */
.iniam-section-title {
    text-align: center;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--iniam-text);
    margin-bottom: 2rem;
}

.iniam-section-title .spark {
    color: var(--iniam-orange);
    margin: 0 10px;
    font-size: 1.1rem;
    display: inline-block;
}

.iniam-section-white {
    background-color: #fff;
}

/* ---------- Buttons ---------- */
.iniam-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 28px;
    border-radius: 10px;
    border: 2px solid transparent;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.iniam-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.iniam-btn-orange {
    background: var(--iniam-orange);
    border-color: var(--iniam-maroon-darker);
    color: #fff;
    box-shadow: 0 6px 14px rgba(242, 130, 15, 0.28);
}

.iniam-btn-orange:hover {
    color: #fff;
    box-shadow: 0 8px 18px rgba(242, 130, 15, 0.38);
}

.iniam-btn-maroon {
    background: var(--iniam-maroon);
    border-color: var(--iniam-maroon);
    color: #fff;
    box-shadow: 0 6px 14px rgba(107, 6, 29, 0.25);
}

.iniam-btn-maroon:hover {
    color: #fff;
    box-shadow: 0 8px 18px rgba(107, 6, 29, 0.35);
}

.iniam-btn-outline {
    background: #fff;
    color: var(--iniam-maroon);
    border: 1px solid var(--iniam-maroon);
    padding: 10px 26px;
    border-radius: 30px;
}

.iniam-btn-outline:hover {
    color: var(--iniam-maroon);
    border-color: var(--iniam-maroon);
}

.iniam-btn-block {
    width: 100%;
    justify-content: center;
}

/* ---------- Hero ---------- */
.iniam-hero {
    position: relative;
}

.iniam-hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 639;
    overflow: hidden;
    background: var(--iniam-cream);
}

.iniam-hero-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Headline/description/badges are baked into hero-banner.png; only the Shop Now button is
   real, positioned to match the button's exact location in the 1440x639 source image
   (x:81-260, y:382-428 -> 5.63%/59.78% of the banner's own box, which keeps it correctly
   aligned at any width since the banner always keeps its native aspect ratio). */
.iniam-hero-shopnow {
    position: absolute;
    left: 5.6%;
    top: 59.8%;
    padding: 1.6% 3.4%;
    font-size: clamp(0.7rem, 1.35vw, 0.95rem);
    white-space: nowrap;
}

/* Floating side tab + WhatsApp button */
/* Bulk Order + WhatsApp are grouped as one fixed dock on the right edge, WhatsApp
   sitting directly under Bulk Order — not pinned separately to the page's bottom
   corner. Bulk Order's icon stays upright while its label text is the one rotated
   vertical, so the icon isn't flipped along with the writing-mode/rotate transform. */
.iniam-fab-group {
    position: fixed;
    right: 22px;
    top: 45%;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.iniam-bulk-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--iniam-maroon);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    width: 40px;
    padding: 12px 0;
    border-radius: 8px;
    text-decoration: none;
}

.iniam-bulk-tab .icon {
    width: 18px;
    height: 18px;
}

.iniam-bulk-tab .label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.iniam-bulk-tab:hover {
    color: #fff;
    background: var(--iniam-maroon-dark);
}

.iniam-whatsapp-fab {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 10px 22px rgba(37, 211, 102, 0.4);
    text-decoration: none;
}

.iniam-whatsapp-fab:hover {
    color: #fff;
}

/* ---------- Category tiles ---------- */
/* Categories section — exact measurements from Figma: section 1440x361 on #FFFFFF,
   a 1280x241 row of 5 cards (240x241 each, 20px gap, 12px radius, 1px border), the
   row centered with 60px of breathing room above and below. */
.iniam-categories-section {
    padding: 60px 0;
}

.iniam-cat-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.iniam-cat-row::-webkit-scrollbar {
    display: none;
}

.iniam-cat-tile {
    flex: 0 0 240px;
    width: 240px;
    height: 241px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--iniam-text);
    background: #fff;
    border: 1px solid var(--iniam-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.iniam-cat-tile:hover {
    color: var(--iniam-text);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(107, 6, 29, 0.1);
}

.iniam-cat-tile .photo {
    display: block;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.iniam-cat-tile .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iniam-cat-tile .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 12px 14px;
}

.iniam-cat-tile .name {
    font-weight: 700;
    font-size: 0.95rem;
}

.iniam-cat-tile .badge-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--iniam-maroon);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ---------- Product grid (static Favourites / New Arrivals) ---------- */
.iniam-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.iniam-product-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(107, 6, 29, 0.08);
    display: flex;
    flex-direction: column;
}

.iniam-product-card .thumb {
    position: relative;
    aspect-ratio: 296 / 293;
    overflow: hidden;
}

.iniam-product-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iniam-product-card .badge-best {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--iniam-maroon);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.iniam-product-card .rating {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #fff;
    color: var(--iniam-text);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.iniam-product-card .rating i {
    color: var(--iniam-orange);
    font-size: 0.72rem;
}

.iniam-product-card .body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.iniam-product-card .name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 2px;
    color: var(--iniam-text);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iniam-product-card .name a {
    color: inherit;
    text-decoration: none;
}

.iniam-product-card .sub {
    color: var(--iniam-text-muted);
    font-size: 0.8rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--iniam-border);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2em;
}

.iniam-product-card .price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.iniam-product-card .price-row .mrp {
    text-decoration: line-through;
    color: var(--iniam-text-muted);
    font-size: 0.85rem;
}

.iniam-product-card .price-row .now {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--iniam-text);
}

.iniam-product-card .price-row .off-badge {
    margin-left: auto;
    background: var(--iniam-tan);
    color: var(--iniam-orange-dark);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.iniam-product-card .iniam-btn {
    margin-top: auto;
    padding: 10px 14px;
    font-size: 0.9rem;
    border-radius: 8px;
}

/* ---------- Promo band ---------- */
.iniam-promo-band {
    background: linear-gradient(135deg, var(--iniam-maroon), var(--iniam-maroon-darker));
    color: #fff;
    border-radius: 24px;
    padding: 50px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
    overflow: hidden;
}

.iniam-promo-band .eyebrow {
    color: #f0c9a0;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.iniam-promo-band h2 {
    font-size: 2.1rem;
    font-weight: 800;
    color: #f7e6c9;
    margin-bottom: 22px;
}

.iniam-promo-callouts {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.iniam-promo-callouts .item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.iniam-promo-callouts .item .ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #f0c9a0;
}

.iniam-promo-band .img-wrap {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 740 / 450;
}

.iniam-promo-band .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Trusted by ---------- */
.iniam-trusted-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(107, 6, 29, 0.08);
    padding: 30px 30px 34px;
}

.iniam-trusted-title {
    margin-bottom: 1.5rem;
    position: relative;
}

.iniam-trusted-title::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--iniam-border);
    z-index: 0;
}

.iniam-trusted-title span,
.iniam-trusted-title {
    background: #fff;
}

.iniam-trusted-title .spark,
.iniam-trusted-title {
    position: relative;
    z-index: 1;
}

.iniam-trusted-logos {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Reviews ---------- */
.iniam-reviews-subtitle {
    color: var(--iniam-text-muted);
}

.iniam-reviews-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}

.iniam-review-card-img {
    flex: 0 0 auto;
    width: 300px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(107, 6, 29, 0.08);
    scroll-snap-align: start;
}

.iniam-reviews-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.iniam-reviews-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--iniam-border);
}

.iniam-reviews-dots span.active {
    background: var(--iniam-orange);
}

/* ---------- Promise row ---------- */
.iniam-promise-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    text-align: center;
}

.iniam-promise-item {
    flex: 1 1 150px;
}

.iniam-promise-item img {
    width: 130px;
    height: auto;
    margin: 0 auto 6px;
    display: block;
}

.iniam-promise-item .label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--iniam-maroon);
}

/* ---------- Split CTA ---------- */
.iniam-cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: var(--iniam-tan);
    border-radius: 24px;
    padding: 20px;
}

.iniam-cta-split .img-wrap {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 670 / 390;
}

.iniam-cta-split .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iniam-cta-split .eyebrow {
    color: var(--iniam-maroon);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.iniam-cta-split h2 {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--iniam-maroon);
    margin-bottom: 18px;
}

.iniam-cta-desc {
    color: var(--iniam-text-muted);
}

/* ---------- Section spacing ---------- */
.iniam-section {
    padding: 46px 0;
}

/* ==========================================================================
   Responsive: tablet
   ========================================================================== */
@media (max-width: 1199px) and (min-width: 768px) {
    .iniam-product-grid { grid-template-columns: repeat(2, 1fr); }
    .iniam-promo-band { padding: 36px 28px; }
}

/* ==========================================================================
   Responsive: mobile / tablet shared (below desktop)
   ========================================================================== */
@media (max-width: 991px) {
    .iniam-promo-band {
        grid-template-columns: 1fr;
    }

    .iniam-promo-band .img-wrap {
        order: -1;
    }

    .iniam-cta-split {
        grid-template-columns: 1fr;
    }

    .iniam-cta-split .img-wrap {
        order: -1;
    }
}

/* ==========================================================================
   Responsive: mobile
   ========================================================================== */
@media (max-width: 767px) {
    .iniam-container {
        padding: 0 14px;
    }

    .iniam-section {
        padding: 32px 0;
    }

    .iniam-hero-shopnow {
        padding: 1.4% 3%;
    }

    .iniam-section-title {
        font-size: 1.25rem;
        margin-bottom: 1.4rem;
    }

    .iniam-categories-section {
        padding: 32px 0;
    }

    .iniam-cat-tile {
        flex: 0 0 150px;
        width: 150px;
        height: 165px;
    }

    .iniam-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .iniam-product-card .name {
        font-size: 0.85rem;
    }

    .iniam-promo-band {
        padding: 26px 20px;
        border-radius: 18px;
    }

    .iniam-promo-band h2 {
        font-size: 1.5rem;
    }

    .iniam-trusted-card {
        padding: 24px 18px 28px;
    }

    .iniam-review-card-img {
        width: 240px;
    }

    .iniam-promise-row {
        justify-content: space-between;
    }

    .iniam-promise-item {
        flex: 1 1 40%;
    }

    .iniam-promise-item img {
        width: 96px;
    }

    .iniam-cta-split h2 {
        font-size: 1.5rem;
    }

    .iniam-bulk-tab {
        display: none;
    }

    .iniam-fab-group {
        right: 14px;
        top: auto;
        bottom: 14px;
        transform: none;
    }

}

@media (max-width: 420px) {
    .iniam-product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* ==========================================================================
   Iniam-branded site-wide footer  —  rebuilt 1:1 from Figma (node 220-1588)
   Palette: maroon #6B061D · heading peach #F9BC78 · body cream #FFF8F1
   ========================================================================== */
.iniam-footer {
    position: relative;
    background: #6b061d;
    color: #fff8f1;
    overflow: hidden;
    font-family: 'Public Sans', sans-serif;
}

/* ---- top wave (exact Figma paths, 1440x188) ---- */
.iniam-footer-wave-wrap {
    position: relative;
    z-index: 2;
    line-height: 0;
}

.iniam-footer-wave {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: -1px;
}

/* little heart-spark mark sitting on the wave crest — positioned as a
   percentage of the wave box so it tracks the crest at every width */
.iniam-footer-crest {
    position: absolute;
    left: 80.5%;
    top: 27.6%;
    z-index: 3;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.iniam-footer-crest svg {
    display: block;
    width: 34px;
    height: auto;
}

/* ---- faint mandala watermarks bleeding off both bottom corners ---- */
.iniam-footer-mandala {
    position: absolute;
    bottom: 0;
    width: 92px;
    height: 184px;
    z-index: 1;
    pointer-events: none;
}

.iniam-footer-mandala.is-left {
    left: 0;
}

.iniam-footer-mandala.is-right {
    right: 0;
    transform: scaleX(-1);
}

.iniam-footer-inner {
    position: relative;
    z-index: 4;
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 40px 34px;
}

/* ---------- upper grid: brand + 4 link columns ---------- */
.iniam-footer-top {
    display: grid;
    grid-template-columns: minmax(240px, 300px) repeat(3, 1fr) 1.15fr;
    gap: 30px 40px;
    padding-bottom: 34px;
}

.iniam-footer-brand {
    max-width: 300px;
}

.iniam-footer-logo {
    height: 104px;
    width: auto;
    margin-bottom: 20px;
    margin-left: -6px;
}

.iniam-footer-tagline {
    font-size: 15px;
    line-height: 1.6;
    color: #fff8f1;
    margin-bottom: 26px;
}

.iniam-footer-social {
    display: flex;
    gap: 16px;
}

.iniam-footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid #f9bc78;
    color: #f9bc78;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.iniam-footer-social a:hover {
    background: #f9bc78;
    color: #6b061d;
}

.iniam-footer-col h4 {
    color: #f9bc78;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: 0.01em;
    margin: 4px 0 22px;
    font-family: 'Playfair Display', 'Public Sans', serif;
}

.iniam-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iniam-footer-col li {
    margin-bottom: 15px;
}

.iniam-footer-col a {
    color: #fff8f1;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.15s ease;
}

.iniam-footer-col a:hover {
    color: #f9bc78;
}

/* contact column */
.iniam-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iniam-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.5;
    color: #fff8f1;
}

.iniam-footer-contact i {
    color: #fff8f1;
    font-size: 17px;
    margin-top: 1px;
    flex-shrink: 0;
}

/* ---------- bottom bar ---------- */
.iniam-footer-bottom {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 22px;
    font-size: 15px;
    font-weight: 700;
    color: #fff8f1;
}

.iniam-footer-bottom .deco {
    flex-shrink: 0;
    width: 46px;
    height: auto;
    opacity: 0.9;
}

.iniam-footer-bottom .rule {
    flex: 1;
    height: 1px;
    background: rgba(255, 248, 241, 0.2);
    min-width: 20px;
}

.iniam-footer-bottom .spark {
    flex-shrink: 0;
    width: 20px;
    height: auto;
}

.iniam-footer-bottom .policy a {
    color: #fff8f1;
    text-decoration: none;
    font-weight: 700;
}

.iniam-footer-bottom .policy a:hover {
    color: #f9bc78;
}

.iniam-footer-copyright,
.iniam-footer-bottom .policy {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .iniam-footer-top {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .iniam-footer-brand {
        grid-column: 1 / -1;
        max-width: 420px;
    }
}

@media (max-width: 767px) {
    .iniam-footer-inner {
        padding: 20px 22px 30px;
    }
    .iniam-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 26px 20px;
    }
    .iniam-footer-crest svg {
        width: 24px;
    }
    .iniam-footer-bottom {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 10px 14px;
    }
    .iniam-footer-bottom .rule {
        display: none;
    }
    .iniam-footer-bottom .deco {
        display: none;
    }
}

@media (max-width: 460px) {
    .iniam-footer-top {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Product Details page — brand-consistent theming over the stock CMS layout.
   Scoped to .product-details so it can't leak into admin/account pages that
   also use .bg-light, .aiz-megabox, etc. Structure/JS (gallery, variants,
   quantity, add-to-cart) is untouched — colors, radii and type only.
   NOTE: built without a visual reference to the Figma product-details design
   (image budget exhausted this session) — matches the established Iniam
   palette/components from the homepage, not verified pixel-for-pixel.
   ========================================================================== */
.aiz-iniam .product-details {
    background: #fff;
}

/* Breadcrumb */
.aiz-iniam .product-details .breadcrumb li a:hover {
    color: var(--iniam-maroon);
}

/* Image gallery: rounded corners matching the rest of the site's card language */
.aiz-iniam .product-details .thumb-container,
.aiz-iniam .product-details .swiper-slide,
.aiz-iniam .product-details .product-slider-wrapper img {
    border-radius: 12px !important;
}

/* Main slider image had w-100 h-100 with no object-fit, so it was stretching to fill
   the slide instead of cropping cleanly — the thumbnails already had object-fit-cover,
   this brings the main image in line with them. */
.aiz-iniam .product-details .main-slider .swiper-slide img,
.aiz-iniam .product-details .main-slider .lightbox-source {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* Compare / Wishlist / Share row */
.aiz-iniam .product-details .hov-text-dark:hover {
    color: var(--iniam-maroon) !important;
}

/* Rating stars — only filled/half stars get the brand orange; empty stars (no .active/.half
   class) were being forced orange too, making every rating look like 5 stars */
.aiz-iniam .product-details .rating i.active,
.aiz-iniam .product-details .rating i.half,
.aiz-iniam .product-details .rating svg path {
    color: var(--iniam-orange) !important;
    fill: var(--iniam-orange) !important;
}

.aiz-iniam .product-details .rating i:not(.active):not(.half) {
    color: var(--iniam-border) !important;
}

/* Price / stock panel */
.aiz-iniam .product-details .bg-light {
    background-color: var(--iniam-cream) !important;
}

.aiz-iniam .product-details h6.text-dark,
.aiz-iniam .product-details .text-dark {
    color: var(--iniam-text);
}

.aiz-iniam .product-details .discount-badge {
    background-color: var(--iniam-orange) !important;
}

.aiz-iniam .product-details .text-blue {
    color: var(--iniam-maroon) !important;
}

/* Quantity stepper — Figma (frame 214) uses a plain 6px-radius box, not a full pill */
.aiz-iniam .product-details .aiz-plus-minus {
    border-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 6px !important;
}

.aiz-iniam .product-details .inc-btn:hover,
.aiz-iniam .product-details .dec-btn:hover {
    background-color: var(--iniam-tan) !important;
}

/* Variant swatches (aiz-megabox) — checked state accent */
.aiz-iniam .product-details .aiz-megabox input:checked ~ .variant-item-select,
.aiz-iniam .product-details .aiz-megabox input:checked + .variant-item-select {
    border-color: var(--iniam-maroon) !important;
    background-color: var(--iniam-tan) !important;
}

/* Primary actions */
.aiz-iniam .product-details .buy-now {
    background-color: var(--iniam-maroon) !important;
}

.aiz-iniam .product-details .buy-now:hover {
    background-color: var(--iniam-maroon-dark) !important;
}

.aiz-iniam .product-details .add-to-cart {
    background-color: var(--iniam-orange) !important;
    color: #fff4e6 !important;
    border: 1px solid #161616 !important;
    box-shadow: 1px 2px 0 0 #2a2a2a !important;
}

.aiz-iniam .product-details .add-to-cart:hover {
    background-color: var(--iniam-orange-dark) !important;
    color: #fff4e6 !important;
}

/* Figma (frame 214) uses a plain 6px radius, not a full pill */
.aiz-iniam .product-details .add-to-cart,
.aiz-iniam .product-details .out-of-stock {
    border-radius: 6px !important;
}

/* Figma has no SKU display and no "Pricing" label — SKU stays hidden from the UI but the
   markup/JS (SKUCopyToClipboard, #variant_sku) is left intact, just not shown. */
.aiz-iniam .product-details #variant_sku_section {
    display: none !important;
}

/* Discount badge: Figma shows "X% offer" as a light pill, not a solid "-X%" badge */
.aiz-iniam .product-details .iniam-offer-badge {
    background: var(--iniam-tan);
    color: var(--iniam-orange-dark);
}

/* Wishlist icon button sitting inline with Add to Cart in the action row — Figma (frame 214)
   uses a 46x46 rounded square, not a circle */
.aiz-iniam .product-details .iniam-wishlist-inline {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--iniam-maroon);
    transition: background 0.15s ease;
}

.aiz-iniam .product-details .iniam-wishlist-inline svg {
    width: 22px;
    height: 22px;
}

.aiz-iniam .product-details .iniam-wishlist-inline:hover {
    background: var(--iniam-cream-soft);
    color: var(--iniam-maroon);
}

/* Short description shown between the rating row and the price box, reusing the same
   truncated teaser text as the homepage product card for consistency. */
.aiz-iniam .product-details .iniam-short-description {
    color: var(--iniam-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 10px 0 16px;
}

/* Product title */
.aiz-iniam .product-details .iniam-product-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--iniam-maroon);
    line-height: 1.25;
}

/* Variant box: drop the visible border, keep only spacing */
.aiz-iniam .product-details .iniam-variant-box {
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.aiz-iniam .product-details .iniam-variant-label {
    color: var(--iniam-maroon);
}

/* Bigger, brand-colored weight/variant option pills — Figma uses a rounded rectangle,
   not a full pill */
.aiz-iniam .product-details .product-variant .variant-wrapper .variant-item-select {
    padding: 10px 22px !important;
    border-radius: 8px !important;
}

.aiz-iniam .product-details .product-variant .aiz-megabox .aiz-megabox-elem {
    outline-color: var(--iniam-border) !important;
    border-radius: 8px !important;
}

.aiz-iniam .product-details .product-variant .variant-wrapper .variant-item-select.active {
    border: 2px solid var(--iniam-maroon) !important;
    background: var(--iniam-cream-soft) !important;
}

/* Live selected-variant price, relocated into the top price row (see iniam-buy-box below) */
.aiz-iniam .product-details #chosen_price_div #chosen_price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--iniam-text);
}

/* Qty/Add-to-Cart/Wishlist action box: Figma has no dashed card around this row */
.aiz-iniam .product-details .iniam-buy-box {
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Pricing box: no card background, just the numbers + tax note */
.aiz-iniam .product-details .iniam-price-box {
    padding: 4px 0;
}

.aiz-iniam .product-details .iniam-tax-note {
    color: var(--iniam-text-muted);
    margin-top: 4px;
}

/* Kept in the markup for a possible future re-enable, hidden from view for now */
.aiz-iniam .product-details .iniam-hidden-for-now {
    display: none !important;
}

/* Gallery was position:sticky on desktop (custom-style.css), pinning it in place while the
   page scrolled — Figma wants it scrolling normally with the rest of the content. */
@media (min-width: 992px) {
    .aiz-iniam .product-details .product-slider-wrapper {
        position: static !important;
        top: auto !important;
    }
}

/* Sticky tab nav */
.aiz-iniam .product-details-nav-tab #tabLinks .nav-link.active,
.aiz-iniam .product-details-nav-tab #tabLinks .nav-link:hover {
    color: var(--iniam-maroon) !important;
}

.aiz-iniam .product-details-nav-tab #tabLinks .nav-link.active {
    border-bottom: 2px solid var(--iniam-orange);
}

/* Related products / frequently bought / from this seller carousels */
.aiz-iniam .related-product-container,
.aiz-iniam .frequently-bought-container,
.aiz-iniam .from-seller-container {
    border-radius: 16px !important;
    border-color: var(--iniam-border) !important;
}

.aiz-iniam .related-product-container .fw-700,
.aiz-iniam .frequently-bought-container .fw-700 {
    color: var(--iniam-maroon);
}

/* Review cards */
.aiz-iniam .review-box,
.aiz-iniam .single-review {
    border-radius: 12px !important;
}

/* Customer Review section (Figma node 194-817): a single horizontal band —
   [ score + stars + count ] [ breakdown bars ] [ review card ] [ review card ] —
   that wraps to stacked blocks below the lg breakpoint. */
.aiz-iniam .reviews-ratings-container .iniam-customer-review-heading {
    margin: 0 0 22px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--iniam-text);
}

.aiz-iniam .reviews-ratings-container .iniam-review-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 34px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-content {
    flex: 1 1 440px;
    min-width: 0;
}

/* Score + breakdown bars sit side by side (was stacked in the old col-lg-6 layout). */
.aiz-iniam .reviews-ratings-container .iniam-review-summary {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    flex: 0 0 auto;
}

.aiz-iniam .reviews-ratings-container .iniam-review-summary-left {
    flex-shrink: 0;
}

.aiz-iniam .reviews-ratings-container .iniam-review-summary-left .rating i {
    font-size: 0.85rem;
    color: var(--iniam-orange);
    margin-right: 2px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-score {
    margin: 0 0 4px;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--iniam-text);
}

.aiz-iniam .reviews-ratings-container .iniam-review-count {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--iniam-text-muted);
}

.aiz-iniam .reviews-ratings-container .iniam-review-bars {
    width: 230px;
    max-width: 100%;
    padding-top: 4px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-bar-row .star-label {
    flex-shrink: 0;
    width: 34px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--iniam-text);
}

.aiz-iniam .reviews-ratings-container .iniam-review-bar-row .star-label i {
    color: var(--iniam-orange);
    font-size: 0.7rem;
}

.aiz-iniam .reviews-ratings-container .iniam-review-bar-row .bar-track {
    flex: 1 1 auto;
    display: block;
    height: 6px;
    border-radius: 4px;
    background: #ededed;
    overflow: hidden;
}

.aiz-iniam .reviews-ratings-container .iniam-review-bar-row .bar-fill {
    display: block;
    height: 100%;
    background: var(--iniam-orange);
    border-radius: 4px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-bar-row .pct {
    flex-shrink: 0;
    width: 36px;
    text-align: right;
    font-size: 0.78rem;
    color: var(--iniam-text-muted);
}


/* "You May Also Like" (from_this_seller_products) — centered sparkle title matching the
   Our Promise section's treatment, sized for a card context rather than a full section */
.aiz-iniam .iniam-card-section-title {
    text-align: center;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--iniam-text);
    margin: 0 0 2rem;
}

.aiz-iniam .iniam-card-section-title .spark {
    color: var(--iniam-orange);
    margin: 0 10px;
    font-size: 1.1rem;
    display: inline-block;
}

@media (max-width: 767.98px) {
    .aiz-iniam .iniam-card-section-title {
        font-size: 1.25rem;
        margin-bottom: 1.4rem;
    }

    .aiz-iniam .iniam-card-section-title .spark {
        font-size: 0.9rem;
    }
}

.aiz-iniam .iniam-card-view-all {
    position: absolute;
    right: 0;
    top: 0;
}

/* "You May Also Like" product row — same drag-scroll pattern as the homepage category
   row (.iniam-cat-row): no slick carousel, just a native scrollable flex row with the
   scrollbar hidden. iniam-review-drag.js (in product_details.blade.php) grabs this too. */
.aiz-iniam .iniam-seller-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
}

.aiz-iniam .iniam-seller-row::-webkit-scrollbar {
    display: none;
}

.aiz-iniam .iniam-seller-row.dragging {
    cursor: grabbing;
}

.aiz-iniam .iniam-seller-row .carousel-box {
    flex: 0 0 170px;
}

@media (min-width: 1200px) {
    .aiz-iniam .iniam-seller-row .carousel-box {
        flex-basis: 190px;
    }
}

@media (max-width: 575.98px) {
    .aiz-iniam .iniam-card-view-all {
        position: static;
        margin-top: 10px;
        justify-content: center;
    }
}

/* Individual review cards — quote-style, beside the score/bars summary (Figma).
   Horizontal drag/swipe scroller showing 2 cards at a time (same pattern as the
   homepage .iniam-cat-row); iniam-review-drag.js adds mouse-drag panning. */
.aiz-iniam .reviews-ratings-container .iniam-review-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    margin-top: 0;
}

.aiz-iniam .reviews-ratings-container .iniam-review-grid::-webkit-scrollbar {
    display: none;
}

.aiz-iniam .reviews-ratings-container .iniam-review-grid.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.aiz-iniam .reviews-ratings-container .iniam-review-grid .iniam-review-card {
    flex: 0 0 calc(50% - 8px);
    scroll-snap-align: start;
}

@media (max-width: 767.98px) {
    .aiz-iniam .reviews-ratings-container .iniam-review-grid .iniam-review-card {
        flex-basis: 85%;
    }
}

.aiz-iniam .reviews-ratings-container .iniam-review-card {
    background: var(--iniam-cream-soft);
    border: 0;
    border-radius: 14px;
    padding: 20px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-quote {
    display: block;
    width: 26px;
    height: auto;
    margin-bottom: 12px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-text {
    color: var(--iniam-text);
    font-size: 0.85rem;
    line-height: 1.7;
    margin: 0 0 16px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-divider {
    border-top: 1px solid var(--iniam-border);
    margin-bottom: 14px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aiz-iniam .reviews-ratings-container .iniam-review-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.aiz-iniam .reviews-ratings-container .iniam-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aiz-iniam .reviews-ratings-container .iniam-review-name {
    margin: 0;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--iniam-maroon);
}

.aiz-iniam .reviews-ratings-container .iniam-review-date {
    display: block;
    font-size: 0.72rem;
    color: var(--iniam-text-muted);
}

.aiz-iniam .reviews-ratings-container .iniam-review-author .rating i {
    font-size: 0.7rem;
    margin-right: 1px;
    color: var(--iniam-orange);
}

/* Main image slide height was unset, so it followed each photo's natural aspect ratio —
   switching slides made the whole gallery column jump taller/shorter. Lock the main slider
   and its thumbnail column to a matching fixed height; object-fit:cover (above) keeps
   photos filling it cleanly regardless of their real dimensions. */
.aiz-iniam .product-details .main-slider,
.aiz-iniam .product-details .main-slider .swiper-wrapper,
.aiz-iniam .product-details .main-slider .swiper-slide,
.aiz-iniam .product-details .thumb-container {
    height: 460px !important;
}

@media (max-width: 767.98px) {
    .aiz-iniam .product-details .main-slider,
    .aiz-iniam .product-details .main-slider .swiper-wrapper,
    .aiz-iniam .product-details .main-slider .swiper-slide,
    .aiz-iniam .product-details .thumb-container {
        height: 320px !important;
    }
}

/* Trust badges strip (Figma frame 63(4)) — sits directly under the image+details row,
   above the description/reviews tabs. */
.aiz-iniam .product-details .iniam-trust-badges {
    background: var(--iniam-cream-soft);
}

.aiz-iniam .product-details .iniam-trust-badges-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 0;
}

.aiz-iniam .product-details .iniam-trust-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0;
    min-width: 200px;
    padding: 4px 20px;
    border-right: 1px solid var(--iniam-border);
}

.aiz-iniam .product-details .iniam-trust-badge:last-child {
    border-right: none;
}

.aiz-iniam .product-details .iniam-trust-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aiz-iniam .product-details .iniam-trust-icon img {
    width: 40px;
    height: 40px;
}

.aiz-iniam .product-details .iniam-trust-title {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--iniam-text);
    line-height: 1.3;
}

.aiz-iniam .product-details .iniam-trust-sub {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--iniam-text-muted);
}

@media (max-width: 767.98px) {
    .aiz-iniam .product-details .iniam-trust-badge {
        border-right: none;
        flex: 1 1 45%;
        padding: 10px;
    }
}
/* ==========================================================================
   Auth — customer login (Figma: full-bleed cream, food photo, floating card)
   Rendered inside frontend.layouts.app so it keeps the common header/footer.
   ========================================================================== */
.aiz-iniam .iniam-auth {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 640px;
    padding: 64px 20px;
    background-color: var(--iniam-cream);
    background-image: url('../img/iniam/login-bg.jpg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

/* decorative corners (mandalas, produce) are baked into login-bg.jpg */

.aiz-iniam .iniam-auth-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 56px;
}

/* ---------- welcome copy (sits in the open cream area, next to the card) ---------- */
.aiz-iniam .iniam-auth-welcome {
    flex: 0 1 400px;
    max-width: 400px;
}

.aiz-iniam .iniam-auth-welcome-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1.15;
    color: var(--iniam-maroon);
    margin: 0;
}

.aiz-iniam .iniam-auth-wave {
    display: inline-block;
    width: 40px;
    height: auto;
    flex: none;
}

.aiz-iniam .iniam-auth-rule {
    display: block;
    width: 150px;
    height: 3px;
    margin: 18px 0 20px;
    background: var(--iniam-orange);
    border-radius: 2px;
}

.aiz-iniam .iniam-auth-welcome-text {
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--iniam-text);
    margin: 0;
}

/* ---------- Right: login card ---------- */
.aiz-iniam .iniam-auth-card {
    flex: 0 0 420px;
    max-width: 420px;
    background: #fffaf5;
    border: 1px solid rgba(238, 224, 204, 0.7);
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: 0 30px 70px rgba(107, 6, 29, 0.12);
}

.aiz-iniam .iniam-auth-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.9rem;
    text-align: center;
    color: var(--iniam-maroon);
    margin: 0 0 24px;
}

.aiz-iniam .iniam-field {
    margin-bottom: 16px;
}

.aiz-iniam .iniam-field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--iniam-text);
    margin-bottom: 8px;
}

.aiz-iniam .iniam-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-size: 0.92rem;
    color: var(--iniam-text);
    background: #fff;
    border: 1px solid var(--iniam-border);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aiz-iniam .iniam-input:focus {
    outline: none;
    border-color: var(--iniam-orange);
    box-shadow: 0 0 0 3px rgba(246, 132, 9, 0.15);
}

.aiz-iniam .iniam-input.is-invalid {
    border-color: #d43533;
}

.aiz-iniam .iniam-input-group {
    position: relative;
}

.aiz-iniam .iniam-input.has-icon {
    padding-left: 44px;
}

.aiz-iniam .iniam-input.has-toggle {
    padding-right: 44px;
}

.aiz-iniam .iniam-input-icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 48px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--iniam-text-muted);
    pointer-events: none;
}

.aiz-iniam .iniam-pass-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 48px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--iniam-text-muted);
    cursor: pointer;
}

.aiz-iniam .iniam-pass-toggle i {
    font-size: 1.15rem;
}

.aiz-iniam .iniam-field-error {
    display: block;
    margin-top: 5px;
    font-size: 0.78rem;
    color: #d43533;
}

.aiz-iniam .iniam-auth-row-forgot {
    display: flex;
    justify-content: flex-end;
    margin: 6px 0 16px;
}

.aiz-iniam .iniam-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 22px;
    font-size: 0.9rem;
    color: var(--iniam-text);
    cursor: pointer;
}

.aiz-iniam .iniam-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--iniam-maroon);
}

.aiz-iniam .iniam-auth-link {
    font-size: 0.88rem;
    color: var(--iniam-orange);
    text-decoration: none;
}

.aiz-iniam .iniam-auth-link:hover {
    color: var(--iniam-orange-dark);
    text-decoration: underline;
}

.aiz-iniam .iniam-auth-link.strong {
    font-weight: 700;
}

.aiz-iniam .iniam-auth-submit {
    margin-top: 4px;
}

.aiz-iniam .iniam-auth-demo {
    margin-top: 14px;
    width: 100%;
    height: 40px;
    background: #fff;
    border: 1px dashed var(--iniam-border);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--iniam-text-muted);
    cursor: pointer;
}

.aiz-iniam .iniam-auth-foot {
    margin: 20px 0 0;
    font-size: 0.88rem;
    color: var(--iniam-text);
    text-align: center;
}

/* ---------- wide card + 2-column form (registration) ---------- */
.aiz-iniam .iniam-auth-card-wide {
    flex: 0 0 560px;
    max-width: 560px;
}

.aiz-iniam .iniam-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.aiz-iniam .iniam-check-terms {
    align-items: flex-start;
    margin: 10px 0 20px;
    line-height: 1.4;
}

.aiz-iniam .iniam-check-terms input {
    margin-top: 2px;
    flex: none;
}

/* intl-tel-input inside the brand phone field */
.aiz-iniam .iniam-phone-group .iti {
    display: block;
    width: 100%;
}

.aiz-iniam .iniam-phone-group .iti__selected-flag {
    border-radius: 12px 0 0 12px;
}

@media (max-width: 767.98px) {
    .aiz-iniam .iniam-field-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 991.98px) {
    .aiz-iniam .iniam-auth {
        justify-content: center;
    }

    .aiz-iniam .iniam-auth-shell {
        justify-content: center;
    }

    .aiz-iniam .iniam-auth-welcome {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .aiz-iniam .iniam-auth {
        padding: 36px 14px;
        background-image: none;
    }

    .aiz-iniam .iniam-auth-card {
        flex-basis: auto;
        width: 100%;
        padding: 32px 22px;
    }
}

@media (max-width: 991.98px) {
    .aiz-iniam .iniam-auth-card-wide {
        flex: 0 1 560px;
        width: 100%;
    }
}