/* I've moved header/nav styles to global css */
 .hero_home {
  background: #ffffff;
  padding: 32px 0 40px;
 }
 img {
  max-width: 100%;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
 }
 .hero_row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
 }

 .hero_kicker {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-gray-500);
  margin-bottom: 8px;
 }

 .hero_title {
  font-size: 34px;
  font-weight: 800;
  color: var(--color-heading);
  margin: 0 0 10px;
 }

 .hero_highlight {
  color: var(--color-primary);
 }

 .hero_sub {
  font-size: 14px;
  color: var(--color-gray-600);
  max-width: 420px;
 }

 .hero_actions {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
 }

 .hero_image_wrap {
  border-radius: 28px;
  overflow: hidden;
  background: var(--color-gray-50);
  box-shadow: var(--shadow-lg-soft);
 }

 .hero_image_wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
 }

 .section_offers {
  background: var(--color-gray-50);
  padding: 8px 0 32px;
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
 }

 .section_header {
  text-align: center;
  margin: 12px 0 20px;
 }

 .section_title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-heading);
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
 }

 .section_title::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 3px;
  background: var(--color-black-soft);
 }

 .offer_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
 }

 .offer_card {
  background: #ffffff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
 }

 .offer_link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
 }

 .offer_media {
  height: 140px;
  background: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
 }

 .offer_body {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
 }

 .offer_title_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
 }

 .offer_title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--color-heading);
 }

 .offer_subtitle {
  font-size: 12px;
  color: var(--color-gray-600);
  margin-bottom: 4px;
 }

 .offer_price {
  font-size: 13px;
  color: var(--color-gray-600);
  margin-bottom: 10px;
 }

 .offer_range {
  font-size: 11px;
  color: var(--color-gray-500);
  margin-bottom: 8px;
 }

 .offer_footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
 }

 .offer_btn {
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
 }

 .badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
 }

 .badge_status_success {
  background: #ecfdf3;
  color: #166534;
 }

 .badge_status_pending {
  background: #fffbeb;
  color: #92400e;
 }

 .badge_status_error {
  background: #fef2f2;
  color: #b91c1c;
 }

 .badge_status_default {
  background: #f3f4f6;
  color: #374151;
 }

 .section_whatsapp {
  padding: 32px 0 40px;
 }

 .whatsapp_banner {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  min-height: 220px;
  background: var(--color-accent-success);
  color: #ffffff;
  display: flex;
  align-items: center;
 }

 .whatsapp_bg {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  object-fit: cover;
 }

 .whatsapp_content {
  position: relative;
  padding: 24px 28px;
  max-width: 420px;
 }

 .whatsapp_title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
 }

 .whatsapp_text {
  font-size: 14px;
  margin-bottom: 16px;
 }

 .whatsapp_subtext {
  font-size: 12px;
  margin-bottom: 14px;
  opacity: 0.9;
 }

 .whatsapp_btn {
  padding: 9px 22px;
  border-radius: var(--radius-full);
  border: none;
  background: #ffffff;
  color: var(--color-accent-success);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
 }

 .whatsapp_support_hint {
  margin-top: 10px;
  font-size: 12px;
 }

 .whatsapp_support_link {
  color: #ffffff;
  text-decoration: underline;
 }



 .shop_page {
  padding-top: 28px;
  padding-bottom: 40px;
 }

 .shop_breadcrumbs {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-bottom: 10px;
 }

 .shop_breadcrumbs .sep {
  margin: 0 4px;
 }

 .shop_title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
 }

 .shop_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
 }

 .shop_card {
  background: #ffffff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 14px;
 }

 .shop_card_title {
  font-weight: 600;
  margin-bottom: 4px;
 }

 .shop_card_meta {
  font-size: 13px;
  color: var(--color-gray-500);
 }

 .product_page {
  padding-top: 26px;
  padding-bottom: 40px;
 }

 .product_header {
  margin-bottom: 16px;
 }

 .product_title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
 }

 .product_price_range {
  font-size: 14px;
  color: var(--color-heading);
 }

 .product_layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px;
  margin-top: 6px;
  align-items: flex-start;
 }

 .product_media {
  max-width: 420px;
 }

 .product_image_card {
  background: var(--color-gray-100);
  border-radius: 12px;
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
 }

 .product_image_card img {
  width: 100%;
  height: auto;
  object-fit: cover;
 }

 /* .product_summary {
  max-width: 420px;
 } */

 .product_form {
  margin-bottom: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--color-gray-200);
  padding: 14px;
 }

 .field_group {
  margin-bottom: 10px;
 }

 .field_label {
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
  color: var(--color-gray-700);
 }

 .field_input,
 .field_select {
  width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--color-gray-300);
  font-size: 13px;
 }

 .field_input:focus,
 .field_select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
 }

 .product_features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--color-gray-600);
 }

 .product_features li::before {
  content: "• ";
 }

 .size_pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
 }

 .size_pill {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 12px;
  background: #ffffff;
  color: var(--color-gray-700);
  cursor: pointer;
 }

 .size_pill.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
 }

 .product_tabs {
  margin-top: 24px;
  border-top: 1px solid var(--color-gray-200);
  padding-top: 14px;
 }

 .product_tab_nav {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
 }

 .product_tab_btn {
  border: none;
  background: transparent;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  color: var(--color-gray-500);
  cursor: pointer;
 }

 .product_tab_btn.active {
  border-color: var(--color-primary);
  color: var(--color-heading);
 }

 .product_tab_content_group {
  font-size: 13px;
  color: var(--color-gray-700);
 }

 .product_tab_content {
  display: none;
 }

 .product_tab_content.active {
  display: block;
 }

 .unsupported_list {
  margin-top: 6px;
  padding-left: 18px;
 }

 .auth_section {
  padding: 32px 0 40px;
 }

 .auth_container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 28px;
  align-items: center;
 }

 .auth_card {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md-soft);
  padding: 24px 24px 22px;
 }

 .auth_title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--color-heading);
 }

 .auth_form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
 }

 .form_group label {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--color-gray-700);
 }

 .form_group input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-gray-300);
  font-size: 13px;
 }

 .form_group input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
 }

 .form_actions {
  margin-top: 8px;
 }

 .auth_footer_text {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-gray-600);
 }

 .auth_footer_text a {
  color: var(--color-primary);
  font-weight: 500;
 }

 .auth_alert {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 10px;
 }

 .auth_alert_error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
 }

 .auth_alert_success {
  background: #ecfdf3;
  color: #166534;
  border: 1px solid #bbf7d0;
 }

 .extra-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg-soft);
  overflow: hidden;
 }

 .extra-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }

 .hide-on-mobile {
  display: block;
 }

 .dashboard_section {
  padding: 28px 0 40px;
 }

 .dashboard_container {
  max-width: 960px;
 }

 .dashboard_title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--color-heading);
 }

 .dashboard_subtitle {
  font-size: 14px;
  color: var(--color-gray-600);
  margin-bottom: 14px;
 }

 .dashboard_cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 10px;
 }

 .dashboard_card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: var(--shadow-md-soft);
  padding: 16px 18px;
 }

 .dashboard_balance {
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0 10px;
 }

 .dashboard_links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
 }

 .dashboard_links a {
  color: var(--color-primary);
 }

 @media (max-width: 900px) {
  .hero_row {
   grid-template-columns: minmax(0, 1fr);
   gap: 20px;
  }

  .hero_home {
   padding-top: 22px;
  }

  .product_layout {
   grid-template-columns: minmax(0, 1fr);
  }

  .auth_container {
   grid-template-columns: minmax(0, 1fr);
  }
 }