/* =========================================================
   HIPERMART — COMPLETE BRAND STYLESHEET
   ========================================================= */

:root {
  --hm-yellow: #FDBD10;

  --hm-blue: #0066C2;
  --hm-blue-dark: #0052A3;

  --hm-black: #111111;
  --hm-text: #1A1A1A;

  --hm-white: #FFFFFF;

  --hm-gray: #6B7280;
  --hm-gray-light: #E5E7EB;
  --hm-gray-bg: #F7F7F7;

  --hm-red: #FF0000;
}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

body,
button,
input,
select,
textarea {
  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.sh-row-title,
.section-title {
  font-weight: 800;
  letter-spacing: -0.25px;
}

button {
  font-weight: 700;
}


/* =========================================================
   HEADER
   ========================================================= */

.sh-header-main {
  background-color:
    var(--hm-yellow) !important;

  color:
    var(--hm-black);

  font-size:
    20px;

  box-shadow:
    rgb(224 168 10 / 0.28)
    0 1px 0;
}


/* =========================================================
   HEADER ICONS
   ========================================================= */

.sh-header-location-icon {
  fill:
    var(--hm-blue) !important;
}

.sh-header-account-icon {
  stroke:
    var(--hm-blue) !important;
}

.sh-header-cart-icon {
  stroke:
    var(--hm-blue) !important;

  fill:
    none !important;
}

.sh-header-arrow-icon {
  fill:
    var(--hm-blue) !important;
}

.sh-header-search-icon {
  stroke:
    var(--hm-blue) !important;
}

.sh-header-mob-menu-icon {
  color:
    var(--hm-blue) !important;
}


/* =========================================================
   HEADER CART BADGE
   ========================================================= */

.sh-header-cart-badge {
  background-color:
    var(--hm-blue);

  color:
    var(--hm-white);
}


/* =========================================================
   SEARCH
   ========================================================= */

/*
   IMPORTANT:
   Search field/container styling intentionally NOT overridden.

   This preserves the platform's original search design
   and fixes the previous search-field issue.
*/


/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.sh-product-card {
  background:
    var(--hm-white);

  border:
    1px solid #E8E8E8;

  border-radius:
    8px;

  box-shadow:
    0 2px 7px
    rgb(0 0 0 / 0.08);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


/* Slightly stronger only on desktop hover */

@media (hover:hover) and (pointer:fine) {

  .sh-product-card:hover {
    transform:
      translateY(-2px);

    box-shadow:
      0 4px 10px
      rgb(0 0 0 / 0.12);
  }

}


/* =========================================================
   PRODUCT NAME / PRICE / MRP
   ========================================================= */

.sh-product-card-name {
  color:
    var(--hm-text);
}


.sh-product-card-price {
  color:
    var(--hm-blue);

  font-weight:
    800;
}


.sh-product-card-mrp {
  color:
    #666666;
}


/* =========================================================
   DISCOUNT TAG
   KEEP RED STYLE
   ========================================================= */

.sh-product-card-discount-tag,
.sh-product-discount-tag {
  position:
    absolute;

  top:
    0;

  left:
    0;

  background-color:
    rgba(255, 0, 0, 0.5);

  color:
    #FFFFFF;

  border-radius:
    8px 0 8px 0;

  padding:
    4px 10px;

  font-size:
    14px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.5px;

  width:
    50%;

  text-align:
    center;

  z-index:
    5;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.sh-product-discount-tag {
  border-radius:
    4px;
}


.sh-product-card-discount-tag span,
.sh-product-discount-tag span {
  display:
    inline-block;

  color:
    #FFFFFF;

  white-space:
    nowrap;

  animation:
    discountTextSlide
    10s
    infinite
    ease-in-out;
}


/* =========================================================
   PRODUCT PLUS / MINUS
   YELLOW + BLACK
   ========================================================= */

.sh-product-plus-minus-button {
  background-color:
    var(--hm-yellow);

  color:
    var(--hm-black);

  fill:
    var(--hm-black);

  border:
    1px solid var(--hm-yellow);

  border-radius:
    6px;

  font-weight:
    700;

  box-shadow:
    none;

  transition:
    background-color .18s ease,
    transform .18s ease;
}


.sh-product-plus-minus-button:hover {
  background-color:
    #FFCA24;

  border-color:
    #FFCA24;

  color:
    var(--hm-black);

  transform:
    translateY(-1px);
}


.sh-product-plus-minus-button:active {
  background-color:
    #E5AB00;

  border-color:
    #E5AB00;

  color:
    var(--hm-black);

  transform:
    scale(.98);
}


.sh-product-plus-minus-button:disabled {
  background-color:
    #F3D878;

  border-color:
    #F3D878;

  color:
    #777777;

  opacity:
    .65;

  cursor:
    not-allowed;

  box-shadow:
    none;
}


/* =========================================================
   PRODUCT ENQUIRY BUTTONS
   ========================================================= */

.sh-product-card-enquiry,
.sh-product-enquiry {
  border:
    1px solid
    var(--hm-blue) !important;

  color:
    var(--hm-blue) !important;

  background:
    var(--hm-white) !important;

  border-radius:
    6px;
}


/* =========================================================
   SOLID / PRIMARY BUTTONS
   ========================================================= */

.sh-solid-button {
  border-radius:
    6px;

  border:
    1px solid
    var(--hm-blue) !important;

  background-color:
    var(--hm-blue);

  color:
    var(--hm-white);

  transition:
    background-color .18s ease,
    transform .18s ease;
}


.sh-solid-button:hover {
  background-color:
    var(--hm-blue-dark) !important;

  color:
    var(--hm-white) !important;
}


.sh-solid-button:active {
  transform:
    scale(.98);
}


/* =========================================================
   BUY NOW
   ========================================================= */

.sh-product-buy-now-button {
  color:
    var(--hm-white);

  border:
    1px solid
    var(--hm-blue);

  outline:
    none !important;

  padding:
    12px;

  background:
    var(--hm-blue);

  border-radius:
    6px;

  white-space:
    nowrap;
}


.sh-product-buy-now-button:hover {
  background:
    var(--hm-blue-dark);
}


/* =========================================================
   OUTLINED BUTTONS
   ========================================================= */

.sh-outlined-button {
  border-radius:
    6px;
}


/* =========================================================
   WISHLIST
   KEEP RED
   ========================================================= */

.sh-product-wishlist-desktop {
  border-color:
    var(--hm-red) !important;
}


.sh-product-wishlisted-icon {
  fill:
    var(--hm-red) !important;
}


.sh-product-not-wishlisted-icon {
  stroke:
    var(--hm-red) !important;
}


/* =========================================================
   SHARE
   ========================================================= */

.sh-product-share-icon {
  stroke:
    var(--hm-blue) !important;
}


.sh-product-social-button {
  background-color:
    var(--hm-blue);

  fill:
    var(--hm-blue);
}


/* =========================================================
   BOTTOM NAVIGATION
   WHITE BACKGROUND
   ========================================================= */

.sh-bottom-nav-main {
  background-color:
    var(--hm-white) !important;

  border-top:
    1px solid #EEEEEE;

  box-shadow:
    0 -2px 8px
    rgb(0 0 0 / 0.05);
}


/* Selected */

.sh-bottom-nav-selected {
  stroke:
    var(--hm-blue) !important;

  color:
    var(--hm-blue) !important;

  fill:
    none !important;
}


/* Unselected */

.sh-bottom-nav-unselected {
  stroke:
    #8B8B8B !important;

  color:
    #8B8B8B !important;
}


/* Bottom cart badge */

.sh-bottom-nav-cart-badge {
  background-color:
    var(--hm-yellow) !important;

  color:
    var(--hm-blue-dark) !important;

  font-weight:
    800;
}


/* =========================================================
   CATEGORY CARDS
   ========================================================= */

.sh-category-card {
  margin:
    0 10px 10px;

  padding-top:
    8px;

  border-radius:
    8px;
}


/* =========================================================
   CATEGORY IMAGES
   ========================================================= */

.cat-card-img {
  border:
    none !important;

  object-fit:
    cover;

  border-radius:
    0 !important;
}


@media screen and
(max-width:600px) {

  .cat-card-img {
    border:
      none !important;

    object-fit:
      cover;

    border-radius:
      0 !important;
  }


  .cat-card-letter-container {
    border:
      0 !important;

    border-radius:
      0 !important;

    background:
      transparent !important;
  }

}


/* =========================================================
   CATEGORY CONTAINER
   ========================================================= */

.sh-categories-container {
  background-color:
    var(--hm-white);
}


/* =========================================================
   CATEGORY SCROLLER
   ========================================================= */

#cat-scroll-scroller {
  justify-content:
    center;
}


/* =========================================================
   ROW TITLES
   ========================================================= */

.sh-row-title-divider {
  display:
    none !important;
}


.sh-row-title,
.sh-row-title h2,
.sh-row-title h3,
.sh-section-title,
.section-title {
  color:
    var(--hm-blue);

  font-weight:
    800;

  letter-spacing:
    -0.25px;
}


/* =========================================================
   PRODUCT IMAGE HANDLING
   KEEP ORIGINAL
   ========================================================= */

.pr-long-col-media {
  object-fit:
    contain;
}


/* =========================================================
   SOCIAL ICONS
   ========================================================= */

#sh-social-icon-whatsapp > svg,
#sh-social-icon-facebook > svg,
#sh-social-icon-instagram > svg,
#sh-social-icon-twitter > svg {
  display:
    none;
}


/* WhatsApp */

#sh-social-icon-whatsapp {
  background:
    transparent;

  border-radius:
    50%;

  background-image:
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/767px-WhatsApp.svg.png");

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    contain;
}


/* Facebook */

#sh-social-icon-facebook {
  background:
    transparent;

  border-radius:
    50%;

  background-image:
    url("https://cdn0.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-facebook-2019-circle-512.png");

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    contain;
}


/* Instagram */

#sh-social-icon-instagram {
  background:
    transparent;

  border-radius:
    50%;

  background-image:
    url("https://toppng.com/uploads/preview/instagram-logo-circle-11549679754rhbcorxntv.png");

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    contain;
}


/* X / Twitter */

#sh-social-icon-twitter {
  background:
    #000000;

  border-radius:
    50%;
}


/* =========================================================
   FOOTER
   BLACK
   ========================================================= */

.sh-footer-main {
  background-color:
    #000000 !important;

  color:
    #FFFFFF !important;
}


.sh-footer-main a {
  color:
    #FFFFFF;
}


.sh-footer-icon {
  color:
    #FFFFFF !important;
}


/* =========================================================
   APP STORE / PLAY STORE BADGES
   MATCHED SIZE
   ========================================================= */

.sh-footer-main img[src*="play"],
.sh-footer-main img[src*="google"],
.sh-footer-main img[src*="app-store"],
.sh-footer-main img[src*="appstore"],
.sh-footer-main img[alt*="Google"],
.sh-footer-main img[alt*="Play"],
.sh-footer-main img[alt*="Apple"],
.sh-footer-main img[alt*="App Store"] {
  width:
    145px !important;

  height:
    44px !important;

  object-fit:
    contain;

  display:
    block;
}


/* =========================================================
   COMMON INTERACTION
   ========================================================= */

button,
.sh-solid-button,
.sh-product-buy-now-button,
.sh-product-plus-minus-button {
  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
  text-decoration:
    none;
}


/* =========================================================
   FOCUS
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline:
    2px solid
    var(--hm-blue);

  outline-offset:
    2px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and
(max-width:600px) {

  .sh-header-main {
    background:
      var(--hm-yellow) !important;
  }


  .sh-bottom-nav-main {
    background:
      var(--hm-white) !important;
  }


  .sh-product-card {
    border-radius:
      8px;

    box-shadow:
      0 2px 6px
      rgb(0 0 0 / 0.07);
  }


  .sh-product-plus-minus-button {
    color:
      var(--hm-black);
  }


  .sh-row-title,
  .sh-row-title h2,
  .sh-row-title h3,
  .section-title {
    color:
      var(--hm-blue);
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

  .sh-product-card,
  .sh-product-plus-minus-button,
  .sh-solid-button,
  .sh-product-buy-now-button {
    transition:
      none !important;
  }

}