@font-face {
  font-family: "SauceTomato-Regular";
  src: url("../fonts/Sauce Tomato.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

.product-wrapper {
  width: 100%;
  max-width: 100%;
  display: block;
  background: #ffffff;
}

.product-list,
.product-list * {
  box-sizing: border-box;
}
.product-list {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: var(--bg, linear-gradient(to left, #ffffff, #ffffff));
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  overflow-x: hidden;
}
.frame-5471 {
  background: #ffffff;
  padding: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.nav-bar {
  background: var(--secondary-colour, #ef4136);
  border-radius: 16px;
  padding: 15px 30px 15px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex: 1;
  position: relative;
}
.union {
  flex-shrink: 0;
  width: 123px;
  height: 65px;
  position: relative;
  overflow: visible;
}
.frame-5470 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.features-tab {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.home {
  color: var(--main-colour, #ffffff);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 18px;
  font-weight: 500;
  position: relative;
}
.about-us {
  color: var(--main-colour, #ffffff);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 18px;
  font-weight: 500;
  position: relative;
}
.our-products {
  color: var(--main-colour, #ffffff);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 18px;
  font-weight: 500;
  position: relative;
}
.deal-with-us {
  color: var(--main-colour, #ffffff);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 18px;
  font-weight: 500;
  position: relative;
}
.cart-button {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 134px;
  position: relative;
}
.component-2-primary-button {
  background: var(--primary-colour, #009848);
  border-radius: 37px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1.4px;
  padding: 12px 39px 12px 39px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 48px;
  position: relative;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.25);
}
.mdi-cart-outline {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-5484 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;
  position: relative;
  overflow: visible;
}
.frame-5477 {
  border-radius: 16px;
  padding: 55.4px 50.36px 55.4px 50.36px;
  display: flex;
  flex-direction: column;
  gap: 55.4px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.frame-5475 {
  display: flex;
  flex-direction: column;
  gap: 30.22px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
}
.products-category {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 42px;
  line-height: 66.73px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.at-gujjubens-we-specialize-in-authentic-gujarati-snacks-that-are-perfect-for-every-occasion-from-daily-snacking-to-festive-treats {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 24px;
  line-height: 35.25px;
  font-weight: 500;
  position: relative;
  width: 100%;
  max-width: 100%;
  display: block;
}
.frame-5498 {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 55px;
  overflow: visible;
}
.frame-23 {
  display: flex;
  flex-direction: row;
  gap: 41.56px;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  min-height: 465.5px;
  position: relative;
}
.rectangle-22 {
  border-radius: 16.63px;
  width: 50%;
  max-width: 600px;
  height: 465px;
  flex-shrink: 0;
  position: relative;
  object-fit: cover;
}
.frame-21 {
  display: flex;
  flex-direction: column;
  gap: 24.94px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex: 1;
  position: relative;
  height: auto;
}
.khakhra {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 68.1624984741211px;
  line-height: 73.98px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.frame-5434 {
  display: flex;
  flex-direction: column;
  gap: 16.63px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.about-our-product {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "InterTight-SemiBold", sans-serif;
  font-size: 19.94999885559082px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
}
.prepared-under-hygienic-conditions-and-packed-to-retain-freshness-khakhra-combines-authentic-taste-nutrition-and-convenience-its-long-shelf-life-and-ready-to-eat-nature-make-it-an-ideal-choice-for-people-seeking-a-healthy-tasty-and-fast-snack-without-compromising-on-quality-or-tradition {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "InterTight-Regular", sans-serif;
  font-size: 18.287500381469727px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.button-main {
  flex-shrink: 0;
  width: 144px;
  height: 48px;
  position: relative;
}
.frame-1 {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9.14px;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 0;
  top: 0;
}
.component-2-primary-button2 {
  background: var(--primary-colour, #009848);
  border-radius: 37px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1.4px;
  padding: 12px 39px 12px 39px;
  display: flex;
  flex-direction: row;
  gap: 9.14px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 48px;
  position: relative;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}
.component-2-primary-button2:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.button {
  color: var(--main-colour, #ffffff);
  text-align: center;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  white-space: nowrap;
}
.frame-54772 {
  display: flex;
  flex-direction: row;
  gap: 41.56px;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  min-height: 465.5px;
  position: relative;
}
.dry-bhakhri {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 68.1624984741211px;
  line-height: 73.98px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.frame-5478 {
  display: flex;
  flex-direction: row;
  gap: 41.56px;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  min-height: 465.5px;
  position: relative;
}
.coin-khakhra {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 68.1624984741211px;
  line-height: 73.98px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.frame-5490 {
  padding: 0px 0px 89px 0px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-5358 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
}
.frame-5353 {
  display: flex;
  flex-direction: column;
  gap: 7.29px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-5326 {
  padding: 0px 7.29px 0px 7.29px;
  display: flex;
  flex-direction: column;
  gap: 7.29px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-5278 {
  border-radius: 10.94px;
  border-width: 1.09px;
  border-style: solid;
  border-image: linear-gradient(
    99.07deg,
    rgba(239, 65, 54, 1) 99.98999834060669%,
    rgba(239, 65, 54, 0) 100%
  );
  border-image-slice: 1;
  padding: 72.92px 109.38px 72.92px 109.38px;
  display: flex;
  flex-direction: row;
  gap: 51.04px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
}
.frame-212 {
  display: flex;
  flex-direction: column;
  gap: 14.58px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.frame-232 {
  display: flex;
  flex-direction: column;
  gap: 3.65px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.contact-us {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 14.583333969116211px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.order-now {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 59.79166793823242px;
  line-height: 72.92px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.fill-out-your-details-of-your-order-in-the-section-to-place-your-order {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "InterTight-SemiBold", sans-serif;
  font-size: 17.5px;
  line-height: 180%;
  font-weight: 600;
  position: relative;
  align-self: stretch;
}
.frame-96 {
  display: flex;
  flex-direction: column;
  gap: 7.29px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.frame-94 {
  border-radius: 7.29px;
  border-style: solid;
  border-color: var(--secondary-colour, #ef4136);
  border-width: 0.73px;
  padding: 14.58px 14.58px 21.88px 14.58px;
  display: flex;
  flex-direction: row;
  gap: 7.29px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.full-name {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 14.583333969116211px;
  font-weight: 400;
  position: relative;
}
.frame-5325 {
  display: flex;
  flex-direction: row;
  gap: 7.29px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-95 {
  border-radius: 7.29px;
  border-style: solid;
  border-color: var(--secondary-colour, #ef4136);
  border-width: 0.73px;
  padding: 14.58px 14.58px 21.88px 14.58px;
  display: flex;
  flex-direction: row;
  gap: 7.29px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.phone {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 14.583333969116211px;
  font-weight: 400;
  position: relative;
}
.frame-962 {
  border-radius: 7.29px;
  border-style: solid;
  border-color: var(--secondary-colour, #ef4136);
  border-width: 0.73px;
  padding: 14.58px 14.58px 21.88px 14.58px;
  display: flex;
  flex-direction: row;
  gap: 7.29px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.email {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 14.583333969116211px;
  font-weight: 400;
  position: relative;
}
.frame-97 {
  border-radius: 7.29px;
  border-style: solid;
  border-color: var(--secondary-colour, #ef4136);
  border-width: 0.73px;
  padding: 14.58px 14.58px 109.38px 14.58px;
  display: flex;
  flex-direction: row;
  gap: 7.29px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.place-your-order-here {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 14.583333969116211px;
  font-weight: 400;
  position: relative;
}
.button-main2 {
  flex-shrink: 0;
  width: 144px;
  height: 48px;
  position: relative;
}
.frame-12 {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7.38px;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 0;
  top: 0;
}
.component-2-primary-button3 {
  background: var(--primary-colour, #009848);
  border-radius: 37px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1.4px;
  padding: 12px 39px 12px 39px;
  display: flex;
  flex-direction: row;
  gap: 7.38px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 48px;
  position: relative;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}
.component-2-primary-button3:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.button2 {
  color: var(--main-colour, #ffffff);
  text-align: center;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  white-space: nowrap;
}
.group-80 {
  flex-shrink: 0;
  width: 567px;
  height: 368px;
  position: absolute;
  left: 37px;
  top: 226.65px;
  overflow: visible;
}
.frame-5352 {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 30px;
  position: absolute;
  left: 1071px;
  top: 1044.09px;
}
.instagram {
  flex-shrink: 0;
  width: 28.8px;
  height: 28.8px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.join-us {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 18px;
  line-height: 180%;
  font-weight: 400;
  position: relative;
}
.gujjuben-s-khakhra {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 16px;
  line-height: 180%;
  font-weight: 400;
  position: relative;
  -webkit-text-stroke: 3.200000047683716px var(--secondary-colour, #ef4136);
}
.frame-5359 {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: absolute;
  left: 1073px;
  top: 510.87px;
}
.instagram2 {
  flex-shrink: 0;
  width: 28.8px;
  height: 28.8px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-5492 {
  background: #ffffff;
  padding: 84px 105px 84px 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: visible;
}
.frame-5363 {
  display: flex;
  flex-direction: column;
  gap: 33.6px;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-5368 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-5345 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-5339 {
  display: flex;
  flex-direction: column;
  gap: 16.8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.corporate-office-production-unit {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 15px;
  line-height: 19.24px;
  letter-spacing: -0.45px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-5338 {
  display: flex;
  flex-direction: column;
  gap: 8.4px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
._52-green-paladia-opp-raj-world-palanpur-canal-road-palanpor-surat-gujarat-india-395009 {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 13.440000534057617px;
  line-height: 16.78px;
  letter-spacing: -0.45px;
  font-weight: 500;
  position: relative;
  width: 206.64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-5340 {
  display: flex;
  flex-direction: column;
  gap: 16.8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.sales-and-marketing-office {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 15px;
  line-height: 19.24px;
  letter-spacing: -0.45px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-5337 {
  display: flex;
  flex-direction: column;
  gap: 8.4px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
._52-green-paladia-opp-raj-world-palanpur-canal-road-palanpor-surat-gujarat-india-3950092 {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 13.440000534057617px;
  line-height: 16.78px;
  letter-spacing: -0.45px;
  font-weight: 500;
  position: relative;
  width: 215px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-53452 {
  display: flex;
  flex-direction: column;
  gap: 16.8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.contact-us2 {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 15px;
  line-height: 19.24px;
  letter-spacing: -0.45px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-5365 {
  display: flex;
  flex-direction: column;
  gap: 8.4px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-5336 {
  display: flex;
  flex-direction: column;
  gap: 10.92px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-5333 {
  display: flex;
  flex-direction: row;
  gap: 2.52px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-5361 {
  display: flex;
  flex-direction: row;
  gap: 4.2px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-5362 {
  display: flex;
  flex-direction: row;
  gap: 5.04px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.mail {
  flex-shrink: 0;
  width: 16.8px;
  height: 16.8px;
  position: relative;
  overflow: hidden;
}
.group-54 {
  height: auto;
  position: absolute;
  left: 0.49px;
  top: 2.62px;
  overflow: visible;
}
.link-instagram {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 13.440000534057617px;
  line-height: 16.78px;
  letter-spacing: -0.45px;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-53382 {
  display: flex;
  flex-direction: column;
  gap: 10.92px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.group-55 {
  height: auto;
  position: absolute;
  left: 0.68px;
  top: 0.95px;
  overflow: visible;
}
.frame-53622 {
  display: flex;
  flex-direction: row;
  gap: 4.2px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-5344 {
  display: flex;
  flex-direction: column;
  gap: 16.8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.links {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 15px;
  line-height: 19.24px;
  letter-spacing: -0.45px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-5328 {
  display: flex;
  flex-direction: column;
  gap: 8.4px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.link-contact-us {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 13.440000534057617px;
  line-height: 16.78px;
  letter-spacing: -0.45px;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.link-about-us {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 13.440000534057617px;
  line-height: 16.78px;
  letter-spacing: -0.45px;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.link-privacy-policy {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 13.440000534057617px;
  line-height: 16.78px;
  letter-spacing: -0.45px;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.deal-with-us2 {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 13.440000534057617px;
  line-height: 16.78px;
  letter-spacing: -0.45px;
  font-weight: 500;
  position: relative;
  width: 73.08px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.line-3 {
  margin-top: -0.84px;
  border-style: solid;
  border-color: var(--secondary-colour, #ef4136);
  border-width: 0.84px 0 0 0;
  opacity: 0.2;
  align-self: stretch;
  flex-shrink: 0;
  height: 0px;
  position: relative;
}
.frame-5491 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1190px;
  position: relative;
}
.frame-5351 {
  display: flex;
  flex-direction: row;
  gap: 67.2px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.union2 {
  flex-shrink: 0;
  width: 206.64px;
  height: 109.2px;
  position: relative;
  overflow: visible;
}
.frame-5367 {
  display: flex;
  flex-direction: row;
  gap: 8.4px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.certified-brand-by {
  color: var(--secondary-colour, #ef4136);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 16px;
  line-height: 19.24px;
  letter-spacing: -0.45px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-5366 {
  display: flex;
  flex-direction: row;
  gap: 8.4px;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-5461 {
  border-radius: 126px;
  padding: 10.92px;
  display: flex;
  flex-direction: row;
  gap: 8.4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 89.88px;
  height: 89.88px;
  position: relative;
}
.frame-5457 {
  flex-shrink: 0;
  width: 67.2px;
  height: 33.08px;
  position: relative;
  overflow: visible;
}
.frame-53672 {
  display: flex;
  flex-direction: row;
  gap: 8.4px;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-5458 {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  position: relative;
}
.group {
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
}
.msme-logo-2 {
  flex-shrink: 0;
  width: 95px;
  height: 83px;
  position: relative;
  overflow: hidden;
}
.group2 {
  width: 85.23%;
  height: 97.3%;
  position: absolute;
  right: 8.05%;
  left: 6.72%;
  bottom: -96.22%;
  top: 98.93%;
  transform: translate(0px, -80.76px);
  overflow: visible;
}
.line-2 {
  margin-top: -0.84px;
  border-style: solid;
  border-color: var(--secondary-colour, #ef4136);
  border-width: 0.84px 0 0 0;
  opacity: 0.2;
  align-self: stretch;
  flex-shrink: 0;
  height: 0px;
  position: relative;
}
.frame-5354 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.gujjuben-s-khakhra-brand-all-rights-reserved {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 12px;
  line-height: 13.44px;
  letter-spacing: -0.12px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-5256 {
  display: flex;
  flex-direction: row;
  gap: 4.2px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.socials {
  color: var(--red, #f0302d);
  text-align: left;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 11.760000228881836px;
  line-height: 13.44px;
  letter-spacing: -0.12px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mdi-instagram {
  flex-shrink: 0;
  width: 20.16px;
  height: 20.16px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.ic-baseline-facebook {
  flex-shrink: 0;
  width: 20.16px;
  height: 20.16px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}

/* Form input styles */
.frame-94 input,
.frame-95 input,
.frame-962 input,
.frame-97 textarea,
.input-name,
.input-phone,
.input-email,
.input-message {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--secondary-colour, #ef4136);
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 14.58px;
  font-weight: 400;
  resize: none;
}
.frame-94 input::placeholder,
.frame-95 input::placeholder,
.frame-962 input::placeholder,
.frame-97 textarea::placeholder {
  color: var(--secondary-colour, #ef4136);
  opacity: 0.7;
}
button[type="submit"] {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0;
}

/* Loader spinner */
.products-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 80px 0;
}

.products-loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(239, 65, 54, 0.2);
  border-top-color: #ef4136;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 3-column product grid (category mode) — upgraded to 4-col on large screens */
.products-grid {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}

.products-grid.active {
  display: grid;
}

@media (max-width: 1280px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 1023px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 380px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

.prod-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.prod-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f9f9f9;
}

.prod-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prod-card-body {
  padding: 16px 18px 18px;
  display: flex;
  justify-content: space-between; /* 🔥 KEY FIX */
  align-items: center;
  width: 100%;
}

.prod-card-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prod-card-title {
  font-size: 20px;
  color: #ef4136;
  font-family: "SauceTomato-Regular";
}

.prod-card-sub {
  font-size: 14px;
  color: #777;
  font-family: "InterTight-Medium";
}

.prod-card-right {
  display: flex;
  align-items: center;
}

.prod-card-btn {
  background: #009848;
  color: #fff;
  border-radius: 30px;
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.prod-card-title {
  color: var(--secondary-colour, #ef4136);
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

.prod-card-price {
  color: var(--secondary-colour, #ef4136);
  font-family: "InterTight-SemiBold", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.prod-card-btn {
  margin-top: 8px;
  background: var(--primary-colour, #009848);
  color: #ffffff;
  border: 1.4px solid #ffffff;
  border-radius: 37px;
  padding: 10px 32px;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.25);
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
  white-space: nowrap;
}

.prod-card-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ── Qty selector ─────────────────────────────────────────────────────────── */
.qty-selector {
  display: flex;
  align-items: center;
  background: #009848;
  border-radius: 50px;
  padding: 4px;
  gap: 0;
  box-shadow: 0 3px 10px rgba(0, 152, 72, 0.4);
}

.qty-btn {
  background: #ffffff;
  color: #009848;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}

.qty-btn:hover {
  background: #e0f5ea;
  transform: scale(1.1);
}
.qty-btn:active {
  transform: scale(0.93);
}

.qty-count {
  color: #ffffff;
  font-family: "SauceTomato-Regular", sans-serif;
  font-size: 17px;
  font-weight: 700;
  min-width: 34px;
  text-align: center;
  user-select: none;
}

/* ── Cart badge ───────────────────────────────────────────────────────────── */
.cart-count {
  display: none;
  background: #ffffff;
  color: #009848;
  font-family: "InterTight-Medium", sans-serif;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  right: -6px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.component-2-primary-button {
  position: relative;
}

/* ── Let's have deal — exact match to index/home page ────────────────────── */
.contact-section {
  width: 1400px;
  max-width: 100%;
  margin: 0 auto;
  border: 1.5px solid rgba(239, 65, 54, 0.3);
  border-radius: 20px;
  padding: 48px 56px 0;
  display: flex;
  gap: 48px;
  background: #ffffff;
}
.contact-left {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.contact-us-label {
  color: #ef4136;
  font-family: var(--font-brand, "SauceTomato", serif);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.contact-heading {
  color: #ef4136;
  font-family: var(--font-brand, "SauceTomato", serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.1;
}
.contact-subtext {
  color: #555;
  font-family: var(--font, "Poppins", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  max-width: 340px;
}
.contact-mascot {
  width: 100%;
  max-width: 420px;
  display: block;
  margin-top: 16px;
  align-self: flex-start;
}
.contact-right {
  flex: 1;
  min-width: 0;
  padding-bottom: 48px;
}
/* ═══════════════════════════════════════════════════════════════
   CONTACT FORM — single spacing system, 18px gap everywhere
   All conflicting rules neutralised here. Do NOT add deal-form
   rules anywhere else in this file.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Form container: every child separated by 18px, no exceptions */
.contact-right .deal-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. .deal-field: transparent wrapper — contributes no extra space */
.contact-right .deal-field {
  display: contents !important; /* makes children direct flex items of .deal-form */
}

/* 3. .deal-row: Phone + Email stacked vertically, same 18px gap */
.contact-right .deal-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* 4. Every input/textarea — identical baseline */
.contact-right .deal-input,
.contact-right .input-name,
.contact-right .input-phone,
.contact-right .input-email,
.contact-right .input-message {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid #ef4136 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-family: "Poppins", "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  color: #1a1a1a !important;
  background: #ffffff !important;
  outline: none !important;
  min-height: 48px !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.contact-right .deal-input::placeholder,
.contact-right .input-name::placeholder,
.contact-right .input-phone::placeholder,
.contact-right .input-email::placeholder,
.contact-right .input-message::placeholder {
  color: rgba(239, 65, 54, 0.55) !important;
}

.contact-right .deal-input:focus,
.contact-right .input-name:focus,
.contact-right .input-phone:focus,
.contact-right .input-email:focus,
.contact-right .input-message:focus {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(239, 65, 54, 0.1) !important;
  background: #fff !important;
}

/* 5. Textarea */
.contact-right .deal-textarea,
.contact-right .input-message {
  min-height: 120px !important;
  resize: vertical !important;
}

/* 6. intl-tel-input wrapper — must not introduce any spacing of its own */
.contact-right .iti {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Phone input inside iti wrapper */
.contact-right .iti input[type="tel"],
.contact-right .iti .input-phone {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 90px !important; /* space for flag + dial code */
  margin: 0 !important;
}

/* 7. Submit button */
.contact-right .deal-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  background: #009848 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 40px !important;
  font-family: "Poppins", "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 152, 72, 0.28) !important;
  min-height: 52px !important;
  margin: 0 !important;
  touch-action: manipulation !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}
.contact-right .deal-submit-btn:hover:not(:disabled) {
  background: #007a3a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 152, 72, 0.36) !important;
}
.contact-right .deal-submit-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 8. Mobile: widen button, keep same 18px gap */
@media (max-width: 768px) {
  .contact-section {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px 0;
    gap: 32px;
  }
  .contact-left,
  .contact-right {
    width: 100%;
  }
  .contact-right {
    padding-bottom: 32px;
  }
  .contact-mascot {
    max-width: 200px;
  }
  .contact-right .deal-submit-btn {
    width: 100% !important;
    align-self: stretch !important;
  }
}

/* ── Join us Instagram row fix ───────────────────────────────────────────── */
.frame-5352,
.frame-5359 {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
}

.join-us,
.gujjuben-s-khakhra {
  white-space: nowrap;
}

/* ── Join us — text readability fix ─────────────────────────────────────── */
.join-us,
.gujjuben-s-khakhra {
  font-family: "Inter", "InterTight-Medium", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ef4136;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  white-space: nowrap;
}

/* ── Design System overrides: Product List ───── */
body {
  background: var(--bg, #f8f9fa) !important;
}

.frame-23,
.frame-54772,
.frame-5478 {
  background: var(--bg-card, #fff) !important;
  border-radius: var(--r-xl, 20px) !important;
  box-shadow: var(--sh-sm, 0 2px 12px rgba(0, 0, 0, 0.08)) !important;
  overflow: hidden;
  padding: 32px !important;
  transition:
    box-shadow 0.25s,
    transform 0.25s !important;
}
.frame-23:hover,
.frame-54772:hover,
.frame-5478:hover {
  box-shadow: var(--sh-md, 0 4px 20px rgba(0, 0, 0, 0.12)) !important;
  transform: translateY(-3px) !important;
}
.khakhra,
.dry-bhakhri,
.coin-khakhra {
  font-family: var(--font-brand, "SauceTomato", serif) !important;
  color: var(--red, #ef3d2f) !important;
}

/* Product grid cards */
.prod-card {
  background: var(--bg-card, #fff) !important;
  border-radius: var(--r-xl, 20px) !important;
  box-shadow: var(--sh-xs, 0 1px 4px rgba(0, 0, 0, 0.06)) !important;
  overflow: hidden;
  transition:
    box-shadow 0.25s,
    transform 0.25s !important;
}
.prod-card:hover {
  box-shadow: var(--sh-md, 0 4px 20px rgba(0, 0, 0, 0.12)) !important;
  transform: translateY(-5px) !important;
}
.prod-card-img {
  transition: transform 0.4s ease !important;
}
.prod-card:hover .prod-card-img {
  transform: scale(1.06) !important;
}
.prod-card-title {
  font-family: var(--font, "Poppins", sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text, #1a1a1a) !important;
}
.prod-card-sub {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--red, #ef3d2f) !important;
}
.prod-card-btn {
  background: var(--green, #0b8f3c) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-pill, 50px) !important;
  padding: 9px 20px !important;
  font-family: var(--font, "Poppins", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: var(--sh-grn, 0 4px 16px rgba(11, 143, 60, 0.28)) !important;
  transition:
    transform 0.15s,
    filter 0.15s !important;
}
.prod-card-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}

/* Qty selector */
.qty-selector {
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid var(--border-2, #dee2e6) !important;
  border-radius: var(--r-pill, 50px) !important;
  overflow: hidden !important;
  background: var(--bg-card, #fff) !important;
}
.qty-btn {
  width: 34px !important;
  height: 34px !important;
  background: var(--bg-muted, #f1f3f5) !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    background 0.15s,
    color 0.15s !important;
}
.qty-btn:hover {
  background: var(--red, #ef3d2f) !important;
  color: #fff !important;
}
.qty-count {
  min-width: 36px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-left: 1.5px solid var(--border-2, #dee2e6) !important;
  border-right: 1.5px solid var(--border-2, #dee2e6) !important;
  line-height: 34px !important;
  user-select: none !important;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Product List Page
   ═══════════════════════════════════════════════ */

/* Fix hard-coded widths */
.product-list {
  width: 100% !important;
  max-width: 1400px;
}
.frame-5471 {
  width: 100% !important;
}
.frame-5492 {
  width: 100% !important;
}
.frame-5358 {
  width: 100% !important;
}
.frame-5278 {
  width: 100% !important;
  max-width: 100% !important;
}
.frame-5491 {
  width: 100% !important;
}

/* ── Tablet (≤ 1024px) ───────────────────────── */
@media (max-width: 1024px) {
  .product-list {
    padding: 0 16px;
  }
  .frame-5477 {
    padding: 32px 20px;
  }
  .frame-5475 {
    max-width: 100%;
  }
  .at-gujjubens-we-specialize-in-authentic-gujarati-snacks-that-are-perfect-for-every-occasion-from-daily-snacking-to-festive-treats {
    width: 100%;
    font-size: 18px;
  }
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .frame-23,
  .frame-54772,
  .frame-5478 {
    flex-direction: column;
    min-height: auto;
    gap: 24px;
  }
  .rectangle-22 {
    width: 100%;
    max-width: 100%;
    height: 300px;
  }
  .frame-5492 {
    padding: 48px 24px;
  }
  .frame-5278 {
    padding: 48px 24px;
    flex-direction: column;
  }
  .frame-5345 {
    flex-wrap: wrap;
    gap: 24px;
  }
  .frame-5491 {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* ── Mobile (≤ 768px) ────────────────────────── */
@media (max-width: 768px) {
  .product-list {
    padding: 0;
  }
  .frame-5477 {
    padding: 24px 12px;
  }
  .products-category {
    font-size: 28px;
    line-height: 1.2;
  }
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .khakhra,
  .dry-bhakhri,
  .coin-khakhra {
    font-size: 40px;
    line-height: 1.1;
  }
  .frame-23,
  .frame-54772,
  .frame-5478 {
    gap: 16px;
  }
  .rectangle-22 {
    height: 220px;
  }
  .frame-5492 {
    padding: 28px 12px;
  }
  .frame-5278 {
    padding: 28px 16px;
  }
  .frame-5345 {
    flex-direction: column;
    gap: 20px;
  }
  .frame-5491 {
    flex-direction: column;
    gap: 16px;
  }
  .frame-5354 {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .union2 {
    width: 140px;
    height: auto;
  }
}

/* ── Small mobile (≤ 480px) ──────────────────── */
@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .frame-5477 {
    padding: 16px 10px;
  }
  .products-category {
    font-size: 24px;
  }
  .khakhra,
  .dry-bhakhri,
  .coin-khakhra {
    font-size: 32px;
  }
  .rectangle-22 {
    height: 180px;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE OVERRIDES — appended by audit
   ═══════════════════════════════════════════════ */

/* Fix Figma fixed widths */
.product-list,
.frame-5471,
.frame-5358,
.frame-5278,
.frame-5492,
.frame-5490 {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  position: relative !important;
}

.frame-5491 {
  width: 100% !important;
}

.at-gujjubens-we-specialize-in-authentic-gujarati-snacks-that-are-perfect-for-every-occasion-from-daily-snacking-to-festive-treats {
  width: 100% !important;
}

/* Product section rows */
/* ===== PHONE FIELD MOBILE FIX ===== */

@media (max-width: 768px) {
  .deal-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .iti {
    width: 100% !important;
    display: block !important;
  }

  .iti__country-container {
    left: 0 !important;
  }

  .iti input,
  .iti input[type="tel"],
  .input-phone {
    width: 100% !important;
    height: 52px !important;
    padding-left: 85px !important;
    font-size: 16px !important;
  }

  .iti__selected-country {
    padding-left: 12px !important;
    padding-right: 8px !important;
  }

  .iti__flag-container {
    width: 75px !important;
  }

  .iti--allow-dropdown {
    width: 100% !important;
  }
}

/* Product grid responsive */
@media (max-width: 992px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .prod-card-body {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 8px 12px;
  }

  .prod-card-left,
  .prod-card-right {
    width: 100%;
    min-width: 0;
  }

  .prod-card-right {
    justify-content: flex-start;
  }

  .prod-card-btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
    white-space: normal;
  }

  .qty-selector {
    width: 100%;
    justify-content: center;
  }

  .prod-card-title {
    font-size: 13px;
    word-break: break-word;
    line-height: 1.25;
  }

  .prod-card-sub {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE UI/UX IMPROVEMENTS — ≤ 600px
   Targets: page header, category cards, product grid cards,
            qty selector, contact section, footer.
   Does NOT change desktop layout.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* ── 1. Page wrapper — breathing room ──────────────────────────── */
  body {
    background: #f5f5f5 !important;
  }

  .product-wrapper {
    background: #f5f5f5;
  }

  .frame-5477 {
    padding: 16px 12px 24px !important;
    gap: 24px !important;
    background: #f5f5f5 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ── 2. Page title block ────────────────────────────────────────── */
  .frame-5475 {
    gap: 8px !important;
    padding: 0 4px !important;
  }

  .products-category {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  .at-gujjubens-we-specialize-in-authentic-gujarati-snacks-that-are-perfect-for-every-occasion-from-daily-snacking-to-festive-treats {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #555 !important;
    -webkit-text-stroke: 0 !important;
  }

  /* ── 3. Category listing cards (Mode B) ─────────────────────────── */
  .frame-5498 {
    gap: 16px !important;
  }

  .frame-23,
  .frame-54772,
  .frame-5478 {
    flex-direction: column !important;
    min-height: auto !important;
    gap: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09) !important;
    background: #fff !important;
    transform: none !important;
  }

  .frame-23:hover,
  .frame-54772:hover,
  .frame-5478:hover {
    transform: none !important;
  }

  /* Category image — full width, taller on mobile */
  .rectangle-22 {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Text content below the image */
  .frame-21 {
    padding: 16px 16px 20px !important;
    gap: 12px !important;
    justify-content: flex-start !important;
  }

  .khakhra,
  .dry-bhakhri,
  .coin-khakhra {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  .about-our-product {
    font-size: 13px !important;
  }

  /* description text */
  .frame-5434 > div:nth-child(2) {
    font-size: 13px !important;
    line-height: 1.55 !important;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* View More button — full width */
  .button-main {
    width: 100% !important;
    height: auto !important;
  }

  .frame-1 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
  }

  .component-2-primary-button2 {
    width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
  }

  /* ── 4. Product grid (Mode A) ───────────────────────────────────── */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  /* Card shell */
  .prod-card {
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    transform: none !important;
    transition: none !important;
  }

  /* Square product image */
  .prod-card-img-wrap {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    background: #f5f5f5 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .prod-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Card body — vertical stack */
  .prod-card-body {
    padding: 10px 10px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    flex: 1 !important;
    display: flex !important;
  }

  .prod-card-left {
    gap: 2px !important;
    flex: 1 !important;
  }

  .prod-card-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    /* 2-line clamp */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: calc(13px * 1.3 * 2) !important;
    word-break: break-word !important;
  }

  .prod-card-sub {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ef4136 !important;
  }

  .prod-card-right {
    width: 100% !important;
    justify-content: stretch !important;
    margin-top: 4px !important;
  }

  /* Add to Cart button — full width */
  .prod-card-btn {
    width: 100% !important;
    padding: 9px 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: #009848 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .prod-card-btn-disabled {
    background: #ccc !important;
    color: #888 !important;
  }

  /* Qty selector — full width, more comfortable tap targets */
  .qty-selector {
    width: 100% !important;
    justify-content: space-between !important;
    border-radius: 10px !important;
    padding: 3px !important;
    background: #009848 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .qty-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #009848 !important;
    border: none !important;
  }

  .qty-count {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    min-width: 0 !important;
    flex: 1 !important;
    text-align: center !important;
    border: none !important;
    line-height: 32px !important;
  }

  /* ── 5. Contact section ─────────────────────────────────────────── */
  .contact-section {
    border-radius: 16px !important;
    padding: 24px 16px 0 !important;
    gap: 20px !important;
    border-color: rgba(239, 65, 54, 0.2) !important;
    flex-direction: column !important;
  }

  .contact-left,
  .contact-right {
    width: 100% !important;
  }

  .contact-heading {
    font-size: 28px !important;
  }

  .contact-mascot {
    max-width: 160px !important;
    margin-top: 8px !important;
  }

  .deal-input {
    font-size: 14px !important;
    padding: 11px 12px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  .deal-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .deal-submit-btn {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }

  /* ── 6. Footer ──────────────────────────────────────────────────── */
  .frame-5492 {
    padding: 28px 16px !important;
  }

  .frame-5345 {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .frame-5491 {
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    align-items: flex-start !important;
  }

  .frame-5351 {
    gap: 16px !important;
  }

  .union2 {
    width: 120px !important;
    height: auto !important;
  }

  .frame-5354 {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  /* Overflow addresses */
  ._52-green-paladia-opp-raj-world-palanpur-canal-road-palanpor-surat-gujarat-india-395009,
  ._52-green-paladia-opp-raj-world-palanpur-canal-road-palanpor-surat-gujarat-india-3950092 {
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ── 7. Skip link — better visibility ──────────────────────────── */
  .skip-to-content {
    position: absolute !important;
    left: -9999px !important;
  }
  .skip-to-content:focus {
    left: 8px !important;
    top: 8px !important;
    z-index: 9999 !important;
    background: #ef4136 !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }
}

/* ── Extra small (≤ 380px) — single column last resort ─────────── */
@media (max-width: 360px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .prod-card-title {
    font-size: 12px !important;
  }
  .prod-card-sub {
    font-size: 12px !important;
  }
  .prod-card-btn {
    font-size: 11px !important;
    padding: 8px 6px !important;
  }
}