:root {
  /* Polligram Brand Colors */
  --polligram-navy: #10234B;
  --polligram-red: #DE1213;
  --polligram-gold: #C7A058;
  --polligram-ivory: #FAF7F0;
  --polligram-white: #FFFFFF;
  --polligram-border: #E5E1D8;

  --button-main: var(--polligram-gold) !important;
}

.sh-product-card {
  border: 1px solid var(--polligram-border) !important;
  border-radius: 8px !important;
}

.sh-product-card:hover {
  box-shadow: 0 3px 10px rgb(16 35 75 / 0.18);
}

.sh-product-card-discount-tag {
  font-weight: 400 !important;
  border-radius: 8px 0 8px 0 !important;
  right: auto !important;
  top: 0 !important;
  left: 0 !important;
  background-color: var(--polligram-red) !important;
  color: var(--polligram-white) !important;
}

.sh-product-discount-tag {
  font-weight: 400 !important;
  border-radius: 4px !important;
  background-color: var(--polligram-red) !important;
  color: var(--polligram-white) !important;
}

.sh-product-plus-minus-button {
  border-radius: 4px !important;
}

.sh-solid-button {
  border-radius: 4px;
  background-color: var(--polligram-gold) !important;
  border: 1px solid var(--polligram-gold) !important;
  color: var(--polligram-white) !important;
}

.sh-category-card > a > div {
  padding: 6px !important;
  border: 1px solid var(--polligram-border) !important;
  border-radius: 8px !important;
}

.sh-category-card > a > div:hover {
  border: 1px solid var(--polligram-gold) !important;
  box-shadow: 0 3px 10px rgb(16 35 75 / 0.18);
}

/* Polligram category backgrounds */
.sh-category-card:nth-child(3n-2) > a > div {
  background-color: #F4F1E8 !important;
}

.sh-category-card:nth-child(3n-1) > a > div {
  background-color: #FBF4E8 !important;
}

.sh-category-card:nth-child(3n) > a > div {
  background-color: #FCECEC !important;
}

.sh-category-card > a > div > p {
  line-height: 24px;
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 48px;
  color: var(--polligram-navy) !important;
}

@media only screen and (max-width: 600px) {
  .sh-category-card > a > div > p {
    line-height: 20px;
    font-size: 14px;
    min-height: 40px;
  }
}

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

.pr-long-card {
  padding: 0;
}

.pr-card-content {
  padding: 4px 8px;
}

.sh-header-search-box {
  background-color: var(--polligram-ivory) !important;
  border-radius: 8px !important;
  border: 1px solid var(--polligram-border) !important;
}

.section-heading::after {
  background: none !important;
}

.sh-product-card-name {
  font-weight: 600 !important;
  color: var(--polligram-navy) !important;
}

.sh-product-card-price {
  color: var(--polligram-navy) !important;
  font-weight: 600 !important;
}

.pr-outlined-button {
  border-color: var(--polligram-gold) !important;
  color: var(--polligram-navy) !important;
}

.pr-outlined-button:hover {
  background-color: var(--polligram-gold) !important;
  color: var(--polligram-white) !important;
}

.pr-card-action-enquiry {
  border: 1px solid var(--polligram-gold) !important;
}

.whatsapp-enq-button-icon {
  fill: var(--polligram-gold) !important;
}

.section-heading {
  color: var(--polligram-navy) !important;
}

.section-heading-viewall {
  color: var(--polligram-red) !important;
}

.sh-product-card {
  border: none !important;
}

.footer-row-title {
  color: var(--polligram-white) !important;
}

.sh-footer-icon {
  display: none !important;
}

/* Discount / offer badges */
.sh-product-card-discount-tag {
  background-color: var(--polligram-red) !important;
  color: var(--polligram-white) !important;
}

/* Desktop category layout */
@media screen and (min-width: 560px) {
  #categories > div > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .sh-category-card {
    flex: 0 1 189px;
    max-width: 189px;
  }
}

.solid-button__disabled_btn {
  color: var(--polligram-white) !important;
}

/* Mobile bottom navigation */
.bottom-nav__app__bar {
  background: var(--polligram-navy) !important;
}

.sh-bottom-nav-unselected {
  color: var(--polligram-white) !important;
  stroke: var(--polligram-white) !important;
}

/* Additional Polligram branding */
.sh-header,
.header {
  color: var(--polligram-navy);
}

a:hover {
  color: var(--polligram-red);
}

button:focus,
a:focus {
  outline-color: var(--polligram-gold);
}
