/* ==========================================================================
   Storefront theme - blue
   Loaded after custom.css, so every rule here intentionally wins.
   Only visual: no class in this file may be renamed, they are JS hooks.
   ========================================================================== */

:root {
    --brand-blue:       #2874F0;
    --brand-blue-dark:  #1B5FCC;
    --brand-blue-deep:  #172337;
    --brand-yellow:     #FFE11B;
    --brand-green:      #388E3C;
    --brand-orange:     #FF9F00;
    --brand-red:        #FF6161;

    --ink-1: #212121;
    --ink-2: #878787;
    --ink-3: #C2C2C2;

    --surface:      #FFFFFF;
    --surface-alt:  #F1F3F6;
    --surface-tint: #E8F0FE;
    --hairline:     #E0E0E0;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 20px;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .08);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .10);
}

body {
    background: var(--surface-alt);
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    color: var(--ink-1);
}

/* --------------------------------------------------------------------------
   Header shell
   -------------------------------------------------------------------------- */

._2dxSCm,
._3CzzrP,
._38U37R {
    background: transparent;
}

._1FWdmb {
    background: var(--brand-blue);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-title {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    margin: 0;
}

.header-menu {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1;
}

.brand-mark__logo {
    display: block;
    width: 118px;
    height: auto;
    object-fit: contain;
}

.brand-mark__name {
    font-size: 19px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -.3px;
    color: var(--brand-blue);
}

.brand-mark__tag {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-style: italic;
    color: var(--ink-2);
    margin-top: 2px;
}

.brand-mark__tag b {
    color: var(--brand-orange);
    font-weight: 500;
}

.brand-mark--on-blue .brand-mark__name {
    color: #fff;
}

.brand-mark--on-blue .brand-mark__tag {
    color: rgba(255, 255, 255, .85);
}

.brand-mark__glyph {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: var(--brand-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-style: italic;
    font-size: 14px;
    color: var(--brand-blue);
}

/* --------------------------------------------------------------------------
   Store / secondary tab row
   -------------------------------------------------------------------------- */

.store-switch {
    background: linear-gradient(180deg, #D9E8FF 0%, #EFF5FF 60%, #F1F3F6 100%);
    padding: 10px 12px 0;
    display: flex;
    gap: 10px;
}

.store-switch__tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    text-decoration: none;
    min-height: 46px;
}

.store-switch__tab.is-active {
    background: var(--brand-yellow);
}

.store-switch__label {
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: var(--ink-1);
    line-height: 1;
}

.store-switch__tab.is-active .store-switch__label {
    color: var(--brand-blue-deep);
}

.store-switch__row {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --------------------------------------------------------------------------
   Delivery location strip
   -------------------------------------------------------------------------- */

.locator {
    background: #EFF5FF;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-1);
}

.locator__link {
    color: var(--brand-blue);
    font-weight: 600;
    text-decoration: none;
}

.locator__link:hover {
    color: var(--brand-blue-dark);
}

/* --------------------------------------------------------------------------
   Search bar

   The inherited markup nests five wrappers, three of which fight the layout:
   ._2d36Hu caps the width at 90% and adds vertical padding, .search-div pins
   the height to 40px, and .dsLogY carries a purple caret. Each override below
   matches or beats the original selector, so the field can size itself.
   -------------------------------------------------------------------------- */

.search-bar {
    background: #EFF5FF;
    padding: 0 16px 14px;

}

.search-bar ._3QNhdh {
    display: block;
    width: 100%;
    padding: 0;
    overflow: visible;
    white-space: normal;

}

.search-bar .ORogdv,
.search-bar ._1k9EoO {
    width: 100%;
}

.search-bar ._3QNhdh .ORogdv ._1k9EoO ._2d36Hu {
    width: 100%;
    padding: 0;
}

.search-bar ._2d36Hu .search-div {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
}

/* The field itself */
.search-bar .sc-eeMvmM,
.search-bar .fscVpr {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: var(--surface);
    border: 1px solid #C5DAF8;
    border-radius: var(--radius-md);
    box-shadow: none;
}

/* Icon slot: drop the inherited grey glass, draw a blue outline one. */
.search-bar .sc-cUEOzv,
.search-bar .ilUiic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
}

.search-bar .sc-cUEOzv svg,
.search-bar .ilUiic svg {
    display: none;
}

.search-bar .sc-cUEOzv::before,
.search-bar .ilUiic::before {
    content: "";
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232874F0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4.6 4.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.search-bar .search-input-elm {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    color: var(--ink-1);
    caret-color: var(--brand-blue);
    cursor: pointer;
}

.search-bar .search-input-elm::placeholder {
    color: #5F6672;
    font-size: 16px;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Category strip
   -------------------------------------------------------------------------- */

.cat-strip {
    background: var(--surface);
    display: flex;
    gap: 0;
    padding: 2px 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.cat-strip::-webkit-scrollbar {
    display: none;
}

.cat-strip__item {
    position: relative;
    flex: 0 0 auto;
    width: 71px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: 6px 2px 8px;
    text-decoration: none;
}

.cat-strip__icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.cat-strip__icon svg {
    position: relative;
    width: 32px;
    height: 32px;
    display: block;
}

.cat-strip__label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 400;
    color: var(--ink-1);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Active: soft blue wash behind the glyph plus a rail under the column. */
.cat-strip__item.is-active .cat-strip__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #BAE1FF 0%, #FFFFFF 100%);
}

.cat-strip__item.is-active .cat-strip__label {
    font-weight: 700;
}

.cat-strip__item.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: #1162F2;
}


/* --------------------------------------------------------------------------
   Trust badge - replaces the old supplier mark on product cards
   -------------------------------------------------------------------------- */

.assured-pill {
    display: inline-block;
    width: 55px;
    height: 20px;
    background-image: url("../images/ass.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

.assured-pill__tick,
.assured-pill__text {
    display: none !important;
}
/* --------------------------------------------------------------------------
   Product card / pricing
   -------------------------------------------------------------------------- */

.product-card {
    background: var(--surface);
    border-radius: var(--radius-sm);
}

.product-price .sell-price,
.selling-price {
    color: var(--ink-1);
    font-weight: 600;
}

.product-price .mrp-price,
.mrp,
.strike {
    color: var(--ink-2);
    font-weight: 400;
}

.product-price .off-percentage,
.discount {
    color: var(--brand-green);
    font-weight: 600;
}

.free-delivery {
    color: var(--ink-2);
    font-size: 11px;
}

.offer-badge {
    background: var(--brand-blue);
    color: #fff;
}

/* Rating chip */
.NewProductCardstyled__RatingSection-sc-6y2tys-9 span[color="#ffffff"] {
    color: #fff;
}

.sc-fbYMXx {
    background: var(--brand-green);
    border-radius: 3px;
    padding: 1px 4px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.common-button,
.buynow-button,
.btn-continue,
.product-page-buy {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.common-button:hover,
.buynow-button:hover,
.btn-continue:hover {
    background: #F08800;
    border-color: #F08800;
    color: #fff;
}

.add_cart {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
}

.buy_now {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

.buynow-button-white {
    background: var(--surface);
    border: 1px solid var(--brand-blue);
    color: var(--brand-blue);
}

/* Selected swatches */
.color-item.active,
.storage-item.active,
.size-list li.active {
    border-color: var(--brand-blue) !important;
    box-shadow: 1px 1px 4px 0 rgba(40, 116, 240, .25);
}

/* --------------------------------------------------------------------------
   Sticky action bar
   -------------------------------------------------------------------------- */

.action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    background: var(--surface);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
}

.action-bar__btn {
    flex: 1;
    border: 0;
    padding: 15px 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}

.action-bar__btn--cart {
    background: var(--surface);
    color: var(--ink-1);
    border-top: 1px solid var(--hairline);
}

.action-bar__btn--buy {
    background: var(--brand-orange);
    color: #fff;
}

.action-bar__spacer {
    height: 62px;
}

/* --------------------------------------------------------------------------
   Cart
   -------------------------------------------------------------------------- */

.cart__footer {
    background: var(--surface);
    border-top: 1px solid var(--hairline);
}

.cartTotalAmount {
    color: var(--ink-1);
    font-weight: 700;
}

.header__cart-count--floating {
    background: var(--brand-orange);
    color: #fff;
}

/* Safety panel */
.safety-panel {
    background: var(--surface-tint);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    margin: 12px 0;
}

.safety-panel__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-blue);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

.safety-panel__badge span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--brand-yellow);
    color: var(--brand-blue);
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.safety-panel__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-blue-deep);
    margin: 0 0 6px;
}

.safety-panel__copy {
    font-size: 13px;
    color: #3A4A64;
    margin: 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Loader + misc recolour
   -------------------------------------------------------------------------- */

.Loaderstyled__StyledLightTrack-sc-w4grmz-1 {
    stroke: var(--surface-tint);
}

.Loaderstyled__StyledDarkTrack-sc-w4grmz-2 {
    stroke: var(--brand-blue);
}

.dod-div,
.btn-sale-is-live {
    background: var(--brand-blue);
    color: #fff;
}

.offer-timer {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.delivery-txt {
    color: var(--brand-green);
}

.form-check-input:checked {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

a {
    color: var(--brand-blue);
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.trust-strip {
    display: flex;
    background: #FFF7E6;
    padding: 14px 8px;
    margin-bottom: 8px;
}

.trust-strip__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.trust-strip__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trust-strip__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-blue-deep);
    line-height: 1.25;
}

/* Sticky bar wins over the older button colours */
.action-bar .action-bar__btn--cart.add_cart {
    background: var(--surface);
    border: 0;
    border-top: 1px solid var(--hairline);
    color: var(--ink-1);
}

.action-bar .action-bar__btn--buy.buy_now {
    background: var(--brand-orange);
    border: 0;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Bottom nav cart
   The cart moved out of the blue header into the nav bar, so its count
   bubble anchors to this tile instead.
   -------------------------------------------------------------------------- */

.navbar-cart {
    position: relative;
    cursor: pointer;
}

.navbar-cart .header__cart-count--floating {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--brand-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
/* Exact Flipkart Assured image override */
.assured-pill {
    display: inline-block !important;
    width: 55px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: url("/assets/website/images/ass.png") center center / contain no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.assured-pill__tick,
.assured-pill__text {
    display: none !important;
    visibility: hidden !important;
}