/* ============================================================
   Charsutra — Footer
   ------------------------------------------------------------
   The old footer hardcoded every colour, radius and border in
   style="" attributes, which is why nothing about it could be
   themed or made responsive. All of it lives here now.
   ============================================================ */

:root {
    --csf-navy: #0F1E33;
    --csf-navy-deep: #0A1626;
    --csf-navy-soft: #1B2E48;
    --csf-gold: #A9825A;
    --csf-gold-light: #C39C72;
    --csf-cream: #E9DCC8;
    --csf-text: #A9B3C2;
    --csf-line: rgba(255, 255, 255, .09);
}

.cs-footer {
    position: relative;
    background-color: var(--csf-navy);
    color: var(--csf-text);
    font-family: var(--body-font, "Nunito Sans", sans-serif);
}

/* Gold hairline across the very top, so the footer reads as a
   deliberate edge rather than the page simply going dark. */
.cs-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent, var(--csf-gold) 25%, var(--csf-cream) 50%, var(--csf-gold) 75%, transparent);
}

/* ============================================================
   Service strip
   ============================================================ */
.cs-foot-strip {
    border-bottom: 1px solid var(--csf-line);
    background-color: rgba(255, 255, 255, .022);
}

.cs-foot-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-foot-services li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 22px 24px;
    border-right: 1px solid var(--csf-line);
}

.cs-foot-services li:first-child { padding-left: 0; }
.cs-foot-services li:last-child {
    border-right: none;
    padding-right: 0;
}

.cs-foot-services i {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background-color: rgba(169, 130, 90, .14);
    color: var(--csf-gold-light);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cs-foot-services span {
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--csf-text);
}

.cs-foot-services strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

/* ============================================================
   Main columns
   ============================================================ */
.cs-foot-main {
    padding: 56px 0 48px;
}

.cs-foot-grid {
    display: grid;
    /* brand column wider than the link columns; contact wider again */
    grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
    gap: 40px;
}

.cs-foot-col {
    min-width: 0;
}

/* --- Brand --- */
.cs-foot-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.cs-foot-logo img {
    height: 62px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.cs-foot-about {
    margin: 0 0 22px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--csf-text);
    /* The about text can run long; four lines then ellipsis keeps the
       brand column from towering over the others. */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 380px;
}

/* --- Social --- */
.cs-foot-social {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* Was a vertical strip crammed against the edge of the contact card,
   with its own background block. It belongs with the brand. */
.cs-foot-social a {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--csf-line);
    background-color: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color .22s ease, color .22s ease,
                border-color .22s ease, transform .22s ease;
}

.cs-foot-social a:hover {
    background-color: var(--csf-gold);
    border-color: var(--csf-gold);
    color: var(--csf-navy);
    transform: translateY(-3px);
}

/* --- Column headings --- */
.cs-foot-title {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 12px;
    font-family: var(--title-font, "Playfair Display", serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: #fff;
}

.cs-foot-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--csf-gold), transparent);
}

/* --- Link lists --- */
.cs-foot-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-foot-links li + li {
    margin-top: 11px;
}

.cs-foot-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 13.5px;
    color: var(--csf-text);
    text-decoration: none;
    transition: color .2s ease, padding-left .25s ease;
}

/* Arrow appears and the label slides, instead of the old static
   arrow glyph sitting in front of every item. */
.cs-foot-links a::before {
    content: '\f105';
    font-family: var(--icon-font, "Font Awesome 6 Pro");
    font-weight: 900;
    position: absolute;
    left: 0;
    font-size: 11px;
    color: var(--csf-gold);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .22s ease, transform .22s ease;
}

.cs-foot-links a:hover {
    color: #fff;
    padding-left: 14px;
}

.cs-foot-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================================
   Contact column
   ============================================================ */
.cs-foot-contact {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.cs-foot-contact li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--csf-line);
}

.cs-foot-contact li:first-child { padding-top: 0; }
.cs-foot-contact li:last-child { border-bottom: none; }

.cs-foot-cicon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(169, 130, 90, .14);
    color: var(--csf-gold-light);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cs-foot-cbody {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-foot-cbody small {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #7C8899;
}

.cs-foot-cbody a {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    text-decoration: none;
    word-break: break-word;
    transition: color .2s ease;
}

.cs-foot-cbody a:hover {
    color: var(--csf-gold-light);
}

.cs-foot-caddr {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: #fff;
}

.cs-foot-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background-color: var(--csf-gold);
    color: var(--csf-navy);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    text-decoration: none;
    transition: background-color .22s ease, color .22s ease, transform .18s ease;
}

.cs-foot-cta:hover {
    background-color: #fff;
    color: var(--csf-navy);
    transform: translateY(-2px);
}

/* ============================================================
   Bottom bar
   ============================================================ */
.cs-foot-bottom {
    background-color: var(--csf-navy-deep);
    border-top: 1px solid var(--csf-line);
}

.cs-foot-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 0;
}

.cs-foot-copy {
    margin: 0;
    font-size: 12.5px;
    color: #8B96A6;
}

.cs-foot-legal {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-foot-legal a {
    font-size: 12.5px;
    color: #8B96A6;
    text-decoration: none;
    transition: color .2s ease;
}

.cs-foot-legal a:hover {
    color: var(--csf-gold-light);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199.98px) {
    .cs-foot-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 34px;
    }

    /* Contact drops to its own full-width row rather than being squeezed */
    .cs-foot-col--contact {
        grid-column: 1 / -1;
        padding-top: 30px;
        border-top: 1px solid var(--csf-line);
    }

    .cs-foot-col--contact .cs-foot-contact {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 30px;
    }

    .cs-foot-col--contact .cs-foot-contact li {
        border-bottom: none;
        padding-top: 0;
    }
}

@media (max-width: 991.98px) {
    .cs-foot-main {
        padding: 42px 0 36px;
    }

    .cs-foot-services {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-foot-services li {
        padding: 16px 18px;
    }

    .cs-foot-services li:nth-child(2n) {
        border-right: none;
        padding-right: 0;
    }

    .cs-foot-services li:nth-child(2n + 1) {
        padding-left: 0;
    }

    .cs-foot-services li:nth-child(-n + 2) {
        border-bottom: 1px solid var(--csf-line);
    }

    .cs-foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .cs-foot-col--brand {
        grid-column: 1 / -1;
    }

    .cs-foot-about {
        max-width: none;
    }
}

/* ============================================================
   Mobile: collapse the footer instead of stacking it
   ------------------------------------------------------------
   Stacked, the footer ran to roughly four screens: a 4-row service
   strip, then 14 links each on their own line, then contact, then the
   bottom bar. The link columns now sit behind their headings.
   ============================================================ */
@media (max-width: 767.98px) {
    .cs-foot-main {
        padding: 26px 0 22px;
    }

    /* Service strip: compact 2x2 instead of four full-width rows */
    .cs-foot-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .cs-foot-services li {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding: 14px 12px;
        border-right: 1px solid var(--csf-line);
        border-bottom: 1px solid var(--csf-line);
    }

    .cs-foot-services li:nth-child(2n) {
        border-right: none;
        padding-right: 0;
    }

    .cs-foot-services li:nth-child(2n + 1) {
        padding-left: 0;
    }

    .cs-foot-services li:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .cs-foot-services i {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 14px;
    }

    .cs-foot-services span { font-size: 11px; }
    .cs-foot-services strong { font-size: 12.5px; }

    /* --- Brand --- */
    .cs-foot-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cs-foot-logo {
        margin-bottom: 12px;
    }

    .cs-foot-logo img { height: 46px; }

    .cs-foot-about {
        margin-bottom: 16px;
        font-size: 13px;
        line-height: 1.7;
        -webkit-line-clamp: 3;
        max-width: none;
    }

    .cs-foot-social {
        gap: 8px;
        padding-bottom: 20px;
    }

    .cs-foot-social a {
        width: 36px;
        height: 36px;
    }

    /* --- Collapsible link sections --- */
    .cs-foot-col--acc {
        border-top: 1px solid var(--csf-line);
    }

    .cs-foot-col--acc.is-acc .cs-foot-title {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 16px 34px 16px 0;
        font-size: 15.5px;
        cursor: pointer;
        user-select: none;
    }

    /* The gold underline belongs to the desktop heading, not a row */
    .cs-foot-col--acc.is-acc .cs-foot-title::after {
        left: auto;
        right: 4px;
        top: 50%;
        bottom: auto;
        width: 9px;
        height: 9px;
        margin-top: -6px;
        border-radius: 0;
        border-right: 2px solid var(--csf-gold);
        border-bottom: 2px solid var(--csf-gold);
        background: none;
        transform: rotate(45deg);
        transition: transform .25s ease;
    }

    .cs-foot-col--acc.is-acc.is-open .cs-foot-title::after {
        transform: rotate(-135deg);
        margin-top: -2px;
    }

    .cs-foot-accbody {
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .cs-foot-col--acc.is-acc .cs-foot-links {
        padding-bottom: 14px;
    }

    /* Two columns of links once open — they are short labels */
    .cs-foot-col--acc.is-acc .cs-foot-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
    }

    .cs-foot-col--acc.is-acc .cs-foot-links li + li {
        margin-top: 0;
    }

    .cs-foot-links a {
        font-size: 13px;
    }

    /* No hover on touch, so drop the slide-and-chevron */
    .cs-foot-links a:hover {
        padding-left: 0;
    }

    .cs-foot-links a::before {
        display: none;
    }

    /* --- Contact --- */
    .cs-foot-col--contact {
        padding-top: 0;
        border-top: 1px solid var(--csf-line);
    }

    .cs-foot-col--contact .cs-foot-title {
        margin: 0;
        padding: 16px 0 12px;
        font-size: 15.5px;
    }

    .cs-foot-col--contact .cs-foot-contact {
        display: block;
        margin-bottom: 16px;
    }

    .cs-foot-col--contact .cs-foot-contact li {
        gap: 11px;
        padding: 10px 0;
        border-bottom: 1px solid var(--csf-line);
    }

    .cs-foot-col--contact .cs-foot-contact li:last-child {
        border-bottom: none;
    }

    .cs-foot-cicon {
        width: 32px;
        height: 32px;
        font-size: 12.5px;
    }

    .cs-foot-cbody small { font-size: 10px; }
    .cs-foot-cbody a { font-size: 14px; }

    /* Addresses in the data can repeat the city ("Dhaka, Dhaka, 1217").
       Two lines is plenty; the full string is still in the title. */
    .cs-foot-caddr {
        font-size: 12.5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cs-foot-cta {
        height: 42px;
        padding: 0 18px;
        font-size: 12.5px;
    }

    /* --- Bottom bar --- */
    .cs-foot-bottom-inner {
        flex-direction: column;
        gap: 9px;
        padding: 14px 0;
        text-align: center;
    }

    .cs-foot-copy { font-size: 11.5px; }

    .cs-foot-legal { gap: 18px; }

    .cs-foot-legal a { font-size: 11.5px; }
}

/* 390px (iPhone 12/13/14) still fits two link columns comfortably, so this
   only kicks in on genuinely narrow devices. */
@media (max-width: 359px) {
    /* Very narrow: one link per row reads better than two cramped ones */
    .cs-foot-col--acc.is-acc .cs-foot-links {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .cs-foot-services li {
        padding: 12px 8px;
    }
}

/* The mobile bottom nav is fixed over the page, so the last thing in the
   footer needs clearance or it sits underneath it. Product pages stack the
   sticky buy bar on top of that nav, which is why the copyright line was
   still covered there — :has() lets us reserve the extra height only on
   pages that actually have the bar. */
@media (max-width: 767.98px) {
    .cs-foot-bottom {
        padding-bottom: 66px;
    }

    body:has(.cs-pd-stickybuy) .cs-foot-bottom {
        padding-bottom: 124px;
    }
}

/* ============================================================
   Accessibility
   ============================================================ */
.cs-footer a:focus-visible {
    outline: 2px solid var(--csf-gold);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .cs-foot-social a,
    .cs-foot-links a,
    .cs-foot-links a::before,
    .cs-foot-cta {
        transition: none;
    }

    .cs-foot-social a:hover,
    .cs-foot-cta:hover {
        transform: none;
    }
}