@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);
.lag-bg-screen {

  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.lag-bottomBox {

  z-index: 1000;
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.lag-btn {
  width: 13rem;
  height: 44px !important;
  border-radius: 18px !important;
  color: black;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.lag-btn-new {
  width: 13rem;
  height: 2.5rem;
  border-radius: 10px !important;
}

.lag-btn-body {
  display: flex;
  padding: 1rem;
  gap: 1rem;
}

.lag-btn-body2 {
  display: flex;
  padding: 1rem;
  align-items: center;
  justify-content: center;

}


.heading-lang {

  width: 143px;
  height: 138px
}

.heading-body {
  position: absolute;
  width: 100%;
  top: 8rem;
}
.bg-screen {
  z-index: 1000;
  position: absolute;
  width: 100%;
  bottom: 0;
}



.bottomBox {
 

  background-color: #2182b1;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.lag-btn {
  width: 13rem;
  height: 2.5rem;
  border-radius: 20px !important;
  color: black !important;
}

.lag-btn2 {
  width: 100% !important;
  height: 42px;
  border-radius: 10px !important;
  color: #fff !important;
  text-transform: none !important;
}

.lag-btn3 {
  width: 13rem;
  height: 42px;
  border-radius: 10px !important;
}

.lag-btn4 {
 
  height: 40px;
  border-radius: 10px !important;
  color: #fff !important;
  text-transform: none !important;
}

.btn-body {
  display: flex;
  padding: 1rem;
  gap: 1rem;
  padding-top: 40px;


}

.btn-body2 {
  display: flex;
  padding: 1rem;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}





.home-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 40px 0px;
  width: 100%;
}

.MuiButton-outlinedPrimary {
  outline: solid 1px #fff !important;
}
/* Page Wrapper */
.signin-page-wrapper {
  background-color: #2182b1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  align-items: center;
}

/* Blue Header Section */
.signin-blue-header {
  height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #2182b1;
  width: 100%;
  max-width: 600px;
}

.signin-back-arrow {
  color: #ffffff;
  position: absolute;
  top: 2rem;
  left: 1.5rem;
  cursor: pointer;
  font-size: 28px !important;
  transition: opacity 0.2s;
}

.signin-back-arrow:hover {
  opacity: 0.8;
}

.signin-logo-container {
  width: 140px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signin-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* White Card Overlay */
.signin-white-card {
  background-color: #ffffff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding: 32px 24px;
  box-sizing: border-box;
  flex: 1 1;
  width: 100%;
  max-width: 600px;
  margin: -20px auto 0 auto;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.signin-title-section {
  text-align: left;
  margin-bottom: 24px;
}

.signin-main-title {
  font-size: 28px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 8px 0;
  font-family: 'Inter', sans-serif;
}

.signin-subtitle {
  font-size: 14px;
  color: #4b5563; /* grey-600 */
  line-height: 1.5;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* Form Fields */
.signin-form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.signin-field-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
  text-align: left;
}

.signin-phone-input-group {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  height: 48px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.signin-phone-input-group:focus-within {
  border-color: #2182b1;
  box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.15);
}

.signin-flag-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 100%;
  background-color: #f8fafc;
  flex-shrink: 0;
}

.signin-flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}

.signin-flag-arrow {
  font-size: 10px;
  color: #64748b;
}

.signin-phone-input-divider {
  width: 1px;
  height: 24px;
  background-color: #cbd5e1;
}

.signin-phone-input-field {
  flex: 1 1;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 16px;
  font-size: 16px;
  color: #0f172a;
  box-sizing: border-box;
  -moz-appearance: textfield;
}

.signin-phone-input-field::-webkit-input-placeholder {
  color: #b0b8c1;
  opacity: 1;
}

.signin-phone-input-field::placeholder {
  color: #b0b8c1;
  opacity: 1;
}

.signin-phone-input-field::-webkit-outer-spin-button,
.signin-phone-input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.signin-error-message {
  color: #ef4444;
  font-size: 13px;
  margin-top: 6px;
  text-align: left;
}

/* Button */
.signin-button-container {
  margin-top: 8px;
  margin-bottom: 24px;
}

.signin-verify-btn {
  background-color: #007a87 !important; /* teal */
  color: #ffffff !important;
  width: 100% !important;
  height: 48px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 122, 135, 0.2) !important;
  transition: background-color 0.2s !important;
}

.signin-verify-btn:hover {
  background-color: #006670 !important;
}

.signin-btn-wa-icon {
  font-size: 18px !important;
}

/* Instructions */
.signin-instructions-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 8px;
  border-top: 1px solid #f1f5f9;
  padding-top: 24px;
}

.instructions-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.instructions-link {
  font-size: 14px;
  font-weight: 700;
  color: #2182b1;
  text-decoration: underline;
  margin-bottom: 12px;
  transition: color 0.2s;
}

.instructions-link:hover {
  color: #1a6b93;
}

.instructions-malayalam {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 24px 0;
  max-width: 90%;
}

/* Phone Mockup */
.phone-mockup-container {
  width: 270px;
  height: 480px;
  border: 10px solid #1e293b; /* slate-800 mockup frame */
  border-radius: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  background-color: #ece5dd; /* WhatsApp default background color */
  box-sizing: border-box;
}

.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 110px;
  height: 16px;
  background-color: #1e293b;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* WhatsApp Header Mockup */
.wa-header {
  height: 60px;
  background-color: #075e54; /* WA green */
  display: flex;
  align-items: center;
  padding: 16px 8px 6px 8px; /* Extra padding top for notch spacing */
  color: #ffffff;
  gap: 6px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.wa-header-back {
  font-size: 16px;
  font-weight: bold;
}

.wa-header-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-header-avatar img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.wa-header-info {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  text-align: left;
}

.wa-header-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-header-status {
  font-size: 9px;
  opacity: 0.8;
}

.wa-header-icons {
  display: flex;
  gap: 8px;
  font-size: 12px;
}

.wa-icon {
  opacity: 0.9;
}

/* WhatsApp Chat Body */
.wa-chat-body {
  flex: 1 1;
  background-color: #ece5dd;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: hidden;
  box-sizing: border-box;
}

.wa-date-pill {
  background-color: rgba(225, 235, 245, 0.8);
  color: #5b6b7b;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 16px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.05);
}

.wa-message-bubble {
  background-color: #ffffff;
  border-radius: 12px;
  border-top-left-radius: 0;
  padding: 10px;
  align-self: flex-start;
  width: 95%;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  text-align: left;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.wa-message-text {
  font-size: 11px;
  color: #303030;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.wa-message-button {
  background-color: #00a884; /* WA primary green */
  color: #ffffff !important;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: center;
  margin-bottom: 8px;
  display: block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s;
}

.wa-message-button:hover {
  background-color: #008f70;
}

.wa-message-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wa-footer-text {
  font-size: 9px;
  color: #667781;
  line-height: 1.3;
}

.wa-message-time {
  font-size: 8px;
  color: #667781;
  align-self: flex-end;
}
/* ═══════════════════════════════════════════════════════════
   SIGN UP PAGE — Malayalam-first redesign
   Reference: registration screen with SMS OTP flow
═══════════════════════════════════════════════════════════ */

.signup-page-wrapper {
  background: linear-gradient(170deg, #1565c0 0%, #42a5f5 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  align-items: center;
}

/* ── Blue Header ── */
.signup-blue-header {
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  width: 100%;
  max-width: 600px;
}

.signup-logo-container {
  width: 90px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Content area ── */
.signup-content-area {
  background-color: #f0f5ff;
  flex: 1 1;
  width: 100%;
  max-width: 600px;
  margin: -20px auto 0 auto;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 18px 14px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── White card ── */
.signup-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 16px 14px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  width: 100%;
}

/* ── Malayalam headline ── */
.signup-ml-headline {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 14px 0;
  padding: 0 4px;
}

/* ── Phone label ── */
.signup-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 7px;
  text-align: left;
  display: block;
}

/* ── Phone input group ── */
.signup-phone-input-group {
  display: flex;
  align-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  height: 46px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 6px;
}

.signup-phone-input-group:focus-within {
  border-color: #2182b1;
  box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.15);
}

.signup-flag-box {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 100%;
  background-color: #f1f5f9;
  border-right: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.signup-flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}

.signup-flag-code {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.signup-flag-arrow {
  font-size: 9px;
  color: #64748b;
}

.signup-phone-input-divider {
  width: 1px;
  height: 24px;
  background-color: #cbd5e1;
}

.signup-phone-input-field {
  flex: 1 1;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 14px;
  font-size: 16px;
  color: #0f172a;
  box-sizing: border-box;
  -moz-appearance: textfield;
  letter-spacing: 1px;
}

.signup-phone-input-field::-webkit-input-placeholder {
  color: #b0b8c1;
  letter-spacing: 2px;
  opacity: 1;
}

.signup-phone-input-field::placeholder {
  color: #b0b8c1;
  letter-spacing: 2px;
  opacity: 1;
}

.signup-phone-input-field::-webkit-outer-spin-button,
.signup-phone-input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.signup-error-message {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  text-align: left;
}

/* ── Two action buttons row ── */
.signup-action-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 0 0;
}

.signup-register-btn {
  flex: 1 1;
  height: 50px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #1a7a4a 0%, #22a05e 100%);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  box-sizing: border-box;
  box-shadow: 0 3px 10px rgba(26, 122, 74, 0.30);
  transition: background 0.2s, -webkit-transform 0.15s;
  transition: background 0.2s, transform 0.15s;
  transition: background 0.2s, transform 0.15s, -webkit-transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.signup-register-btn:hover { background: linear-gradient(135deg, #155f3a 0%, #1a8a50 100%); }
.signup-register-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }

.signup-btn-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.signup-register-btn-sub {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.90;
  line-height: 1.3;
  text-align: center;
}

.signup-signin-btn {
  flex: 1 1;
  height: 50px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #1565c0 0%, #1e88e5 100%);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  box-sizing: border-box;
  box-shadow: 0 3px 10px rgba(21, 101, 192, 0.30);
  transition: background 0.2s, -webkit-transform 0.15s;
  transition: background 0.2s, transform 0.15s;
  transition: background 0.2s, transform 0.15s, -webkit-transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.signup-signin-btn:hover { background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%); }
.signup-signin-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }

.signup-signin-btn-sub {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.90;
  line-height: 1.3;
  text-align: center;
}

/* ── OTP section ── */
.signup-otp-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signup-otp-instruction-card {
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 9px 14px;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

.signup-otp-hint {
  font-size: 13px;
  color: #0c4a6e;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

/* ── OTP inputs row ── */
.signup-otp-inputs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
}

.signup-otp-digit {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 2px solid #cbd5e1;
  outline: none;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  background-color: #f8fafc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
  caret-color: #2182b1;
}

.signup-otp-digit::-webkit-outer-spin-button,
.signup-otp-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.signup-otp-digit:focus {
  border-color: #2182b1;
  box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.18);
  background-color: #ffffff;
}

/* Resend link */
.signup-resend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #475569;
}

.signup-resend-link {
  background: none;
  border: none;
  cursor: pointer;
  color: #2182b1;
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  padding: 0;
}

.signup-resend-link:hover { color: #1a6b93; }

/* Verify button */
.signup-verify-btn {
  background-color: #007a87 !important;
  color: #ffffff !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  box-shadow: 0 3px 6px rgba(0, 122, 135, 0.20) !important;
  transition: background-color 0.2s !important;
}

.signup-verify-btn:hover { background-color: #006670 !important; }
.signup-verify-btn:disabled {
  background-color: #94a3b8 !important;
  cursor: not-allowed !important;
}

/* ── Home button ── */
.signup-home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(21, 101, 192, 0.28);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, -webkit-transform 0.15s;
  transition: opacity 0.15s, transform 0.15s;
  transition: opacity 0.15s, transform 0.15s, -webkit-transform 0.15s;
}

.signup-home-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); opacity: 0.9; }

.instructions-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
  line-height: 1.4;
  text-align: center;
}

.instructions-link {
  font-size: 13px;
  font-weight: 700;
  color: #2182b1;
  text-decoration: underline;
  margin-bottom: 10px;
  transition: color 0.2s;
}

.instructions-link:hover { color: #1a6b93; }

.instructions-malayalam {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 20px 0;
  max-width: 92%;
  text-align: center;
}

/* ── Support card ── */
.signup-support-card {
  text-align: center;
}

.signup-support-text {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 12px 0;
  text-align: center;
}

.signup-support-btns {
  display: flex;
  gap: 10px;
}

.signup-support-btn {
  flex: 1 1;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, -webkit-transform 0.15s;
  transition: opacity 0.15s, transform 0.15s;
  transition: opacity 0.15s, transform 0.15s, -webkit-transform 0.15s;
}

.signup-support-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); opacity: 0.9; }

.signup-support-call {
  background: linear-gradient(135deg, #1565c0 0%, #1e88e5 100%);
  box-shadow: 0 3px 8px rgba(21, 101, 192, 0.25);
}

.signup-support-wa {
  background: linear-gradient(135deg, #128c3e 0%, #25d366 100%);
  box-shadow: 0 3px 8px rgba(18, 140, 62, 0.25);
}

.signup-support-icon {
  font-size: 16px;
  line-height: 1;
}

/* ── Subscription card ── */
.signup-subs-card {
  background: linear-gradient(135deg, #0e3a53 0%, #1a6b8a 100%) !important;
  box-shadow: 0 3px 12px rgba(14, 58, 83, 0.25) !important;
}

.signup-subs-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.signup-subs-text { flex: 1 1; }

.signup-subs-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 2px 0;
}

.signup-subs-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.72);
  margin: 0;
}

.signup-subs-btn {
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.40);
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s;
}

.signup-subs-btn:active { background: rgba(255,255,255,0.28); }


/* Page Wrapper */
.otp-page-wrapper {
  background-color: #2182b1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  align-items: center;
}

/* Blue Header */
.otp-blue-header {
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #2182b1;
  width: 100%;
  max-width: 600px;
}

.otp-back-arrow {
  color: #ffffff;
  position: absolute;
  top: 2rem;
  left: 1.5rem;
  cursor: pointer;
  font-size: 28px !important;
  transition: opacity 0.2s;
}

.otp-back-arrow:hover {
  opacity: 0.8;
}

.otp-logo-container {
  width: 130px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.otp-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* White Card */
.otp-white-card {
  background-color: #ffffff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding: 32px 24px 48px;
  box-sizing: border-box;
  flex: 1 1;
  width: 100%;
  max-width: 600px;
  margin: -20px auto 0 auto;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title */
.otp-title-section {
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
}

.otp-main-title {
  font-size: 26px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 8px 0;
  font-family: 'Inter', sans-serif;
}

.otp-subtitle {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* WhatsApp hint */
.otp-wa-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 28px;
  width: 100%;
  box-sizing: border-box;
}

.otp-wa-hint span {
  font-size: 13px;
  color: #166534;
  font-weight: 600;
}

/* OTP Inputs Row */
.otp-inputs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}

.otp-digit-input {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  outline: none;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  background-color: #f8fafc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
  cursor: text;
  caret-color: #2182b1;
}

.otp-digit-input::-webkit-outer-spin-button,
.otp-digit-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.otp-digit-input:focus {
  border-color: #2182b1;
  box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.2);
  background-color: #ffffff;
}

/* Resend */
.otp-resend-text {
  font-size: 14px;
  color: #475569;
  margin: 0 0 28px 0;
  text-align: center;
}

.otp-resend-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #2182b1;
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  padding: 0;
}

.otp-resend-btn:hover {
  color: #1a6b93;
}

/* Submit Button */
.otp-submit-btn {
  background-color: #007a87 !important;
  color: #ffffff !important;
  width: 100% !important;
  height: 50px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 122, 135, 0.25) !important;
  transition: background-color 0.2s !important;
  max-width: 600px;
}

.otp-submit-btn:hover {
  background-color: #006670 !important;
}

.otp-submit-btn:disabled {
  background-color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.modal-body {
  background-color: #fff;
  margin: 1rem;
  border-radius: 24px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;  
  width: 100%;

}

.btn-reg-success {
  width: 169px !important;
  height: 48px !important;
  margin-top: 1rem !important;
  border-radius: 15px !important;
}

.btn-reg-home {
  width: 169px !important;
  height: 48px !important;
  margin-top: 0.5rem !important;
  border-radius: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-size: 14px !important;
}

/* Page Wrapper */
.otp-page-wrapper {
  background-color: #2182b1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  align-items: center;
}

/* Blue Header */
.otp-blue-header {
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #2182b1;
  width: 100%;
  max-width: 600px;
}

.otp-back-arrow {
  color: #ffffff;
  position: absolute;
  top: 2rem;
  left: 1.5rem;
  cursor: pointer;
  font-size: 28px !important;
  transition: opacity 0.2s;
}

.otp-back-arrow:hover {
  opacity: 0.8;
}

.otp-logo-container {
  width: 130px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.otp-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* White Card */
.otp-white-card {
  background-color: #ffffff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding: 32px 24px 48px;
  box-sizing: border-box;
  flex: 1 1;
  width: 100%;
  max-width: 600px;
  margin: -20px auto 0 auto;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title */
.otp-title-section {
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
}

.otp-main-title {
  font-size: 26px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 8px 0;
  font-family: 'Inter', sans-serif;
}

.otp-subtitle {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* WhatsApp hint */
.otp-wa-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 28px;
  width: 100%;
  box-sizing: border-box;
}

.otp-wa-hint span {
  font-size: 13px;
  color: #166534;
  font-weight: 600;
}

/* OTP Inputs Row */
.otp-inputs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}

.otp-digit-input {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  outline: none;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  background-color: #f8fafc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
  cursor: text;
  caret-color: #2182b1;
}

.otp-digit-input::-webkit-outer-spin-button,
.otp-digit-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.otp-digit-input:focus {
  border-color: #2182b1;
  box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.2);
  background-color: #ffffff;
}

/* Resend */
.otp-resend-text {
  font-size: 14px;
  color: #475569;
  margin: 0 0 28px 0;
  text-align: center;
}

.otp-resend-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #2182b1;
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  padding: 0;
}

.otp-resend-btn:hover {
  color: #1a6b93;
}

/* Submit Button */
.otp-submit-btn {
  background-color: #007a87 !important;
  color: #ffffff !important;
  width: 100% !important;
  height: 50px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 122, 135, 0.25) !important;
  transition: background-color 0.2s !important;
  max-width: 600px;
}

.otp-submit-btn:hover {
  background-color: #006670 !important;
}

.otp-submit-btn:disabled {
  background-color: #94a3b8 !important;
  cursor: not-allowed !important;
}
.completeRegistration-bg-screen {
  height: 100vh;
  position: relative;
}

.completeRegistration-bottomBox {
  z-index: 1000;
  position: absolute;
  bottom: 0;
  background-color: #fff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  width: 100%;
}

.completeRegistration-btn {
  width: 13rem;
  height: 3.7rem;
  border-radius: 20px !important;
}

/* Save / Submit button */
.completeRegistration-btn2 {
  flex: 2 1;
  height: 3rem;
  font-size: .8rem !important;
  border-radius: 10px !important;
  text-transform: none !important;
}

.completeRegistration-title {
  padding: 1rem;
  padding-bottom: 0;
  margin-bottom: 15px;
}

.error-message {
  margin: 2px 0px;
  color: red;
}

/* ── Button row: Save + Back Home side by side ── */
.completeRegistration-btn-body2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

/* ── Back Home button — filled blue, same height as Save ── */
.cr-back-home-btn {
  flex: 1 1;
  min-width: 130px;
  height: 3rem;
  font-size: .8rem !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0E3A53, #2182B1) !important;
  color: #fff !important;
  text-transform: none !important;
  box-shadow: 0 3px 10px rgba(14, 58, 83, 0.25) !important;
}

/* Mobile: stack buttons full-width */
@media (max-width: 480px) {
  .completeRegistration-btn-body2 {
    flex-direction: column;
  }
  .completeRegistration-btn2,
  .cr-back-home-btn {
    flex: initial;
    width: 100%;
  }
}

.css-1a7t9kz-MuiButtonBase-root-MuiButton-root:focus {
  color: #fff !important;
  background-color: #2182b1 !important;
}

.heading {
  position: relative;
  top: 15rem;
  border-radius: 21px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heading-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inp-dropdown {
  width: 5rem;
  height: 3rem;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  padding: 1rem;
  position: relative;
  left: 0rem;
  box-shadow: -2px 0px 5px rgba(22, 107, 142, 0.25);
  border: medium none currentColor;
  border: initial;
  outline: medium none invert;
  outline: initial;
  border-right: solid 1px black;
}

.inp-number {
  outline: medium none invert;
  outline: initial;
  border: medium none currentColor;
  border: initial;
  width: 77vw;
  height: 3rem;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px;
  padding: 1rem;
  box-shadow: -2px 0px 5px rgba(22, 107, 142, 0.25);
}

.dropdown-mob-num {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 0rem;
  margin-bottom: 10px;
}

.completeRegistration-form-body {
  padding: 1rem;
  padding-top: 0;
  padding-bottom: 0;
}

.reg-inp {
  outline: medium none invert;
  outline: initial;
  border: medium none currentColor;
  border: initial;
  width: 100%;
  height: 3rem;
  border-radius: 50px;
  padding: 1rem;
  box-shadow: -2px 0px 5px rgba(22, 107, 142, 0.25);
  margin-bottom: 10px;
}

.reg-textarea {
  outline: medium none invert;
  outline: initial;
  border: medium none currentColor;
  border: initial;
  width: 100%;
  border-radius: 20px;
  padding: 1rem;
  box-shadow: -2px 0px 5px rgba(22, 107, 142, 0.25);
  margin-bottom: 10px;
}

.completeRegistration-heading {
  position: relative;
  top: 4rem;
  border-radius: 21px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 14px;
  font-weight: 600 !important;
  line-height: 17px;
  color: #333333;
  margin-bottom: 10px !important;
}

/* ── Tappable image upload card ── */
.cr-upload-card {
  width: 100%;
  min-height: 280px;
  border-radius: 18px;
  border: 2px dashed #b8d4e8;
  background: linear-gradient(135deg, #f0f7fb, #e8f4fd);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 20px 18px;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.cr-upload-card:active {
  background: linear-gradient(135deg, #e0f0f8, #d4ecf7);
}

/* Filled state — same fixed height so both cards match */
.cr-upload-card--filled {
  min-height: 280px;
  border: 2px solid #b8d4e8;
  padding: 0;
  background: #f0f7fb;
}

.cr-upload-preview {
  width: 100%;
  height: 100%;
  min-height: 276px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.cr-upload-icon {
  font-size: 44px !important;
  color: #2182B1 !important;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.cr-upload-hint-ml {
  font-size: 12px !important;
  color: #4a7a9b !important;
  font-weight: 500 !important;
  text-align: center !important;
  line-height: 1.7 !important;
  margin-bottom: 12px !important;
}

.cr-upload-tap {
  font-size: 11px !important;
  color: #2182B1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  background: rgba(33, 130, 177, 0.12);
  border-radius: 20px;
  padding: 5px 16px;
  flex-shrink: 0;
}

/* Optional secondary Choose File / Change Image button */
.cr-choose-btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border-radius: 20px !important;
  border-color: #b8d4e8 !important;
  color: #2182B1 !important;
  padding: 4px 16px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ── Inline success panel ── */
.cr-success-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 24px 28px;
  text-align: center;
}

.cr-success-icon {
  font-size: 64px !important;
  color: #10b981 !important;
  margin-bottom: 14px;
}

.cr-success-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0E3A53 !important;
  margin-bottom: 12px !important;
}

.cr-success-msg {
  font-size: 14px !important;
  color: #4a7a9b !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  margin-bottom: 28px !important;
}

.cr-home-btn {
  background: linear-gradient(135deg, #0E3A53, #2182B1) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  padding: 12px 36px !important;
  box-shadow: 0 4px 18px rgba(14, 58, 83, 0.28) !important;
  letter-spacing: 0.3px;
}

.hide {
    display: none !important;
}

.no-data {
    margin-top: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.no-data-text {
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 16.94px !important;
    text-align: center;
}

.public-div {
    width: 100%;

    border-radius: 4px;
    color: #fff;
    text-align: center;
    height: 40px;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.public-div-small {
    width: 100%;
    border-radius: 2px;
    color: #fff;
    text-align: center;
    height: 42px;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 4px;
    box-sizing: border-box;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    cursor: pointer;
    -webkit-filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.3));
            filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.3));
}

@media (max-width: 600px) {
    /* ── Glass Crystal Buttons row ── */
    .glass-btn-row {
        display: flex;
        gap: 10px;
        padding: 10px 8px 10px;
        box-sizing: border-box;
        margin-bottom: 0;
    }

    .glass-btn {
        flex: 1 1;
        height: 31px;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.3px;
        color: #ffffff;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        will-change: transform;
        transition:
            box-shadow 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out;
        -webkit-tap-highlight-color: transparent;
    }

    .glass-btn-icon {
        font-size: 16px !important;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        color: #ffffff;
        -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.40));
                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.40));
    }

    .glass-btn-label {
        position: relative;
        z-index: 2;
        line-height: 1;
        text-shadow: 0 1px 3px rgba(0,0,0,0.40);
    }

    /* Glossy top-highlight reflection */
    .glass-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(
            180deg,
            rgba(255,255,255,0.22) 0%,
            rgba(255,255,255,0.06) 60%,
            rgba(255,255,255,0.00) 100%
        );
        border-radius: 10px 10px 50% 50% / 10px 10px 14px 14px;
        pointer-events: none;
        z-index: 1;
    }

    /* Side lighting + bottom inner glow */
    .glass-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg,
                rgba(255,255,255,0.10) 0%,
                rgba(255,255,255,0.00) 18%,
                rgba(255,255,255,0.00) 82%,
                rgba(255,255,255,0.08) 100%
            );
        border-radius: 10px;
        pointer-events: none;
        z-index: 1;
    }

    /* Influencers — Dark Royal Blue → Lighter Blue crystal */
    .glass-btn--influencers {
        background: linear-gradient(
            145deg,
            #071e52 0%,
            #0b2e78 35%,
            #1550b0 70%,
            #1c64c8 100%
        );
        border: 1px solid rgba(60,120,240,0.32);
        box-shadow:
            0 4px 14px rgba(7,30,82,0.60),
            0 1px 4px rgba(0,0,0,0.28),
            inset 0 1px 0 rgba(255,255,255,0.18),
            inset 1px 0 0 rgba(255,255,255,0.10),
            inset -1px 0 0 rgba(255,255,255,0.07),
            inset 0 -1px 0 rgba(0,0,0,0.22);
    }

    /* Recognitions — Dark Navy → Dark Green crystal */
    .glass-btn--recognitions {
        background: linear-gradient(
            145deg,
            #041a10 0%,
            #072e18 35%,
            #0d5228 70%,
            #116634 100%
        );
        border: 1px solid rgba(20,140,70,0.38);
        box-shadow:
            0 4px 14px rgba(4,26,16,0.65),
            0 1px 4px rgba(0,0,0,0.28),
            0 0 10px rgba(17,102,52,0.30),
            inset 0 1px 0 rgba(255,255,255,0.16),
            inset 1px 0 0 rgba(255,255,255,0.09),
            inset -1px 0 0 rgba(255,255,255,0.06),
            inset 0 -1px 0 rgba(0,0,0,0.24);
    }

    /* Hover: lift + brighten */
    .glass-btn:hover {
        -webkit-transform: translateY(-3px) scale(1.03);
                transform: translateY(-3px) scale(1.03);
        -webkit-filter: brightness(1.12);
                filter: brightness(1.12);
    }
    .glass-btn--influencers:hover {
        box-shadow:
            0 8px 22px rgba(7,30,82,0.68),
            0 2px 6px rgba(0,0,0,0.30),
            inset 0 1px 0 rgba(255,255,255,0.24),
            inset 1px 0 0 rgba(255,255,255,0.14),
            inset -1px 0 0 rgba(255,255,255,0.10);
    }
    .glass-btn--recognitions:hover {
        box-shadow:
            0 8px 22px rgba(4,26,16,0.72),
            0 2px 6px rgba(0,0,0,0.30),
            0 0 14px rgba(17,102,52,0.40),
            inset 0 1px 0 rgba(255,255,255,0.20),
            inset 1px 0 0 rgba(255,255,255,0.12),
            inset -1px 0 0 rgba(255,255,255,0.08);
    }

    /* Active / tap: press down */
    .glass-btn:active {
        -webkit-transform: translateY(1px) scale(0.96);
                transform: translateY(1px) scale(0.96);
        -webkit-filter: brightness(0.90);
                filter: brightness(0.90);
    }

    /* ── Layout 1 mobile: reorder home-top-grid sections
       New order: AdCarousel → 6 buttons → HeroCarousel → SmallCategorySlider
       Uses flex order; scoped to body[data-layout1="true"] so List layout is untouched.
       Tablet (601px+) and desktop (1024px+) override display back to block/grid. ── */
    body[data-layout1="true"] .home-top-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    body[data-layout1="true"] .home-top-grid .home-left-city  { order: 1 !important; }
    body[data-layout1="true"] .home-top-grid .home-services   { order: 2 !important; }
    body[data-layout1="true"] .home-top-grid .home-right-slide { order: 3 !important; }
    body[data-layout1="true"] .home-top-grid .home-slider     { order: 4 !important; }

    /* ── Move second slideshow up ~2mm ── */
    body[data-layout1="true"] .home-top-grid .home-right-slide > .MuiBox-root {
        margin-top: 2px !important;
    }

    /* ── Move five-button slider up ~2mm ── */
    body[data-layout1="true"] .home-top-grid .home-slider {
        margin-top: -4px !important;
    }

    /* ── Pull Trending Categories section up ~5mm ── */
    body[data-layout1="true"] .home-trending-section {
        margin-top: -5mm !important;
    }

    /* ── Layout: top slideshow ── */
    .home-left-city-carousel-wrapper {
        height: 148px !important;
        width: calc(100% - 34px) !important;
        margin: 0 17px !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    .home-left-city-carousel-wrapper .carousel .slide > div {
        height: 148px !important;
        min-height: 148px !important;
    }

    .home-left-city-carousel-wrapper .carousel .slide > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    .home-left-city {
        width: 100% !important;
        margin: 0;
    }

    /* ── Layout 2: five buttons in a single horizontal row ── */
    .layout2-service-row {
        padding: 8px 17px 6px;
        box-sizing: border-box;
    }

    .layout2-service-row .service-panel {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .layout2-service-row .service-grid-layout2.MuiGrid-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Four side buttons: all equal flex */
    .layout2-service-row .service-grid-layout2 .l2-btn-equal.MuiGrid-item {
        flex: 1 1 !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    .layout2-service-row .public-div-small {
        font-size: 9px !important;
        height: 38px !important;
        padding: 3px 2px !important;
        flex-direction: column !important;
        gap: 2px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .layout2-service-row .public-div-small svg {
        margin-right: 0 !important;
        font-size: 16px !important;
        flex-shrink: 0;
    }

    /* അറിവും ആരോഗ്യവും — 4th button (last), slightly smaller font to keep single line */
    .layout2-service-row .service-grid-layout2 .l2-btn-equal:nth-child(4) .public-div-small {
        font-size: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ── Layout 2: two equal category buttons side by side ── */
    .layout2-all-categories-btn-wrap {
        padding: 0 17px 8px;
        box-sizing: border-box;
        display: flex;
        gap: 8px;
    }

    /* Shared base for both category buttons */
    .layout2-all-categories-btn,
    .layout2-all-subcategories-btn {
        flex: 1 1;
        height: 49px;
        border-radius: 6px;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.3px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-sizing: border-box;
        will-change: transform;
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out;
    }

    .layout2-all-categories-btn {
        background-color: #8E24AA;
        box-shadow: 0 4px 10px rgba(142, 36, 170, 0.35);
    }

    .layout2-all-subcategories-btn {
        background-color: #1976D2;
        box-shadow: 0 4px 10px rgba(25, 118, 210, 0.35);
    }

    .layout2-all-categories-btn:hover {
        -webkit-transform: translateY(-3px) scale(1.02);
                transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 20px rgba(142, 36, 170, 0.40);
        -webkit-filter: brightness(1.08);
                filter: brightness(1.08);
    }

    .layout2-all-categories-btn:active {
        -webkit-transform: translateY(1px) scale(0.97);
                transform: translateY(1px) scale(0.97);
        box-shadow: 0 2px 6px rgba(142, 36, 170, 0.25);
        -webkit-filter: brightness(0.92);
                filter: brightness(0.92);
    }

    .layout2-all-subcategories-btn:hover {
        -webkit-transform: translateY(-3px) scale(1.02);
                transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 20px rgba(25, 118, 210, 0.40);
        -webkit-filter: brightness(1.08);
                filter: brightness(1.08);
    }

    .layout2-all-subcategories-btn:active {
        -webkit-transform: translateY(1px) scale(0.97);
                transform: translateY(1px) scale(0.97);
        box-shadow: 0 2px 6px rgba(25, 118, 210, 0.25);
        -webkit-filter: brightness(0.92);
                filter: brightness(0.92);
    }

    /* ── Layout 2 mobile: Trending Categories grid — balanced left/right alignment ── */
    body[data-layout2="true"] .home-trending-section > .MuiGrid-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        /* Neutralise MUI's negative margin so the grid sits flush with the section edges */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body[data-layout2="true"] .home-trending-section > .MuiGrid-container > .MuiGrid-item {
        padding-left: 6px !important;
        padding-right: 6px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* ── Layout 2 mobile: glass-btn-row — match trending grid side padding ── */
    body[data-layout2="true"] .home-trending-section .glass-btn-row {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .layout2-five-buttons-row {
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        z-index: 10;
    }

    .layout2-five-buttons-row > div {
        margin: 0 !important;
        padding: 0 17px !important;
        overflow: visible !important;
    }

    /* ── Layout 1 mobile: second carousel (HeroCarousel / .home-right-slide)
       Base xs height from Carousel.jsx MUI sx = 297px.
       −10% → 267px. Scoped to mobile only via this media query. */
    .home-right-slide .carousel .slide > div {
        height: 267px !important;
        min-height: 267px !important;
    }

    .home-right-slide .carousel .slide > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    /* ── Layout 2: HeroCarousel — cover-fill images ── */
    .layout2-hero-carousel {
        margin-top: 6px;
    }

    /* Layout 2 mobile: second carousel (HeroCarousel / .hero-carousel-layout2)
       Base xs height from Carousel.jsx MUI sx = 297px.
       −10% → 267px. Scoped to mobile only via this media query. */
    .hero-carousel-layout2 .carousel .slide > div {
        height: 267px !important;
        min-height: 267px !important;
    }

    /* Every image fills the container cleanly — cover-style, centered */
    .hero-carousel-layout2 .carousel .slide > div img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    /* ── Inner shadow overlay for both slideshows (mobile) ── */
    .slideshow-inner-shadow {
        position: absolute;
        inset: 0;
        box-shadow: inset 0 0 18px 4px rgba(0, 0, 0, 0.18);
        border-radius: inherit;
        pointer-events: none;
        z-index: 2;
    }

    /* ── Layout: six buttons panel ── */
    .public-div-small {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 4px !important;
        font-size: 10.5px !important;
    }

    .service-panel .MuiGrid-container {
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .service-panel .MuiGrid-item {
        padding: 0.5mm !important;
    }

    .home-services .service-panel {
        width: calc(100% - 34px) !important;
        margin: 0.4rem auto !important;
        padding: 0 !important;
    }

    /* ════════════════════════════════════════════════════════════
       PREMIUM TOUCH / HOVER INTERACTION  —  mobile only
       Standard:  hover  → lift + scale-up + glow
                  active → press-down + scale-down + dim
       Timing: 280ms spring easing (slight overshoot = premium feel)
    ════════════════════════════════════════════════════════════ */

    /* ── Shared GPU hint for every interactive target ── */
    .public-div-small,
    .MuiCard-root,
    .btn-call,
    .btn-whatsapp,
    .btn-view,
    .btn-direction,
    .btn-share,
    .product-card-img-wrap,
    .small-cat-item,
    .social-media,
    .bottom-icon-link,
    .bottom_container_box,
    .bottom_icon_box,
    .bottom-nav > *,
    .img-parent,
    .clv-list-card,
    .list-card .MuiButton-root,
    .product-details-header .MuiButton-root,
    .product-catalog-section button[type="button"] {
        will-change: transform;
    }

    /* ── Cards: category cards, product cards, listing cards ── */
    .MuiCard-root {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .MuiCard-root:hover {
        -webkit-transform: translateY(-3px) scale(1.03) !important;
                transform: translateY(-3px) scale(1.03) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
        -webkit-filter: brightness(1.04) !important;
                filter: brightness(1.04) !important;
    }
    .MuiCard-root:active {
        -webkit-transform: translateY(1px) scale(0.96) !important;
                transform: translateY(1px) scale(0.96) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14) !important;
        -webkit-filter: brightness(0.94) !important;
                filter: brightness(0.94) !important;
    }

    /* ── Six colored category buttons ── */
    .public-div-small {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .public-div-small:hover {
        -webkit-transform: translateY(-3px) scale(1.04) !important;
                transform: translateY(-3px) scale(1.04) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
        -webkit-filter: brightness(1.08) !important;
                filter: brightness(1.08) !important;
    }
    .public-div-small:active {
        -webkit-transform: translateY(1px) scale(0.95) !important;
                transform: translateY(1px) scale(0.95) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18) !important;
        -webkit-filter: brightness(0.92) !important;
                filter: brightness(0.92) !important;
    }

    /* ── Call / WhatsApp / View / Direction / Share buttons ── */
    .btn-call,
    .btn-whatsapp,
    .btn-view,
    .btn-direction,
    .btn-share {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .btn-call:hover,
    .btn-whatsapp:hover,
    .btn-view:hover,
    .btn-direction:hover,
    .btn-share:hover {
        -webkit-transform: translateY(-2px) scale(1.04) !important;
                transform: translateY(-2px) scale(1.04) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20) !important;
        -webkit-filter: brightness(1.10) !important;
                filter: brightness(1.10) !important;
    }
    .btn-call:active,
    .btn-whatsapp:active,
    .btn-view:active,
    .btn-direction:active,
    .btn-share:active {
        -webkit-transform: translateY(1px) scale(0.95) !important;
                transform: translateY(1px) scale(0.95) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14) !important;
        -webkit-filter: brightness(0.90) !important;
                filter: brightness(0.90) !important;
    }

    /* ── Shop / business image wrapper ── */
    .product-card-img-wrap {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .product-card-img-wrap:hover {
        -webkit-transform: translateY(-2px) scale(1.03) !important;
                transform: translateY(-2px) scale(1.03) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
    }
    .product-card-img-wrap:active {
        -webkit-transform: translateY(1px) scale(0.96) !important;
                transform: translateY(1px) scale(0.96) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    }

    /* ── SmallCategorySlider: prevent last tile clipping on mobile ── */
    .small-cat-item > .MuiBox-root {
        overflow: visible !important;
    }

    /* Force the slider scroll container to not overflow its padded parent */
    .home-slider > div > .MuiBox-root {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 2px !important;
        overflow: hidden !important;
    }

    /* layout2 scroll container: allow overflow so tile shadows are fully visible */
    .layout2-five-buttons-row > div > .MuiBox-root {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    /* Each tile in home-slider: shrink slightly so all 5 + 4 separators fit without clipping */
    .home-slider .small-cat-item {
        width: calc(19% - 1px) !important;
        flex-shrink: 0 !important;
    }

    /* layout2 tiles: let JSX sx width control sizing, only ensure no shrink */
    .layout2-five-buttons-row .small-cat-item {
        flex-shrink: 0 !important;
    }

    /* ── SmallCategorySlider tiles ── */
    .small-cat-item {
        transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .small-cat-item:hover {
        -webkit-transform: translateY(-3px) scale(1.05) !important;
                transform: translateY(-3px) scale(1.05) !important;
        -webkit-filter: brightness(1.06) !important;
                filter: brightness(1.06) !important;
    }
    .small-cat-item:active {
        -webkit-transform: translateY(1px) scale(0.94) !important;
                transform: translateY(1px) scale(0.94) !important;
        -webkit-filter: brightness(0.93) !important;
                filter: brightness(0.93) !important;
    }

    /* ── Social media icon buttons (ProductDetails) ── */
    .social-media {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .social-media:hover {
        -webkit-transform: translateY(-3px) scale(1.08) !important;
                transform: translateY(-3px) scale(1.08) !important;
        box-shadow: 0 8px 20px rgba(22, 107, 142, 0.30) !important;
        -webkit-filter: brightness(1.06) !important;
                filter: brightness(1.06) !important;
    }
    .social-media:active {
        -webkit-transform: translateY(1px) scale(0.93) !important;
                transform: translateY(1px) scale(0.93) !important;
        box-shadow: 0 2px 5px rgba(22, 107, 142, 0.15) !important;
        -webkit-filter: brightness(0.92) !important;
                filter: brightness(0.92) !important;
    }

    /* ── Bottom footer social icon links ── */
    .bottom-icon-link {
        display: inline-flex !important;
        transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .bottom-icon-link:hover {
        -webkit-transform: translateY(-3px) scale(1.15) !important;
                transform: translateY(-3px) scale(1.15) !important;
        -webkit-filter: brightness(1.15) !important;
                filter: brightness(1.15) !important;
    }
    .bottom-icon-link:active {
        -webkit-transform: translateY(1px) scale(0.88) !important;
                transform: translateY(1px) scale(0.88) !important;
        -webkit-filter: brightness(0.88) !important;
                filter: brightness(0.88) !important;
    }

    /* ── Footer text links (Terms, Subscription, About Us) ── */
    .bottom_container_box {
        cursor: pointer !important;
        transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .bottom_container_box:hover {
        -webkit-transform: translateY(-2px) scale(1.04) !important;
                transform: translateY(-2px) scale(1.04) !important;
        -webkit-filter: brightness(1.12) !important;
                filter: brightness(1.12) !important;
    }
    .bottom_container_box:active {
        -webkit-transform: translateY(1px) scale(0.94) !important;
                transform: translateY(1px) scale(0.94) !important;
        -webkit-filter: brightness(0.88) !important;
                filter: brightness(0.88) !important;
    }

    /* ── Bottom nav Add Business center button ── */
    .bottom_icon_box {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .bottom_icon_box:hover {
        -webkit-transform: translateY(-3px) scale(1.08) !important;
                transform: translateY(-3px) scale(1.08) !important;
        box-shadow: 0 8px 20px rgba(33, 130, 177, 0.35) !important;
    }
    .bottom_icon_box:active {
        -webkit-transform: translateY(1px) scale(0.91) !important;
                transform: translateY(1px) scale(0.91) !important;
        box-shadow: 0 2px 6px rgba(33, 130, 177, 0.20) !important;
    }

    /* ── Bottom nav icon items (Home, Categories, Bookmarks, Profile) ── */
    .bottom-nav > * {
        transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .bottom-nav > *:hover {
        -webkit-transform: translateY(-3px) scale(1.12) !important;
                transform: translateY(-3px) scale(1.12) !important;
        -webkit-filter: brightness(1.10) !important;
                filter: brightness(1.10) !important;
    }
    .bottom-nav > *:active {
        -webkit-transform: translateY(1px) scale(0.86) !important;
                transform: translateY(1px) scale(0.86) !important;
        -webkit-filter: brightness(0.88) !important;
                filter: brightness(0.88) !important;
    }

    /* ── Catalogue image tiles (ProductDetails) ── */
    .img-parent {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .img-parent:hover {
        -webkit-transform: translateY(-2px) scale(1.03) !important;
                transform: translateY(-2px) scale(1.03) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20) !important;
    }
    .img-parent:active {
        -webkit-transform: translateY(1px) scale(0.95) !important;
                transform: translateY(1px) scale(0.95) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14) !important;
    }

    /* ── Catalogue category filter buttons ── */
    .product-catalog-section button[type="button"] {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .product-catalog-section button[type="button"]:hover {
        -webkit-transform: translateY(-2px) scale(1.05) !important;
                transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16) !important;
        -webkit-filter: brightness(1.06) !important;
                filter: brightness(1.06) !important;
    }
    .product-catalog-section button[type="button"]:active {
        -webkit-transform: translateY(1px) scale(0.95) !important;
                transform: translateY(1px) scale(0.95) !important;
        -webkit-filter: brightness(0.92) !important;
                filter: brightness(0.92) !important;
    }

    /* ── Category list view cards (list mode) ── */
    .clv-list-card {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .clv-list-card:hover {
        -webkit-transform: translateY(-3px) scale(1.02) !important;
                transform: translateY(-3px) scale(1.02) !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14) !important;
    }
    .clv-list-card:active {
        -webkit-transform: translateY(1px) scale(0.97) !important;
                transform: translateY(1px) scale(0.97) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
    }

    /* ── MyListingCard action buttons (Upgrade Now, Add Now, Edit/Upload) ── */
    .list-card .MuiButton-root {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .list-card .MuiButton-root:hover {
        -webkit-transform: translateY(-2px) scale(1.03) !important;
                transform: translateY(-2px) scale(1.03) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
        -webkit-filter: brightness(1.08) !important;
                filter: brightness(1.08) !important;
    }
    .list-card .MuiButton-root:active {
        -webkit-transform: translateY(1px) scale(0.96) !important;
                transform: translateY(1px) scale(0.96) !important;
        -webkit-filter: brightness(0.90) !important;
                filter: brightness(0.90) !important;
    }

    /* ── ProductDetails header Go to Home button ── */
    .product-details-header .MuiButton-root {
        transition: box-shadow 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 280ms ease-out,
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .product-details-header .MuiButton-root:hover {
        -webkit-transform: translateY(-2px) scale(1.05) !important;
                transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 6px 16px rgba(255, 255, 255, 0.20) !important;
        -webkit-filter: brightness(1.12) !important;
                filter: brightness(1.12) !important;
    }
    .product-details-header .MuiButton-root:active {
        -webkit-transform: translateY(1px) scale(0.95) !important;
                transform: translateY(1px) scale(0.95) !important;
        -webkit-filter: brightness(0.86) !important;
                filter: brightness(0.86) !important;
    }

    /* ── Catalogue layout toggle buttons ── */
    .product-catalog-section [style*="cursor: pointer"] {
        transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out !important;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 280ms ease-out,
                    -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    -webkit-filter 280ms ease-out !important;
    }
    .product-catalog-section [style*="cursor: pointer"]:hover {
        -webkit-transform: translateY(-2px) scale(1.10) !important;
                transform: translateY(-2px) scale(1.10) !important;
        -webkit-filter: brightness(1.08) !important;
                filter: brightness(1.08) !important;
    }
    .product-catalog-section [style*="cursor: pointer"]:active {
        -webkit-transform: translateY(1px) scale(0.90) !important;
                transform: translateY(1px) scale(0.90) !important;
        -webkit-filter: brightness(0.90) !important;
                filter: brightness(0.90) !important;
    }
}

/* Duplicate bottom service buttons — hidden on all screen sizes.
   The canonical buttons live inside .home-services / .home-top-grid.
   Mobile was already hiding these; this extends the rule to tablet + desktop. */
.home-service-buttons-row {
    display: none !important;
}

/* Desktop glass btn row — hidden on mobile/tablet, shown only via desktop breakpoint */
.desktop-glass-btn-row {
    display: none;
}

.bottom_container {
    color: #fff;
    font-size: 12px !important;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL HOVER / ACTIVE INTERACTION  —  all screen sizes
   Identical animation to the mobile version, now applied
   universally so desktop gets the same premium feel.
   Timing: 280ms spring easing (slight overshoot = premium feel)
════════════════════════════════════════════════════════════ */

/* GPU hint for every interactive target */
.public-div-small,
.MuiCard-root,
.btn-call,
.btn-whatsapp,
.btn-view,
.btn-direction,
.btn-share,
.product-card-img-wrap,
.small-cat-item,
.social-media,
.bottom-icon-link,
.bottom_container_box,
.bottom_icon_box,
.bottom-nav > *,
.img-parent,
.clv-list-card,
.list-card .MuiButton-root,
.product-details-header .MuiButton-root,
.product-catalog-section button[type="button"] {
    will-change: transform;
}

/* Cards: category cards, product cards, listing cards */
.MuiCard-root {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.MuiCard-root:hover {
    -webkit-transform: translateY(-3px) scale(1.03);
            transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    -webkit-filter: brightness(1.04);
            filter: brightness(1.04);
}
.MuiCard-root:active {
    -webkit-transform: translateY(1px) scale(0.96);
            transform: translateY(1px) scale(0.96);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    -webkit-filter: brightness(0.94);
            filter: brightness(0.94);
}

/* Six colored category buttons */
.public-div-small {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.public-div-small:hover {
    -webkit-transform: translateY(-3px) scale(1.04);
            transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    -webkit-filter: brightness(1.08);
            filter: brightness(1.08);
}
.public-div-small:active {
    -webkit-transform: translateY(1px) scale(0.95);
            transform: translateY(1px) scale(0.95);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    -webkit-filter: brightness(0.92);
            filter: brightness(0.92);
}

/* Call / WhatsApp / View / Direction / Share buttons */
.btn-call,
.btn-whatsapp,
.btn-view,
.btn-direction,
.btn-share {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.btn-call:hover,
.btn-whatsapp:hover,
.btn-view:hover,
.btn-direction:hover,
.btn-share:hover {
    -webkit-transform: translateY(-2px) scale(1.04);
            transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20);
    -webkit-filter: brightness(1.10);
            filter: brightness(1.10);
}
.btn-call:active,
.btn-whatsapp:active,
.btn-view:active,
.btn-direction:active,
.btn-share:active {
    -webkit-transform: translateY(1px) scale(0.95);
            transform: translateY(1px) scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
    -webkit-filter: brightness(0.90);
            filter: brightness(0.90);
}

/* Shop / business image wrapper */
.product-card-img-wrap {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-card-img-wrap:hover {
    -webkit-transform: translateY(-2px) scale(1.03);
            transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.product-card-img-wrap:active {
    -webkit-transform: translateY(1px) scale(0.96);
            transform: translateY(1px) scale(0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* SmallCategorySlider tiles */
.small-cat-item {
    transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.small-cat-item:hover {
    -webkit-transform: translateY(-3px) scale(1.05);
            transform: translateY(-3px) scale(1.05);
    -webkit-filter: brightness(1.06);
            filter: brightness(1.06);
}
.small-cat-item:active {
    -webkit-transform: translateY(1px) scale(0.94);
            transform: translateY(1px) scale(0.94);
    -webkit-filter: brightness(0.93);
            filter: brightness(0.93);
}

/* Social media icon buttons (ProductDetails) */
.social-media {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.social-media:hover {
    -webkit-transform: translateY(-3px) scale(1.08);
            transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 20px rgba(22, 107, 142, 0.30);
    -webkit-filter: brightness(1.06);
            filter: brightness(1.06);
}
.social-media:active {
    -webkit-transform: translateY(1px) scale(0.93);
            transform: translateY(1px) scale(0.93);
    box-shadow: 0 2px 5px rgba(22, 107, 142, 0.15);
    -webkit-filter: brightness(0.92);
            filter: brightness(0.92);
}

/* Bottom footer social icon links */
.bottom-icon-link {
    display: inline-flex;
    transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.bottom-icon-link:hover {
    -webkit-transform: translateY(-3px) scale(1.15);
            transform: translateY(-3px) scale(1.15);
    -webkit-filter: brightness(1.15);
            filter: brightness(1.15);
}
.bottom-icon-link:active {
    -webkit-transform: translateY(1px) scale(0.88);
            transform: translateY(1px) scale(0.88);
    -webkit-filter: brightness(0.88);
            filter: brightness(0.88);
}

/* Footer text links (Terms, Subscription, About Us) */
.bottom_container_box {
    cursor: pointer;
    transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.bottom_container_box:hover {
    -webkit-transform: translateY(-2px) scale(1.04);
            transform: translateY(-2px) scale(1.04);
    -webkit-filter: brightness(1.12);
            filter: brightness(1.12);
}
.bottom_container_box:active {
    -webkit-transform: translateY(1px) scale(0.94);
            transform: translateY(1px) scale(0.94);
    -webkit-filter: brightness(0.88);
            filter: brightness(0.88);
}

/* Bottom nav Add Business center button */
.bottom_icon_box {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bottom_icon_box:hover {
    -webkit-transform: translateY(-3px) scale(1.08);
            transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 20px rgba(33, 130, 177, 0.35);
}
.bottom_icon_box:active {
    -webkit-transform: translateY(1px) scale(0.91);
            transform: translateY(1px) scale(0.91);
    box-shadow: 0 2px 6px rgba(33, 130, 177, 0.20);
}

/* Bottom nav icon items (Home, Categories, Bookmarks, Profile) */
.bottom-nav > * {
    transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.bottom-nav > *:hover {
    -webkit-transform: translateY(-3px) scale(1.12);
            transform: translateY(-3px) scale(1.12);
    -webkit-filter: brightness(1.10);
            filter: brightness(1.10);
}
.bottom-nav > *:active {
    -webkit-transform: translateY(1px) scale(0.86);
            transform: translateY(1px) scale(0.86);
    -webkit-filter: brightness(0.88);
            filter: brightness(0.88);
}

/* Catalogue image tiles (ProductDetails) */
.img-parent {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.img-parent:hover {
    -webkit-transform: translateY(-2px) scale(1.03);
            transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}
.img-parent:active {
    -webkit-transform: translateY(1px) scale(0.95);
            transform: translateY(1px) scale(0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* Catalogue category filter buttons */
.product-catalog-section button[type="button"] {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.product-catalog-section button[type="button"]:hover {
    -webkit-transform: translateY(-2px) scale(1.05);
            transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
    -webkit-filter: brightness(1.06);
            filter: brightness(1.06);
}
.product-catalog-section button[type="button"]:active {
    -webkit-transform: translateY(1px) scale(0.95);
            transform: translateY(1px) scale(0.95);
    -webkit-filter: brightness(0.92);
            filter: brightness(0.92);
}

/* Category list view cards (list mode) */
.clv-list-card {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.clv-list-card:hover {
    -webkit-transform: translateY(-3px) scale(1.02);
            transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}
.clv-list-card:active {
    -webkit-transform: translateY(1px) scale(0.97);
            transform: translateY(1px) scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

/* MyListingCard action buttons */
.list-card .MuiButton-root {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.list-card .MuiButton-root:hover {
    -webkit-transform: translateY(-2px) scale(1.03);
            transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    -webkit-filter: brightness(1.08);
            filter: brightness(1.08);
}
.list-card .MuiButton-root:active {
    -webkit-transform: translateY(1px) scale(0.96);
            transform: translateY(1px) scale(0.96);
    -webkit-filter: brightness(0.90);
            filter: brightness(0.90);
}

/* ProductDetails header Go to Home button */
.product-details-header .MuiButton-root {
    transition: box-shadow 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 280ms ease-out,
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.product-details-header .MuiButton-root:hover {
    -webkit-transform: translateY(-2px) scale(1.05);
            transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.20);
    -webkit-filter: brightness(1.12);
            filter: brightness(1.12);
}
.product-details-header .MuiButton-root:active {
    -webkit-transform: translateY(1px) scale(0.95);
            transform: translateY(1px) scale(0.95);
    -webkit-filter: brightness(0.86);
            filter: brightness(0.86);
}

/* Catalogue layout toggle buttons */
.product-catalog-section [style*="cursor: pointer"] {
    transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out;
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 280ms ease-out,
                -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                -webkit-filter 280ms ease-out;
}
.product-catalog-section [style*="cursor: pointer"]:hover {
    -webkit-transform: translateY(-2px) scale(1.10);
            transform: translateY(-2px) scale(1.10);
    -webkit-filter: brightness(1.08);
            filter: brightness(1.08);
}
.product-catalog-section [style*="cursor: pointer"]:active {
    -webkit-transform: translateY(1px) scale(0.90);
            transform: translateY(1px) scale(0.90);
    -webkit-filter: brightness(0.90);
            filter: brightness(0.90);
}

/* Inner shadow for both slideshows — desktop */
@media (min-width: 1024px) {
    .slideshow-inner-shadow {
        position: absolute;
        inset: 0;
        box-shadow: inset 0 0 22px 6px rgba(0, 0, 0, 0.13);
        border-radius: inherit;
        pointer-events: none;
        z-index: 2;
        display: block !important;
    }
}

/* ── Desktop: narrow shop image, wider info panel ── */
@media (min-width: 960px) {
    /* Shrink image column from xs=5 (41.6%) to ~33% */
    .product-card-left-panel.MuiGrid-item {
        flex-basis: 33.333% !important;
        max-width: 33.333% !important;
    }
    /* Expand info column to fill the remaining ~67% */
    .product-card-left-panel.MuiGrid-item + .MuiGrid-item {
        flex-basis: 66.666% !important;
        max-width: 66.666% !important;
    }
}

.bottom_container_box {
    display: flex;
    align-items: center;
}

.bottom_container_icon {
    color: #fff;
    font-size: 16px !important;
}

.control-dots {
    visibility: hidden !important;
}

/* Desktop-only top grid: applies only on larger screens */
@media (min-width: 1024px) {
    .home-top-grid {
        display: grid;
        width: 100%;
        max-width: none;
        /* 50/50 split matches the 6-column Trending Categories grid (3 left + 3 right) */
        grid-template-columns: 50fr 50fr;
        grid-template-areas:
            "city    slide"
            "slider  slide"
            "services slide";
        grid-gap: 0;
        gap: 0;
        align-items: start;
        margin: 0;
        /* 17px matches Trending Categories margin exactly */
        padding: 0 17px 16px 17px;
        box-sizing: border-box;
    }

    .home-left-city {
        grid-area: city;
        width: 100%;
        overflow: hidden;
        background-color: transparent;
        display: flex;
        align-items: flex-start;
        padding-right: 8px;
        box-sizing: border-box;
    }

    /* Align left slideshow top edge with right slideshow (MUI inline md=168px) */
    .home-left-city > .MuiBox-root {
        margin-top: 168px !important;
    }

    /* Override MUI inline md height — +10% from 233px → 256px */
    .home-left-city-carousel-wrapper .carousel .slide > div {
        height: 256px !important;
        min-height: 256px !important;
    }

    /* Left slideshow — +10% from 233px → 256px */
    .home-left-city-carousel-wrapper {
        overflow: hidden;
        border-radius: 12px;
        height: 256px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(0, 0, 0, 0.05);
        width: 100%;
        position: relative;
        flex-shrink: 0;
    }

    .home-left-city img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    /* Right slideshow spans all 3 rows */
    .home-right-slide {
        grid-area: slide;
        grid-row: 1 / 4;
        width: 100%;
        padding-left: 8px;
        box-sizing: border-box;
        -webkit-filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16));
                filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16));
    }

    .home-right-slide img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Right slider: +10% from 536px → 590px */
    .home-right-slide .carousel .slide > div {
        height: 590px !important;
        min-height: 590px !important;
    }

    .home-right-slide .carousel .slide > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    /* 5 image tiles: sits directly below left slideshow */
    .home-slider {
        grid-area: slider;
        width: 100%;
        padding-right: 8px;
        box-sizing: border-box;
        margin-top: 8px;
    }

    /* Five feature tiles: ~5% height reduction, full width to match button rows */
    .home-slider .small-cat-item > .MuiBox-root {
        aspect-ratio: 20 / 19 !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 6 colored buttons: bottom-aligned, sits directly below 5 tiles */
    .home-services {
        grid-area: services;
        width: 100%;
        align-self: end;
        padding-right: 8px;
        box-sizing: border-box;
    }

    .service-panel {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin: 0 !important;
        position: static !important;
        padding: 2px 0 0 0 !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .service-panel .MuiGrid-container {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Six buttons: ~10% height reduction (52→47px) */
    .service-panel .public-div-small {
        width: 100%;
        margin-bottom: 0px !important;
        height: 47px;
        font-size: 13px;
        border-radius: 5px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
        -webkit-filter: none !important;
                filter: none !important;
    }

    /* ══════════════════════════════════════════════════════════════════
       3D CRYSTAL GLASS OVERRIDE — Desktop List Layout Only
       body[data-layout2="true"] ensures Grid layout is 100% untouched.
       
       KEY: background-color is set as React inline style, which beats
       class-based 'background'. So we paint the crystal gradient via
       a ::before pseudo-element that covers the full button surface,
       sitting on top of the inline flat color — this always wins.
    ══════════════════════════════════════════════════════════════════ */

    /* Shared 3D structure for all 6 buttons */
    body[data-layout2="true"] .home-services .service-panel .public-div-small {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        /* 3D outer shadow: deep drop + ambient lift */
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.65),
            0 3px 7px rgba(0, 0, 0, 0.50),
            inset 1px 1px 0px rgba(255, 255, 255, 0.80),  /* TOP-LEFT BRIGHT CRYSTAL RIM */
            inset -2px -2px 0px rgba(0, 0, 0, 0.55)       /* BOTTOM-RIGHT DARK EDGE */
            !important;
        -webkit-filter: none !important;
                filter: none !important;
        transition:
            box-shadow 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out !important;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out !important;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out !important;
    }

    /* ::before = Full-surface crystal gradient overlay (covers inline backgroundColor) */
    body[data-layout2="true"] .home-services .service-panel .public-div-small::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
        z-index: 1 !important;
        border-radius: inherit !important;
        /* DARK BOTTOM-RIGHT → MID-TONE CENTER → BRIGHT TOP-LEFT */
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.18) 14%,
            rgba(255, 255, 255, 0.00) 30%,
            rgba(0, 0, 0, 0.00)       55%,
            rgba(0, 0, 0, 0.28)       80%,
            rgba(0, 0, 0, 0.52)       100%
        ) !important;
        /* Second inner shadows strengthen the 3D rim */
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.90),
            inset 1px 0 2px rgba(255, 255, 255, 0.65),
            inset -1px -1px 4px rgba(0, 0, 0, 0.60) !important;
    }

    /* ::after = Diagonal crystal glare line across button surface */
    body[data-layout2="true"] .home-services .service-panel .public-div-small::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 55% !important;
        height: 100% !important;
        pointer-events: none !important;
        z-index: 2 !important;
        /* A sharp diagonal shine strip — light sweeping top-left */
        background: linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0.55) 18%,
            rgba(255, 255, 255, 0.10) 30%,
            transparent 45%
        ) !important;
    }

    /* Keep text/icons above the overlay layers */
    body[data-layout2="true"] .home-services .service-panel .public-div-small > *,
    body[data-layout2="true"] .home-services .service-panel .public-div-small svg,
    body[data-layout2="true"] .home-services .service-panel .public-div-small span {
        position: relative !important;
        z-index: 3 !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75) !important;
        color: #fff !important;
    }

    /* Hover: lift + brighten crystal */
    body[data-layout2="true"] .home-services .service-panel .public-div-small:hover {
        -webkit-transform: translateY(-2px) !important;
                transform: translateY(-2px) !important;
        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.80),
            0 4px 10px rgba(0, 0, 0, 0.55),
            inset 1px 1px 0px rgba(255, 255, 255, 1.00),
            inset -2px -2px 0px rgba(0, 0, 0, 0.60)
            !important;
        -webkit-filter: brightness(1.12) !important;
                filter: brightness(1.12) !important;
    }
    body[data-layout2="true"] .home-services .service-panel .public-div-small:hover::before {
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.25) 14%,
            rgba(255, 255, 255, 0.00) 30%,
            rgba(0, 0, 0, 0.00)       55%,
            rgba(0, 0, 0, 0.20)       80%,
            rgba(0, 0, 0, 0.42)       100%
        ) !important;
    }



    /* Desktop Influencers + Recognitions crystal row — aligned to service-panel right padding */
    .desktop-glass-btn-row {
        display: flex !important;
        gap: 6px;
        padding: 4px 0 0 0;
        box-sizing: border-box;
        width: 100%;
    }

    .desktop-glass-btn {
        flex: 1 1;
        height: 41px;
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.3px;
        color: #ffffff;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        will-change: transform;
        transition:
            box-shadow 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out;
    }

    .desktop-glass-btn::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0.00) 100%);
        border-radius: 8px 8px 50% 50% / 8px 8px 12px 12px;
        pointer-events: none;
        z-index: 1;
    }

    .desktop-glass-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 18%, rgba(255,255,255,0.00) 82%, rgba(255,255,255,0.08) 100%);
        border-radius: 8px;
        pointer-events: none;
        z-index: 1;
    }

    .desktop-glass-btn span {
        position: relative;
        z-index: 2;
        line-height: 1;
        text-shadow: 0 1px 3px rgba(0,0,0,0.40);
    }

    .desktop-glass-btn svg {
        position: relative;
        z-index: 2;
        -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.40));
                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.40));
    }

    /* Second row: 5 equal buttons — Hello Doctor | Aarivum | All Categories | Influencers | Recognitions */
    .home-service-buttons-row .MuiGrid-item {
        flex-basis: 20% !important;
        max-width: 20% !important;
    }

    /* Influencers button — crystal dark-blue gradient */
    .desktop-glass-btn--influencers {
        background: linear-gradient(145deg, #071e52 0%, #0b2e78 35%, #1550b0 70%, #1c64c8 100%) !important;
        border: 1px solid rgba(60,120,240,0.32) !important;
        box-shadow:
            0 4px 12px rgba(7,30,82,0.55),
            0 2px 4px rgba(0,0,0,0.18),
            inset 0 1px 0 rgba(255,255,255,0.18) !important;
        -webkit-filter: none !important;
                filter: none !important;
    }

    /* Recognitions button — crystal dark-green gradient */
    .desktop-glass-btn--recognitions {
        background: linear-gradient(145deg, #041a10 0%, #072e18 35%, #0d5228 70%, #116634 100%) !important;
        border: 1px solid rgba(20,140,70,0.38) !important;
        box-shadow:
            0 4px 12px rgba(4,26,16,0.60),
            0 2px 4px rgba(0,0,0,0.18),
            0 0 8px rgba(17,102,52,0.28),
            inset 0 1px 0 rgba(255,255,255,0.16) !important;
        -webkit-filter: none !important;
                filter: none !important;
    }

    .desktop-glass-btn--influencers:hover {
        box-shadow:
            0 8px 22px rgba(7,30,82,0.65),
            0 2px 6px rgba(0,0,0,0.22),
            inset 0 1px 0 rgba(255,255,255,0.24) !important;
        -webkit-filter: brightness(1.10) !important;
                filter: brightness(1.10) !important;
    }

    .desktop-glass-btn--recognitions:hover {
        box-shadow:
            0 8px 22px rgba(4,26,16,0.68),
            0 2px 6px rgba(0,0,0,0.22),
            0 0 14px rgba(17,102,52,0.38),
            inset 0 1px 0 rgba(255,255,255,0.20) !important;
        -webkit-filter: brightness(1.10) !important;
                filter: brightness(1.10) !important;
    }

    /* Crystal glass overlay for Influencers & Recognitions in List Layout */
    body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn {
        position: relative !important;
        overflow: hidden !important;
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.65),
            0 3px 7px rgba(0, 0, 0, 0.50),
            inset 1px 1px 0px rgba(255, 255, 255, 0.80),
            inset -2px -2px 0px rgba(0, 0, 0, 0.55)
            !important;
        transition:
            box-shadow 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out !important;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out !important;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out !important;
    }

    body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn::before {
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(255, 255, 255, 0.15) 14%,
            rgba(255, 255, 255, 0.00) 30%,
            rgba(0, 0, 0, 0.00)       55%,
            rgba(0, 0, 0, 0.25)       80%,
            rgba(0, 0, 0, 0.48)       100%
        ) !important;
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.90),
            inset 1px 0 2px rgba(255, 255, 255, 0.65),
            inset -1px -1px 4px rgba(0, 0, 0, 0.60) !important;
        border-radius: inherit !important;
        z-index: 1 !important;
    }

    body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn::after {
        background: linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.50) 18%,
            rgba(255, 255, 255, 0.08) 30%,
            transparent 45%
        ) !important;
        z-index: 2 !important;
        border-radius: inherit !important;
    }

    body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn > *,
    body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn svg,
    body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn span {
        position: relative !important;
        z-index: 3 !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75) !important;
        color: #fff !important;
    }

    body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn:hover {
        -webkit-transform: translateY(-2px) !important;
                transform: translateY(-2px) !important;
        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.80),
            0 4px 10px rgba(0, 0, 0, 0.55),
            inset 1px 1px 0px rgba(255, 255, 255, 1.00),
            inset -2px -2px 0px rgba(0, 0, 0, 0.60)
            !important;
        -webkit-filter: brightness(1.15) !important;
                filter: brightness(1.15) !important;
    }
    }


@media (min-width: 1200px) {

    .home-left-city-carousel-wrapper {
        height: 276px;
    }
    .home-left-city-carousel-wrapper .carousel .slide > div {
        height: 276px !important;
        min-height: 276px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   TABLET LAYOUT  601px – 1023px
   • Single-column home grid (mirrors mobile, scaled up)
   • Two-column Premium Listing cards, ~10% shorter, uniform height
   • Second carousel (home-right-slide) 20% taller
   • No changes outside this breakpoint
══════════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 1023px) {

    /* ── Home top grid: single-column, no desktop grid ── */
    .home-top-grid {
        display: block !important;
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .home-left-city {
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden;
        /* ~5mm downward shift — aligns left slideshow top with right slideshow */
        padding-top: 21px !important;
    }

    /* First carousel: increased height to use the recovered space */
    .home-left-city-carousel-wrapper {
        height: 240px !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    /* AdCarousel slide Box height override for tablet */
    .home-left-city-carousel-wrapper .carousel .slide > div {
        height: 240px !important;
        min-height: 240px !important;
    }

    .home-left-city-carousel-wrapper .carousel .slide > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    /* Second carousel: 376px × 1.05 ≈ 395px (+5%) */
    .home-right-slide {
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        -webkit-filter: none !important;
                filter: none !important;
    }

    .home-right-slide .carousel .slide > div {
        height: 395px !important;
        min-height: 395px !important;
    }

    .home-right-slide .carousel .slide > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    /* Category slider (five buttons): flush with 20px side margins — matches sliders */
    .home-slider {
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        margin-top: 10px !important;
    }

    .home-slider > div {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Six quick-action buttons: edge-to-edge with 20px margins — same as sliders */
    .home-services {
        width: 100% !important;
    }

    .home-services .service-panel {
        width: calc(100% - 40px) !important;
        margin: 0.5rem 20px !important;
        padding: 0 !important;
    }

    .home-services .service-panel .MuiGrid-container {
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .home-services .service-panel .MuiGrid-item {
        padding: 3px !important;
    }

    .home-services .public-div-small {
        width: 100% !important;
        font-size: 12px !important;
        height: 48px !important;
        border-radius: 5px !important;
    }

    /* No overflow anywhere in the top grid */
    .home-top-grid *,
    .home-top-grid img {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* SmallCategorySlider: scrollable, flush with 20px side margins */
    .home-slider > div > .MuiBox-root {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        margin: 0 !important;
    }

    .home-slider .small-cat-item {
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Trending Categories: reduce top gap by ~50% */
    .home-trending-section {
        margin-top: 0.4rem !important;
    }

    /* ── Glass Crystal Buttons (Influencers + Recognitions) — tablet: below Trending, above Premium ── */
    .home-trending-section .glass-btn-row {
        display: flex !important;
        gap: 12px;
        padding: 10px 0 4px;
        box-sizing: border-box;
        margin-bottom: 0;
    }

    .home-trending-section .glass-btn {
        flex: 1 1;
        height: 38px;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.3px;
        color: #ffffff;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        will-change: transform;
        transition:
            box-shadow 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out;
        transition:
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 260ms ease-out,
            filter 260ms ease-out,
            -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
            -webkit-filter 260ms ease-out;
    }

    .home-trending-section .glass-btn-icon {
        font-size: 18px !important;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        color: #ffffff;
        -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.40));
                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.40));
    }

    .home-trending-section .glass-btn-label {
        position: relative;
        z-index: 2;
        line-height: 1;
        text-shadow: 0 1px 3px rgba(0,0,0,0.40);
    }

    .home-trending-section .glass-btn::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0.00) 100%);
        border-radius: 10px 10px 50% 50% / 10px 10px 14px 14px;
        pointer-events: none;
        z-index: 1;
    }

    .home-trending-section .glass-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 18%, rgba(255,255,255,0.00) 82%, rgba(255,255,255,0.08) 100%);
        border-radius: 10px;
        pointer-events: none;
        z-index: 1;
    }

    .home-trending-section .glass-btn--influencers {
        background: linear-gradient(145deg, #071e52 0%, #0b2e78 35%, #1550b0 70%, #1c64c8 100%);
        border: 1px solid rgba(60,120,240,0.32);
        box-shadow: 0 4px 14px rgba(7,30,82,0.60), 0 1px 4px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
    }

    .home-trending-section .glass-btn--recognitions {
        background: linear-gradient(145deg, #041a10 0%, #072e18 35%, #0d5228 70%, #116634 100%);
        border: 1px solid rgba(20,140,70,0.38);
        box-shadow: 0 4px 14px rgba(4,26,16,0.65), 0 1px 4px rgba(0,0,0,0.28), 0 0 10px rgba(17,102,52,0.30), inset 0 1px 0 rgba(255,255,255,0.16);
    }

    .home-trending-section .glass-btn:hover {
        -webkit-transform: translateY(-3px) scale(1.03);
                transform: translateY(-3px) scale(1.03);
        -webkit-filter: brightness(1.12);
                filter: brightness(1.12);
    }

    .home-trending-section .glass-btn:active {
        -webkit-transform: translateY(1px) scale(0.96);
                transform: translateY(1px) scale(0.96);
        -webkit-filter: brightness(0.90);
                filter: brightness(0.90);
    }

    /* ── Premium Listings section ── */
    .tablet-premium-section {
        margin: 0 20px !important;
        padding-bottom: 10px;
    }

    /*
     * The Virtuoso renders rows of 3 items each (xs=12 sm=6 md=4).
     * On tablet sm=6 gives 2 per row but the 3rd item wraps to a
     * half-empty row, creating blank space on the right.
     *
     * Fix: turn the Virtuoso row container into a 2-column CSS grid.
     * All 3 Grid items reflow into a clean 2-col layout automatically.
     * The 3rd item in each Virtuoso row occupies the first cell of the
     * next visual row, perfectly adjacent to the next Virtuoso row's
     * first item — no gaps, no blank columns.
     */
    .tablet-premium-section .MuiGrid-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 10px !important;
        gap: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    /* Each Grid item: fill its cell, no MUI flex offsets */
    .tablet-premium-section .MuiGrid-item {
        max-width: 100% !important;
        flex-basis: 100% !important;
        padding: 0 !important;
        display: flex !important;
        width: 100% !important;
    }

    /* Card: fill cell height → uniform rows regardless of content length */
    .tablet-premium-section .MuiCard-root {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    /* CardContent: tighter padding for ~10% height reduction */
    .tablet-premium-section .MuiCardContent-root {
        padding: 6px 10px 6px 10px !important;
        flex: 1 1 !important;
        display: flex !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    /* Inner content Grid: flex row, stretch height */
    .tablet-premium-section .MuiCardContent-root > .MuiGrid-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    /* Image: ~10% shorter than original 105px */
    .tablet-premium-section .product-card-img-wrap > div {
        height: 94px !important;
    }

    .tablet-premium-section .product-card-img-wrap img {
        height: 94px !important;
    }

    /* Button row: compact top margin (replaces calc(7px + 6mm) ≈ 30px) */
    .tablet-premium-section .MuiCardContent-root .MuiGrid-item:last-child > .MuiBox-root:last-child {
        margin-top: 6px !important;
    }

    /* Call / WhatsApp buttons: proportionally shorter */
    .tablet-premium-section .btn-call,
    .tablet-premium-section .btn-whatsapp {
        height: 26px !important;
        font-size: 9px !important;
    }
}
/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — LAYOUT 1 LIGHT THEME
/* Light background for Grid layout */
body[data-layout1="true"] {
  background-color: #fafafa !important;
  color: #212121 !important;
}

   Scope: body[data-layout1="true"]
   Fires ONLY when layoutMode === "grid" (switch LEFT = Layout 1).
   NEVER affects Layout 2 (body[data-layout2="true"]).
   Palette: #FFFFFF · #F5F5F5 · #E8F5E9 · #c8e6c9 · #2182B1
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. PAGE BACKGROUND
───────────────────────────────────────────────────────────── */
body[data-layout1="true"] .header ~ div {
  background-color: #f4f6f8;
}

body[data-layout1="true"] #div,
body[data-layout1="true"] .home-top-grid,
body[data-layout1="true"] .home-trending-section,
body[data-layout1="true"] .home-trending-section + div {
  background: transparent;
}

/* ─────────────────────────────────────────────────────────────
   2. HEADER CONTROLS
   Outer wrapper + inner pill handled by Header.css
   [data-layout="grid"] rules — only control-level overrides here.
───────────────────────────────────────────────────────────── */

/* Location + Category dropdown pills */
body[data-layout1="true"] .header-mobile-loc,
body[data-layout1="true"] .header-mobile-cat,
body[data-layout1="true"] .loc-dropdown,
body[data-layout1="true"] .radius-dropdown {
  background: #ffffff !important;
  border-color: #c8e6c9 !important;
}

body[data-layout1="true"] .loc-dropdown *,
body[data-layout1="true"] .radius-dropdown *,
body[data-layout1="true"] .header-mobile-loc *,
body[data-layout1="true"] .header-mobile-cat * {
  color: rgba(33, 130, 177, 1) !important;
  background: transparent !important;
}

/* Search input */
body[data-layout1="true"] .header-mobile-search-input,
body[data-layout1="true"] .header-search-input {
  background: #ffffff !important;
  border-color: #c8e6c9 !important;
  color: #333 !important;
}

body[data-layout1="true"] .header-mobile-search-input::-webkit-input-placeholder, body[data-layout1="true"] .header-search-input::-webkit-input-placeholder {
  color: #aaa !important;
}

body[data-layout1="true"] .header-mobile-search-input::placeholder,
body[data-layout1="true"] .header-search-input::placeholder {
  color: #aaa !important;
}

body[data-layout1="true"] .header-mobile-search-input:focus,
body[data-layout1="true"] .header-search-input:focus {
  border-color: #81c784 !important;
  box-shadow: 0 0 0 2px rgba(129, 199, 132, 0.18) !important;
}

/* Search button */
body[data-layout1="true"] .header-mobile-search-btn,
body[data-layout1="true"] .header-search-btn {
  background: #1565C0 !important;
  box-shadow: none !important;
}

body[data-layout1="true"] .header-mobile-search-btn:hover,
body[data-layout1="true"] .header-search-btn:hover {
  background: #0d47a1 !important;
}

/* Share / icon buttons */
body[data-layout1="true"] .header-mobile-icon-btn,
body[data-layout1="true"] .header-share-desktop {
  background: #ffffff !important;
  border-color: #c8e6c9 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

body[data-layout1="true"] .header-mobile-icon-btn svg,
body[data-layout1="true"] .header-share-desktop svg {
  color: rgba(33, 130, 177, 1) !important;
}

/* Layout toggle — grid (LEFT) state */
body[data-layout1="true"] .header-layout-toggle.is-grid {
  background: #e3f0fb !important;
  border-color: #1565C0 !important;
}

body[data-layout1="true"] .header-layout-toggle.is-grid .header-layout-toggle-thumb {
  background: #1565C0 !important;
  box-shadow: 0 1px 4px rgba(21, 101, 192, 0.35) !important;
}

/* Distance slider container */
body[data-layout1="true"] .header-mobile-row2-slider > div,
body[data-layout1="true"] .slider-row > div {
  background-color: #ffffff !important;
  border-radius: 6px !important;
}

/* ─────────────────────────────────────────────────────────────
   3. CAROUSEL WRAPPERS
───────────────────────────────────────────────────────────── */
body[data-layout1="true"] .home-left-city-carousel-wrapper {
  border: 1px solid #dde8f0 !important;
  box-shadow:
    0 4px 16px rgba(33, 130, 177, 0.10),
    0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

body[data-layout1="true"] .home-right-slide > .MuiBox-root > .MuiBox-root {
  border: 1px solid #dde8f0 !important;
  box-shadow:
    0 6px 24px rgba(33, 130, 177, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────
   4. SMALL CATEGORY SLIDER (5 feature tiles)
───────────────────────────────────────────────────────────── */
body[data-layout1="true"] .small-cat-item > .MuiBox-root {
  background: #ffffff !important;
  border: 1px solid #e8f5e9 !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Separator lines between tiles */
body[data-layout1="true"] .home-slider .MuiBox-root[style*="width: 1px"],
body[data-layout1="true"] .home-slider .MuiBox-root[style*="width:1px"] {
  background-color: #c8e6c9 !important;
  opacity: 1 !important;
}

/* ── 4b. Five tiles — mobile Grid layout refinements ── */
@media (max-width: 600px) {

  /* Tighten gap between tiles so each tile gains width → closer to square */
  body[data-layout1="true"] .home-slider > div > .MuiBox-root {
    gap: 1px !important;
  }

  /* Tile image container: −12% height, square-ish, refined radius + shadow */
  body[data-layout1="true"] .home-slider .small-cat-item > .MuiBox-root {
    height: 82px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(200, 230, 201, 0.80) !important;
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.10),
      0 1px 2px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
  }

  /* Match separator height to new tile height */
  body[data-layout1="true"] .home-slider .MuiBox-root[style*="width: 1px"],
  body[data-layout1="true"] .home-slider .MuiBox-root[style*="width:1px"] {
    height: 82px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   5. SERVICE BUTTONS (6 colored buttons incl. Hello Doctor,
      All Categories, Influencers, Recognitions)
───────────────────────────────────────────────────────────── */
body[data-layout1="true"] .public-div-small {
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.20),
    0 1px 3px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  border: none !important;
  color: #ffffff !important;
}

body[data-layout1="true"] .public-div-small svg {
  color: #ffffff !important;
}

/* Desktop glass buttons (Influencers / Recognitions) */
body[data-layout1="true"] .desktop-glass-btn {
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ─────────────────────────────────────────────────────────────
   5b. SERVICE BUTTONS — mobile Grid layout crystal effect
   Scope: Layout 1 (grid) + mobile only (≤600px)
   Height: 42px base × 0.90 = 38px (−10%)
   Effect: diagonal color gradient + gloss highlight + soft shadow
   Inline backgroundColor/boxShadow from JSX overridden with !important
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* ── Shared crystal structure for all 6 buttons ── */
  body[data-layout1="true"] .home-services .public-div-small {
    height: 38px !important;
    border-radius: 6px !important;
    position: relative !important;
    overflow: hidden !important;
    /* Inline backgroundColor is overridden per-button below;
       this resets the flat boxShadow from JSX */
    box-shadow: none !important;
    -webkit-filter: none !important;
            filter: none !important;
    /* Thin crystal border highlight */
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    /* Smooth tap response */
    transition:
      box-shadow 260ms ease-out,
      -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
      -webkit-filter 260ms ease-out !important;
    transition:
      transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 260ms ease-out,
      filter 260ms ease-out !important;
    transition:
      transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 260ms ease-out,
      filter 260ms ease-out,
      -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
      -webkit-filter 260ms ease-out !important;
  }

  /* Top gloss reflection — ::before pseudo-element */
  body[data-layout1="true"] .home-services .public-div-small::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 52% !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.08) 55%,
      rgba(255, 255, 255, 0.00) 100%
    ) !important;
    border-radius: 5px 5px 50% 50% / 5px 5px 10px 10px !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Side-edge lighting — ::after pseudo-element */
  body[data-layout1="true"] .home-services .public-div-small::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.00) 20%,
      rgba(255, 255, 255, 0.00) 80%,
      rgba(255, 255, 255, 0.09) 100%
    ) !important;
    border-radius: 5px !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Ensure icon + text sit above the pseudo-element overlays */
  body[data-layout1="true"] .home-services .public-div-small svg,
  body[data-layout1="true"] .home-services .public-div-small span {
    position: relative !important;
    z-index: 2 !important;
  }

  /* ── Online Service — teal crystal (#0D6B6B base) ── */
  body[data-layout1="true"] .home-services .public-div-small[style*="#0D6B6B"],
  body[data-layout1="true"] .home-services .public-div-small[style*="0D6B6B"] {
    background: linear-gradient(145deg, #0a5454 0%, #0d6b6b 45%, #12888a 100%) !important;
    box-shadow:
      0 4px 12px rgba(13, 107, 107, 0.50),
      0 1px 3px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  }

  /* ── Newspaper — steel-teal crystal (#2A7F7F base → blue-teal override) ── */
  body[data-layout1="true"] .home-services .public-div-small[style*="#2A7F7F"],
  body[data-layout1="true"] .home-services .public-div-small[style*="2A7F7F"] {
    background: linear-gradient(145deg, #01579b 0%, #0277bd 45%, #0396d8 100%) !important;
    box-shadow:
      0 4px 12px rgba(2, 119, 189, 0.52),
      0 1px 3px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  }

  /* ── News Channel — olive-green crystal (#6B7B5C base) ── */
  body[data-layout1="true"] .home-services .public-div-small[style*="#6B7B5C"],
  body[data-layout1="true"] .home-services .public-div-small[style*="6B7B5C"] {
    background: linear-gradient(145deg, #535f47 0%, #6b7b5c 45%, #7e9070 100%) !important;
    box-shadow:
      0 4px 12px rgba(107, 123, 92, 0.50),
      0 1px 3px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  }

  /* ── Hello Doctor — amber-orange crystal (#E88C3C base) ── */
  body[data-layout1="true"] .home-services .public-div-small[style*="#E88C3C"],
  body[data-layout1="true"] .home-services .public-div-small[style*="E88C3C"] {
    background: linear-gradient(145deg, #c4712a 0%, #e88c3c 45%, #f0a055 100%) !important;
    box-shadow:
      0 4px 12px rgba(232, 140, 60, 0.50),
      0 1px 3px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  }

  /* ── Arivum Arogyavum — blue crystal (#1565C0 base) ── */
  body[data-layout1="true"] .home-services .public-div-small[style*="#1565C0"],
  body[data-layout1="true"] .home-services .public-div-small[style*="1565C0"] {
    background: linear-gradient(145deg, #0d4d96 0%, #1565c0 45%, #1e7ae0 100%) !important;
    box-shadow:
      0 4px 12px rgba(21, 101, 192, 0.50),
      0 1px 3px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  }

  /* ── All Categories — purple crystal (#8E24AA base) ── */
  body[data-layout1="true"] .home-services .public-div-small[style*="#8E24AA"],
  body[data-layout1="true"] .home-services .public-div-small[style*="8E24AA"] {
    background: linear-gradient(145deg, #6d1882 0%, #8e24aa 45%, #a530c8 100%) !important;
    box-shadow:
      0 4px 12px rgba(142, 36, 170, 0.50),
      0 1px 3px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  }

  /* ── Hover: lift + brighten ── */
  body[data-layout1="true"] .home-services .public-div-small:hover {
    -webkit-transform: translateY(-2px) scale(1.03) !important;
            transform: translateY(-2px) scale(1.03) !important;
    -webkit-filter: brightness(1.10) !important;
            filter: brightness(1.10) !important;
  }

  /* ── Active / tap: press down ── */
  body[data-layout1="true"] .home-services .public-div-small:active {
    -webkit-transform: translateY(1px) scale(0.96) !important;
            transform: translateY(1px) scale(0.96) !important;
    -webkit-filter: brightness(0.92) !important;
            filter: brightness(0.92) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. TRENDING CATEGORIES SECTION
───────────────────────────────────────────────────────────── */
body[data-layout1="true"] .home-trending-section {
  background: transparent;
}

/* Section heading */
body[data-layout1="true"] .home-trending-section > .MuiTypography-root {
  color: #1a3a4a !important;
  font-weight: 700 !important;
}

/* Category cards */
body[data-layout1="true"] .home-trending-section .MuiCard-root {
  background: #ffffff !important;
  border: 1px solid #e3eef5 !important;
  box-shadow:
    0 2px 10px rgba(33, 130, 177, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Card text */
body[data-layout1="true"] .home-trending-section .MuiCard-root .MuiTypography-root {
  color: #1a3a4a !important;
}

/* Glass buttons row (Influencers / Recognitions) — mobile/tablet */
body[data-layout1="true"] .glass-btn-row {
  background: transparent !important;
}

/* ─────────────────────────────────────────────────────────────
   7. PREMIUM LISTINGS SECTION
───────────────────────────────────────────────────────────── */

/* Section heading */
body[data-layout1="true"] .home-trending-section + div > .MuiTypography-root,
body[data-layout1="true"] div[style*="margin: \"0 17px\""] > .MuiTypography-root,
body[data-layout1="true"] div[style*="margin: 0 17px"] > .MuiTypography-root {
  color: #1a3a4a !important;
  font-weight: 700 !important;
}

/* Product cards */
body[data-layout1="true"] .home-trending-section ~ div .MuiCard-root {
  background: #ffffff !important;
  border: 1px solid #e3eef5 !important;
  box-shadow:
    0 2px 10px rgba(33, 130, 177, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Business name */
body[data-layout1="true"] .home-trending-section ~ div .MuiCard-root .MuiTypography-root[style*="fontWeight: \"600\""],
body[data-layout1="true"] .home-trending-section ~ div .MuiCard-root .MuiTypography-root[style*="font-weight: 600"] {
  color: #0d2233 !important;
}

/* Location text */
body[data-layout1="true"] .home-trending-section ~ div .MuiCard-root .MuiTypography-root[style*="fontSize: \"12px\""] {
  color: #4a6070 !important;
}

/* Sub-category text */
body[data-layout1="true"] .home-trending-section ~ div .MuiCard-root .MuiTypography-root[style*="fontSize: \"11px\""] {
  color: #6a8090 !important;
}

/* Sub-category tag icon */
body[data-layout1="true"] .home-trending-section ~ div .MuiCard-root .MuiSvgIcon-root[data-testid="LocalOfferIcon"] {
  color: rgba(33, 130, 177, 0.65) !important;
}

/* Bookmark circle */
body[data-layout1="true"] .home-trending-section ~ div .MuiCard-root .MuiBox-root[style*="border: \"1px solid rgba(238, 238, 238, 1)\""],
body[data-layout1="true"] .home-trending-section ~ div .MuiCard-root .MuiBox-root[style*="border: 1px solid rgba(238, 238, 238, 1)"] {
  border-color: #dde8f0 !important;
  background: #f5f9fc !important;
}

/* Call button */
body[data-layout1="true"] .home-trending-section ~ div .btn-call {
  background: #1565C0 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.25) !important;
  color: #ffffff !important;
}

/* WhatsApp button */
body[data-layout1="true"] .home-trending-section ~ div .btn-whatsapp {
  background: #25D366 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25) !important;
  color: #ffffff !important;
}

/* Loading spinner */
body[data-layout1="true"] .home-trending-section ~ div .MuiCircularProgress-root {
  color: #2182B1 !important;
}

/* Loading text */
body[data-layout1="true"] .home-trending-section ~ div .MuiTypography-body2 {
  color: #4a6070 !important;
}

body[data-layout1="true"] .home-trending-section ~ div .MuiTypography-caption {
  color: #7a9aaa !important;
}

/* ─────────────────────────────────────────────────────────────
   8. SKELETON LOADING STATES
───────────────────────────────────────────────────────────── */
body[data-layout1="true"] .MuiSkeleton-root {
  background: #e8eef2 !important;
}

body[data-layout1="true"] .MuiSkeleton-root::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.60),
    transparent
  ) !important;
}

/* Skeleton card containers */
body[data-layout1="true"] .MuiBox-root[style*="border: '1px solid #e0e0e0'"],
body[data-layout1="true"] .MuiBox-root[style*="border: \"1px solid #e0e0e0\""] {
  border-color: #dde8f0 !important;
  background: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   9. FOOTER BAR (BottomIcons)
───────────────────────────────────────────────────────────── */
body[data-layout1="true"] .header ~ div > div:last-child > .MuiBox-root[style*="background: \"#2182B1\""],
body[data-layout1="true"] .header ~ div > div:last-child > .MuiBox-root[style*="background: #2182B1"] {
  background: #2182B1 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.10) !important;
}

body[data-layout1="true"] .bottom_container {
  color: #ffffff !important;
}

body[data-layout1="true"] .bottom_container_icon {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   10. TABLET PREMIUM SECTION
───────────────────────────────────────────────────────────── */
body[data-layout1="true"] .tablet-premium-section .MuiCard-root {
  background: #ffffff !important;
  border: 1px solid #e3eef5 !important;
  box-shadow:
    0 2px 10px rgba(33, 130, 177, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body[data-layout1="true"] .tablet-premium-section .btn-call {
  background: #1565C0 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.25) !important;
  color: #ffffff !important;
}

body[data-layout1="true"] .tablet-premium-section .btn-whatsapp {
  background: #25D366 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — LAYOUT 2 DARK BLUE THEME
   Scope: body[data-layout2="true"]
   Fires ONLY when layoutMode === "list" (switch RIGHT = Layout 2).
   NEVER affects Layout 1 (body[data-layout1="true"]).

   Palette (dark → light hierarchy):
     Page bg      #0a0f1e  (deepest navy)
     Section bg   #0d1526  (dark navy)
     Card bg      #111d35  (mid navy)
     Card surface #162040  (elevated navy)
     Accent       #1e3a6e  (blue accent)
     Highlight    #1565C0  (bright blue)
     Glass edge   rgba(255,255,255,0.07)
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. PAGE BACKGROUND
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] {
  background-color: #0a0f1e !important;
  color: #e8edf5 !important;
}

/* Root page wrapper */
body[data-layout2="true"] > div > div:not(.header) {
  background-color: #0a0f1e !important;
}

/* ─────────────────────────────────────────────────────────────
   2. HEADER — List layout only
   Uses .header[data-layout="list"] already in Header.css.
   We override that gradient with the dark blue theme here.
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .header[data-layout="list"] {
  background: linear-gradient(180deg, #0d1526 0%, #111d35 100%) !important;
  border-bottom: 1px solid rgba(30, 58, 110, 0.60) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}

/* Mobile header pill */
body[data-layout2="true"] .header[data-layout="list"] .header-mobile-pill {
  background: #162040 !important;
  border: 1px solid rgba(30, 58, 110, 0.55) !important;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Location + Category dropdown pills */
body[data-layout2="true"] .header-mobile-loc,
body[data-layout2="true"] .header-mobile-cat,
body[data-layout2="true"] .loc-dropdown,
body[data-layout2="true"] .radius-dropdown {
  background: #0d1526 !important;
  border-color: rgba(30, 58, 110, 0.70) !important;
}

body[data-layout2="true"] .loc-dropdown *,
body[data-layout2="true"] .radius-dropdown *,
body[data-layout2="true"] .header-mobile-loc *,
body[data-layout2="true"] .header-mobile-cat * {
  color: #7eb8f7 !important;
  background: transparent !important;
}

/* Search input */
body[data-layout2="true"] .header-mobile-search-input,
body[data-layout2="true"] .header-search-input {
  background: #0d1526 !important;
  border-color: rgba(30, 58, 110, 0.70) !important;
  color: #e8edf5 !important;
}

body[data-layout2="true"] .header-mobile-search-input::-webkit-input-placeholder, body[data-layout2="true"] .header-search-input::-webkit-input-placeholder {
  color: rgba(120, 150, 200, 0.55) !important;
}

body[data-layout2="true"] .header-mobile-search-input::placeholder,
body[data-layout2="true"] .header-search-input::placeholder {
  color: rgba(120, 150, 200, 0.55) !important;
}

body[data-layout2="true"] .header-mobile-search-input:focus,
body[data-layout2="true"] .header-search-input:focus {
  border-color: #1565C0 !important;
  box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.22) !important;
}

/* Search button */
body[data-layout2="true"] .header-mobile-search-btn,
body[data-layout2="true"] .header-search-btn {
  background: #1565C0 !important;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.40) !important;
}

body[data-layout2="true"] .header-mobile-search-btn:hover,
body[data-layout2="true"] .header-search-btn:hover {
  background: #1976d2 !important;
}

/* Share / icon buttons */
body[data-layout2="true"] .header-mobile-icon-btn,
body[data-layout2="true"] .header-share-desktop {
  background: #162040 !important;
  border-color: rgba(30, 58, 110, 0.60) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

body[data-layout2="true"] .header-mobile-icon-btn svg,
body[data-layout2="true"] .header-share-desktop svg {
  color: #7eb8f7 !important;
}

/* Layout toggle — list (RIGHT) state */
body[data-layout2="true"] .header-layout-toggle.is-list {
  background: #1565C0 !important;
  border-color: #0d47a1 !important;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.45) !important;
}

/* Distance slider container */
body[data-layout2="true"] .header-mobile-row2-slider > div,
body[data-layout2="true"] .slider-row > div {
  background-color: #162040 !important;
  border-radius: 6px !important;
}

/* ─────────────────────────────────────────────────────────────
   3. LAYOUT2 TOP SECTION BACKGROUND
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .layout2-mobile-top {
  background: linear-gradient(180deg, #0d1526 0%, #0a0f1e 100%) !important;
}

/* ─────────────────────────────────────────────────────────────
   4. AD CAROUSEL WRAPPER — subtle dark frame
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .home-left-city-carousel-wrapper {
  border: 1px solid rgba(30, 58, 110, 0.50) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* ─────────────────────────────────────────────────────────────
   5. SERVICE BUTTONS ROW (4 colored buttons)
   Crystal glass effect on dark background
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .layout2-service-row {
  background: transparent !important;
}

/* Shared crystal structure */
body[data-layout2="true"] .layout2-service-row .public-div-small {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}

/* Top gloss reflection */
body[data-layout2="true"] .layout2-service-row .public-div-small::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50% !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.05) 55%,
    rgba(255, 255, 255, 0.00) 100%
  ) !important;
  border-radius: 5px 5px 50% 50% / 5px 5px 8px 8px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Side-edge lighting */
body[data-layout2="true"] .layout2-service-row .public-div-small::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.00) 20%,
    rgba(255, 255, 255, 0.00) 80%,
    rgba(255, 255, 255, 0.07) 100%
  ) !important;
  border-radius: 5px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Icon + text above pseudo overlays */
body[data-layout2="true"] .layout2-service-row .public-div-small svg,
body[data-layout2="true"] .layout2-service-row .public-div-small span {
  position: relative !important;
  z-index: 2 !important;
}

/* Online Service — teal → deeper teal on dark */
body[data-layout2="true"] .layout2-service-row .public-div-small[style*="#0D6B6B"],
body[data-layout2="true"] .layout2-service-row .public-div-small[style*="0D6B6B"] {
  background: linear-gradient(145deg, #074040 0%, #0d6b6b 50%, #0f8080 100%) !important;
  box-shadow:
    0 3px 12px rgba(13, 107, 107, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

/* Newspaper — steel-blue on dark */
body[data-layout2="true"] .layout2-service-row .public-div-small[style*="#2A7F7F"],
body[data-layout2="true"] .layout2-service-row .public-div-small[style*="2A7F7F"] {
  background: linear-gradient(145deg, #01406e 0%, #0277bd 50%, #0396d8 100%) !important;
  box-shadow:
    0 3px 12px rgba(2, 119, 189, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

/* News Channel — olive-green on dark */
body[data-layout2="true"] .layout2-service-row .public-div-small[style*="#6B7B5C"],
body[data-layout2="true"] .layout2-service-row .public-div-small[style*="6B7B5C"] {
  background: linear-gradient(145deg, #3a4430 0%, #6b7b5c 50%, #7e9070 100%) !important;
  box-shadow:
    0 3px 12px rgba(107, 123, 92, 0.50),
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

/* Arivum Arogyavum — deep blue on dark */
body[data-layout2="true"] .layout2-service-row .public-div-small[style*="#1565C0"],
body[data-layout2="true"] .layout2-service-row .public-div-small[style*="1565C0"] {
  background: linear-gradient(145deg, #0a3870 0%, #1565c0 50%, #1e7ae0 100%) !important;
  box-shadow:
    0 3px 12px rgba(21, 101, 192, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

/* ─────────────────────────────────────────────────────────────
   6. FIVE QUICK ACTION TILES (SmallCategorySlider compact)
   Outer wrapper: dark navy with crystal glass edge
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .layout2-five-buttons-row .small-cat-item > .MuiBox-root {
  background: #162040 !important;
  border: 1px solid rgba(30, 80, 160, 0.45) !important;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Tile label text */
body[data-layout2="true"] .layout2-five-buttons-row .small-cat-item .MuiTypography-root {
  color: #c8daf5 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.60) !important;
}

/* ─────────────────────────────────────────────────────────────
   7. HERO CAROUSEL WRAPPER
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .layout2-hero-carousel > .MuiBox-root {
  border: 1px solid rgba(30, 58, 110, 0.55) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.60),
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ─────────────────────────────────────────────────────────────
   8. ALL CATEGORIES / ALL SUBCATEGORIES BUTTONS
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .layout2-all-categories-btn {
  background: linear-gradient(145deg, #5a1570 0%, #8e24aa 55%, #a530c8 100%) !important;
  box-shadow:
    0 4px 14px rgba(142, 36, 170, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(180, 60, 210, 0.30) !important;
}

body[data-layout2="true"] .layout2-all-subcategories-btn {
  background: linear-gradient(145deg, #0a3870 0%, #1565c0 55%, #1e7ae0 100%) !important;
  box-shadow:
    0 4px 14px rgba(21, 101, 192, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(30, 100, 200, 0.35) !important;
}

/* ─────────────────────────────────────────────────────────────
   9. TRENDING CATEGORIES SECTION
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .home-trending-section {
  background: transparent !important;
}

/* Section heading */
body[data-layout2="true"] .home-trending-section > .MuiTypography-root {
  color: #a8c4e8 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50) !important;
}

/* Category cards — dark navy with crystal glass edge */
body[data-layout2="true"] .home-trending-section .MuiCard-root {
  background: linear-gradient(160deg, #162040 0%, #111d35 100%) !important;
  border: 1px solid rgba(30, 80, 160, 0.40) !important;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.50),
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Card text */
body[data-layout2="true"] .home-trending-section .MuiCard-root .MuiTypography-root {
  color: #c8daf5 !important;
}

/* Glass buttons row (Influencers / Recognitions) */
body[data-layout2="true"] .home-trending-section .glass-btn-row {
  background: transparent !important;
}

/* ─────────────────────────────────────────────────────────────
   10. PREMIUM LISTINGS SECTION
───────────────────────────────────────────────────────────── */

/* Section heading */
body[data-layout2="true"] div[style*="margin: 0 17px"] > .MuiTypography-root,
body[data-layout2="true"] div[style*="margin: \"0 17px\""] > .MuiTypography-root {
  color: #a8c4e8 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50) !important;
}

/* Product cards */
body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root {
  background: linear-gradient(160deg, #162040 0%, #111d35 100%) !important;
  border: 1px solid rgba(30, 80, 160, 0.40) !important;
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Business name */
body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root .MuiTypography-root[style*="fontWeight: \"600\""],
body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root .MuiTypography-root[style*="font-weight: 600"] {
  color: #e0ecff !important;
}

/* Location text */
body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root .MuiTypography-root[style*="fontSize: \"12px\""] {
  color: #8aaed4 !important;
}

/* Sub-category text */
body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root .MuiTypography-root[style*="fontSize: \"11px\""] {
  color: #6a90b8 !important;
}

/* Sub-category tag icon */
body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root .MuiSvgIcon-root[data-testid="LocalOfferIcon"] {
  color: rgba(100, 160, 230, 0.65) !important;
}

/* Bookmark circle */
body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root .MuiBox-root[style*="border: \"1px solid rgba(238, 238, 238, 1)\""],
body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root .MuiBox-root[style*="border: 1px solid rgba(238, 238, 238, 1)"] {
  border-color: rgba(30, 80, 160, 0.50) !important;
  background: #1e3a6e !important;
}

/* Bookmark icon (unchecked) */
body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root .MuiCheckbox-root svg {
  color: #7eb8f7 !important;
}

/* Call button */
body[data-layout2="true"] .home-trending-section ~ div .btn-call {
  background: linear-gradient(135deg, #0d47a1 0%, #1565C0 100%) !important;
  border: none !important;
  box-shadow:
    0 2px 8px rgba(21, 101, 192, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

/* WhatsApp button */
body[data-layout2="true"] .home-trending-section ~ div .btn-whatsapp {
  background: linear-gradient(135deg, #1a7a40 0%, #25D366 100%) !important;
  border: none !important;
  box-shadow:
    0 2px 8px rgba(37, 211, 102, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

/* Loading spinner */
body[data-layout2="true"] .home-trending-section ~ div .MuiCircularProgress-root {
  color: #4a9eff !important;
}

/* Loading text */
body[data-layout2="true"] .home-trending-section ~ div .MuiTypography-body2 {
  color: #8aaed4 !important;
}

body[data-layout2="true"] .home-trending-section ~ div .MuiTypography-caption {
  color: #5a7a9a !important;
}

/* ─────────────────────────────────────────────────────────────
   11. SKELETON LOADING STATES
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .MuiSkeleton-root {
  background: #162040 !important;
}

body[data-layout2="true"] .MuiSkeleton-root::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(30, 80, 160, 0.25),
    transparent
  ) !important;
}

/* ─────────────────────────────────────────────────────────────
   12. FOOTER BAR (BottomIcons)
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .header ~ div > div:last-child > .MuiBox-root[style*="background: \"#2182B1\""],
body[data-layout2="true"] .header ~ div > div:last-child > .MuiBox-root[style*="background: #2182B1"] {
  background: linear-gradient(180deg, #0d1526 0%, #0a0f1e 100%) !important;
  border-top: 1px solid rgba(30, 58, 110, 0.55) !important;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.45) !important;
}

body[data-layout2="true"] .bottom_container {
  color: #a8c4e8 !important;
}

body[data-layout2="true"] .bottom_container_icon {
  color: #7eb8f7 !important;
}

/* View counter badge */
body[data-layout2="true"] .header ~ div > div:last-child .MuiBox-root[style*="backgroundColor: \"rgba(255,255,255,0.15)\""],
body[data-layout2="true"] .header ~ div > div:last-child .MuiBox-root[style*="backgroundColor: rgba(255,255,255,0.15)"] {
  background-color: rgba(21, 101, 192, 0.22) !important;
  border-color: rgba(30, 100, 200, 0.40) !important;
}

/* ─────────────────────────────────────────────────────────────
   13. GLASS BUTTONS (Influencers / Recognitions) — mobile
   Already have dark gradients; add a subtle dark-theme glow
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .glass-btn--influencers {
  box-shadow:
    0 4px 16px rgba(7, 30, 82, 0.75),
    0 1px 4px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

body[data-layout2="true"] .glass-btn--recognitions {
  box-shadow:
    0 4px 16px rgba(4, 26, 16, 0.80),
    0 1px 4px rgba(0, 0, 0, 0.40),
    0 0 12px rgba(17, 102, 52, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30) !important;
}

/* ─────────────────────────────────────────────────────────────
   14. MOBILE ONLY — crystal card hover/active on dark bg
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Category cards hover on dark */
  body[data-layout2="true"] .home-trending-section .MuiCard-root:hover {
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.65),
      0 2px 6px rgba(21, 101, 192, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(30, 100, 200, 0.55) !important;
  }

  /* Product cards hover on dark */
  body[data-layout2="true"] .home-trending-section ~ div .MuiCard-root:hover {
    box-shadow:
      0 6px 22px rgba(0, 0, 0, 0.65),
      0 2px 6px rgba(21, 101, 192, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(30, 100, 200, 0.55) !important;
  }

  /* Quick action tiles hover on dark */
  body[data-layout2="true"] .layout2-five-buttons-row .small-cat-item:hover > .MuiBox-root {
    box-shadow:
      0 5px 16px rgba(0, 0, 0, 0.65),
      0 1px 4px rgba(21, 101, 192, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(30, 100, 200, 0.60) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP CRYSTAL ENHANCEMENTS (List Layout Only)
   Scope: @media (min-width: 1024px) & body[data-layout2="true"]
   Applies multi-tone crystal depth, lighting, and reflections.
════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ─────────────────────────────────────────────────────────
     1. Main Background & Global Depth
  ───────────────────────────────────────────────────────── */
  body[data-layout2="true"] {
    background: radial-gradient(circle at 20% 0%, #0e1a33 0%, #0a0f1e 45%, #050810 100%) !important;
  }
  
  body[data-layout2="true"] > div > div:not(.header) {
    background: transparent !important; /* let body gradient show */
  }

  /* ─────────────────────────────────────────────────────────
     2. 3D CRYSTAL EFFECT FOR THE 6 MAIN DESKTOP BUTTONS
     Selector: .home-services .service-panel .public-div-small
  ───────────────────────────────────────────────────────── */
  
  /* Shared Base Elevation & Glass Structure */
  body[data-layout2="true"] .home-services .service-panel .public-div-small,
  body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn {
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    /* Outer shadows: separation from background */
    box-shadow: 
      0 12px 25px rgba(0, 0, 0, 0.8),
      0 4px 10px rgba(0, 0, 0, 0.5) !important;
  }

  /* Make text pop against the glass */
  body[data-layout2="true"] .home-services .service-panel .public-div-small *,
  body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn * {
    position: relative !important;
    z-index: 3 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
  }

  /* Top & Left sharp glass edge highlights + bottom right shadows via ::before */
  body[data-layout2="true"] .home-services .service-panel .public-div-small::before,
  body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: inherit !important;
    /* Bright inner highlight on upper/left, dark inner shadow on lower/right */
    box-shadow: 
      inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.85), /* TOP/LEFT CRYSTAL RIM */
      inset -3px -3px 8px rgba(0, 0, 0, 0.7),          /* BOTTOM/RIGHT DARK SHADOW */
      inset 0 0 15px rgba(255, 255, 255, 0.1) !important;
    /* Soft diagonal surface reflection */
    background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 15%, transparent 16%, transparent 80%, rgba(255,255,255,0.1) 100%) !important;
  }

  /* Secondary side reflection via ::after */
  body[data-layout2="true"] .home-services .service-panel .public-div-small::after,
  body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 10% !important;
    bottom: 10% !important;
    left: 2px !important;
    width: 2px !important;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.7), transparent) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    -webkit-filter: blur(0.5px) !important;
            filter: blur(0.5px) !important;
  }

  /* Hover effect for all buttons */
  body[data-layout2="true"] .home-services .service-panel .public-div-small:hover,
  body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn:hover {
    -webkit-transform: translateY(-2px) !important;
            transform: translateY(-2px) !important;
    -webkit-filter: brightness(1.15) !important;
            filter: brightness(1.15) !important;
    box-shadow: 
      0 16px 30px rgba(0, 0, 0, 0.9),
      0 6px 15px rgba(255, 255, 255, 0.15) !important;
  }
  body[data-layout2="true"] .home-services .service-panel .public-div-small:hover::before,
  body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn:hover::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 15%, transparent 16%, transparent 80%, rgba(255,255,255,0.15) 100%) !important;
  }

  /* 
     INDIVIDUAL BUTTON COLORS & LIGHTING DIRECTIONS 
     Preserving original color identities while adding multi-tone depth.
  */

  /* 1. Online Service (Teal: #0D6B6B) */
  body[data-layout2="true"] .home-services .service-panel .public-div-small[style*="0D6B6B"] {
    background: linear-gradient(135deg, #1fa3a3 0%, #0d6b6b 40%, #042e2e 100%) !important;
  }

  /* 2. Newspaper (Steel Blue: #2A7F7F) */
  body[data-layout2="true"] .home-services .service-panel .public-div-small[style*="2A7F7F"] {
    background: linear-gradient(150deg, #3eb8b8 0%, #2a7f7f 45%, #0f3030 100%) !important;
  }

  /* 3. News Channel (Olive Green: #6B7B5C) */
  body[data-layout2="true"] .home-services .service-panel .public-div-small[style*="6B7B5C"] {
    background: linear-gradient(160deg, #99ae86 0%, #6b7b5c 50%, #353d2d 100%) !important;
  }

  /* 4. Hello Doctor (Orange: #E88C3C) */
  body[data-layout2="true"] .home-services .service-panel .public-div-small[style*="E88C3C"] {
    background: linear-gradient(145deg, #ffaf6a 0%, #e88c3c 45%, #7a3f0d 100%) !important;
  }

  /* 5. Arivum Arogyavum (Deep Blue: #1565C0) */
  body[data-layout2="true"] .home-services .service-panel .public-div-small[style*="1565C0"] {
    background: linear-gradient(170deg, #4da4ff 0%, #1565c0 55%, #062347 100%) !important;
  }

  /* 6. All Categories (Purple: #8E24AA) */
  body[data-layout2="true"] .home-services .service-panel .public-div-small[style*="8E24AA"] {
    background: linear-gradient(135deg, #cc4bf2 0%, #8e24aa 50%, #3e0a4d 100%) !important;
  }

  /* Extra: Influencers (Purple-ish glass btn) */
  body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn--influencers {
    background: linear-gradient(140deg, #b83da8 0%, #7d2071 45%, #330b2e 100%) !important;
  }

  /* Extra: Recognitions (Gold/Yellow glass btn) */
  body[data-layout2="true"] .home-services .service-panel .desktop-glass-btn--recognitions {
    background: linear-gradient(140deg, #f0ba35 0%, #c48f10 50%, #573f05 100%) !important;
  }

  /* ─────────────────────────────────────────────────────────
     4. Content Cards (Categories, Ads)
  ───────────────────────────────────────────────────────── */
  body[data-layout2="true"] .layout2-desktop-ad-card,
  body[data-layout2="true"] .home-left-city-carousel-wrapper {
    background: linear-gradient(160deg, #101930 0%, #0d1526 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.50),
      inset 1px 1px 0 rgba(125, 211, 252, 0.08),
      inset -1px -1px 0 rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(4px) !important;
            backdrop-filter: blur(4px) !important;
    position: relative !important;
  }
  
  /* Corner edge reflection for cards */
  body[data-layout2="true"] .layout2-desktop-ad-card::after,
  body[data-layout2="true"] .home-left-city-carousel-wrapper::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 25% !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(125, 211, 252, 0.4) 0%, transparent 100%) !important;
    pointer-events: none !important;
  }

  /* ─────────────────────────────────────────────────────────
     5. Dividers (Crystal Glowing Lines)
  ───────────────────────────────────────────────────────── */
  body[data-layout2="true"] .service-grid-layout2 > .MuiGrid-item {
    position: relative !important;
  }
  
  /* Creating multi-tone glowing seam between columns (e.g. right border of first col) */
  body[data-layout2="true"] .service-grid-layout2 > .MuiGrid-item:first-of-type::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 10% !important;
    height: 80% !important;
    width: 1px !important;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(56, 189, 248, 0.15) 20%,
      rgba(125, 211, 252, 0.4) 50%,
      rgba(56, 189, 248, 0.15) 80%,
      transparent 100%
    ) !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2) !important;
  }

  /* ─────────────────────────────────────────────────────────
     6. Header Inner Elements (Dropdowns, Search, Share)
  ───────────────────────────────────────────────────────── */
  /* Dropdowns */
  body[data-layout2="true"] .loc-dropdown,
  body[data-layout2="true"] .radius-dropdown {
    background: linear-gradient(145deg, #0d1526 0%, #162040 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    box-shadow:
      inset 1px 1px 0 rgba(125, 211, 252, 0.12),
      inset -1px -1px 0 rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Search Input & Button */
  body[data-layout2="true"] .header-search-input {
    background: linear-gradient(145deg, #0a0f1e 0%, #0d1526 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
    border-right: none !important;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.4) !important;
  }
  
  body[data-layout2="true"] .header-search-btn {
    background: linear-gradient(135deg, #1565C0 0%, #1e3a6e 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.30) !important;
    box-shadow:
      0 0 10px rgba(21, 101, 192, 0.4),
      inset 1px 1px 0 rgba(125, 211, 252, 0.3) !important;
  }

  /* Share Button */
  body[data-layout2="true"] .header-share-desktop {
    background: linear-gradient(145deg, #0d1526 0%, #162040 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.4),
      inset 1px 1px 0 rgba(125, 211, 252, 0.15) !important;
    transition: all 0.2s ease !important;
  }
  body[data-layout2="true"] .header-share-desktop:hover {
    background: linear-gradient(145deg, #162040 0%, #1e3a6e 100%) !important;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.6),
      0 0 10px rgba(56, 189, 248, 0.2),
      inset 1px 1px 0 rgba(125, 211, 252, 0.25) !important;
  }

}

.header {
  width: 100%;
  position: fixed;
  z-index: 101;
  top: 0;
}

/* Centre header content on large screens */
.header .container {
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1rem 1rem 0rem 1rem;
}

/* Desktop: widen header container without affecting mobile */
@media (min-width: 1024px) {

  /* ── Outer container: just provides the blue bg padding ── */
  .header .container {
    max-width: 1600px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 21px top/bottom: ~50% more padding than before (14px), white bar vertically centered */
    padding: 21px 2px;
    box-sizing: border-box;
  }

  /* ── White pill container: holds everything ── */
  .header-white-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    padding: 8px 14px 8px 10px;
    box-sizing: border-box;
    gap: 10px;
    min-height: 68px;
  }

  /* ── Logo ── */
  .logo-icon-body {
    width: auto !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: auto !important;
    margin-right: 6px;
  }

  .logo-icon-body img {
    width: 140px;
    height: auto;
    display: block;
  }

  /* Mobile share hidden on desktop */
  .header-share-mobile {
    display: none !important;
  }

  /* ── Controls block: flat flex row ── */
  .dropdown-search-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0;
    margin-top: 0 !important;
    gap: 8px;
    padding: 0 !important;
  }

  .dropdown-search-body .MuiGrid-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    width: auto !important;
    gap: 8px;
  }

  .dropdown-search-body .MuiGrid-item {
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;
    display: flex;
    align-items: center;
  }

  /* ── Location dropdown ── */
  .loc-dropdown {
    height: 38px !important;
    min-width: 140px;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    background: #fff !important;
    padding: 0 8px 0 8px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: none !important;
  }

  /* ── Category dropdown ── */
  .radius-dropdown {
    height: 38px !important;
    min-width: 140px;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    background: #fff !important;
    padding: 0 8px 0 8px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: none !important;
  }

  /* ── Search input field ── */
  .header-search-input {
    height: 38px;
    border: 1px solid #e0e0e0;
    border-radius: 8px 0 0 8px;
    padding: 0 10px;
    font-size: 14px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    width: 110px;
    color: #555;
  }

  /* ── Search button ── */
  .header-search-btn {
    height: 38px;
    padding: 0 18px;
    background: #1565C0;
    color: #fff;
    border: none;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.2s ease;
  }

  .header-search-btn:hover {
    background: #0d47a1;
  }

  /* ── Search wrapper: input + button joined ── */
  .header-search-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* ── Old search-box icon: hide on desktop ── */
  .search-box {
    display: none !important;
  }

  /* ── Slider row: fills remaining space ── */
  .slider-row {
    display: flex;
    align-items: center;
    flex: 1 1;
    min-width: 120px;
    gap: 0;
    margin-top: 0 !important;
  }

  /* ── Layout Switch: dark blue, height matches share button (34px) ── */
  .header-layout-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 56px;
    height: 34px;
    border-radius: 6px;
    padding: 3px;
    box-sizing: border-box;
    transition: background 0.3s ease, border-color 0.3s ease;
    margin-left: 4px;
    position: relative;
  }

  .header-layout-toggle.is-grid {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

  .header-layout-toggle.is-list {
    background: #1565C0;
    border: 1.5px solid #0d47a1;
  }

  .header-layout-toggle-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    transition: background 0.3s ease,
                -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-transform: translateY(-50%) translateX(0);
            transform: translateY(-50%) translateX(0);
  }

  .is-grid .header-layout-toggle-thumb {
    background: #1565C0;
    color: #fff;
    -webkit-transform: translateY(-50%) translateX(0);
            transform: translateY(-50%) translateX(0);
  }

  .is-list .header-layout-toggle-thumb {
    background: #fff;
    color: #1565C0;
    -webkit-transform: translateY(-50%) translateX(24px);
            transform: translateY(-50%) translateX(24px);
  }

  /* Hide old static layout switch */
  .header-layout-switch-desktop {
    display: none !important;
  }

  /* ── Share: borderless icon at far right ── */
  .header-share-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    background: #fff;
    margin-left: 4px;
    transition: background 0.2s ease;
  }

  .header-share-desktop:hover {
    background: #f0f0f0;
  }
}

/* ── Desktop header: shown only on 1024px+ ── */
.header-desktop {
  display: none;
}

/* ── Mobile header: shown below 1024px ── */
.header-mobile {
  display: block;
  width: 100%;
}

@media (min-width: 1024px) {
  .header-desktop { display: block; width: 100%; }
  .header-mobile  { display: none; }
}

/* ══════════════════════════════════════════════════════════
   TABLET  601px – 1023px
   Uses the mobile pill layout, scaled up proportionally.
   No desktop grid, no oversized logo, no overflow.
══════════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 1023px) {

  /* Outer container: match mobile padding style */
  .header .container {
    padding: 14px 12px 10px 12px;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }

  /* White pill */
  .header-mobile-pill {
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13);
    width: 100%;
  }

  /* Row 1 */
  .header-mobile-row1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow: hidden;
  }

  /* Logo: scale up from 95px but cap with max-width */
  .header-mobile-logo {
    width: 120px;
    max-width: 18vw;
    height: auto;
    flex-shrink: 0;
  }

  /* Location pill */
  .header-mobile-loc {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 6px;
    background: #fff;
    flex: 1.2 1;
    min-width: 0;
    overflow: hidden;
  }

  /* Category pill */
  .header-mobile-cat {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 6px;
    background: #fff;
    flex: 1 1;
    min-width: 0;
    overflow: hidden;
  }

  /* Search */
  .header-mobile-search {
    display: flex;
    align-items: center;
    flex: 1.6 1;
    min-width: 0;
  }

  .header-mobile-search-input {
    height: 34px;
    border: 1px solid #e0e0e0;
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 0 8px;
    font-size: 13px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    color: #555;
  }

  .header-mobile-search-btn {
    height: 34px;
    padding: 0 12px;
    background: #1565C0;
    color: #fff;
    border: none;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Share / icon button */
  .header-mobile-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Layout toggle */
  .header-layout-toggle {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 56px;
    height: 34px;
    border-radius: 6px;
    padding: 0;
    box-sizing: border-box;
    transition: background 0.3s ease, border-color 0.3s ease;
  }

  .header-layout-toggle.is-grid {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

  .header-layout-toggle.is-list {
    background: #1565C0;
    border: 1.5px solid #0d47a1;
  }

  .header-layout-toggle-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    transition: background 0.3s ease,
                -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .is-grid .header-layout-toggle-thumb {
    background: #1565C0;
    color: #fff;
    -webkit-transform: translateY(-50%) translateX(0);
            transform: translateY(-50%) translateX(0);
  }

  .is-list .header-layout-toggle-thumb {
    background: #fff;
    color: #1565C0;
    -webkit-transform: translateY(-50%) translateX(24px);
            transform: translateY(-50%) translateX(24px);
  }

  /* Row 2: slider + toggle + share */
  .header-mobile-row2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .header-mobile-row2-slider {
    flex: 1 1;
    min-width: 0;
  }
}


.logo-icon-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 24px
}

.dropdown-search-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
}

.loc-dropdown {
  width: 100%;
  height: 35px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-left: 12px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.603);
}

.radius-dropdown {
  width: 100%;
  height: 35px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-left: 4px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.603);

}

.dropdown-inp {
  outline: medium none invert;
  outline: initial;
  border: medium none currentColor;
  border: initial;
  width: 85px;
}

.search-box {
  width: 35px;
  height: 35px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.603);
}

@media (max-width: 600px) {

  /* Container: add ~5mm top breathing space, keep side/bottom padding */
  .header .container {
    padding: 19px 8px 8px 8px;
  }

  /* ── White pill — same look as desktop ── */
  .header-mobile-pill {
    background: #ffffff;
    border-radius: 10px;
    padding: 6px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }

  /* ── Row 1: all controls in one flex row ── */
  .header-mobile-row1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    width: 100%;
    overflow: hidden;
  }

  .header-mobile-logo {
    width: 95px;
    height: auto;
    flex-shrink: 0;
  }

  /* Location pill */
  .header-mobile-loc {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 27px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0 4px;
    background: #fff;
    flex: 1.2 1;
    min-width: 0;
    overflow: hidden;
  }

  /* Category pill */
  .header-mobile-cat {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 27px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0 4px;
    background: #fff;
    flex: 1 1;
    min-width: 0;
    overflow: hidden;
  }

  /* Search: input + button joined */
  .header-mobile-search {
    display: flex;
    align-items: center;
    flex: 1.4 1;
    min-width: 0;
    flex-shrink: 0;
  }

  .header-mobile-search-input {
    height: 27px;
    border: 1px solid #e0e0e0;
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 0 6px;
    font-size: 11px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    color: #555;
  }

  .header-mobile-search-btn {
    height: 27px;
    padding: 0 8px;
    background: #1565C0;
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Share icon button */
  .header-mobile-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ── Mobile layout toggle: dark blue, height matches share button (27px) ── */
  .header-layout-toggle {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 50px;
    height: 27px;
    border-radius: 6px;
    padding: 0;
    margin-left: 0;
    box-sizing: border-box;
    transition: background 0.3s ease, border-color 0.3s ease;
  }

  .header-layout-toggle.is-grid {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

  .header-layout-toggle.is-list {
    background: #1565C0;
    border: 1.5px solid #0d47a1;
  }

  .header-layout-toggle-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 21px;
    height: 21px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    transition: background 0.3s ease,
                -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .is-grid .header-layout-toggle-thumb {
    background: #1565C0;
    color: #fff;
    -webkit-transform: translateY(-50%) translateX(0);
            transform: translateY(-50%) translateX(0);
  }

  .is-list .header-layout-toggle-thumb {
    background: #fff;
    color: #1565C0;
    -webkit-transform: translateY(-50%) translateX(23px);
            transform: translateY(-50%) translateX(23px);
  }

  /* ── Row 2: distance slider + icon buttons ── */
  .header-mobile-row2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    width: 100%;
  }

  .header-mobile-row2-slider {
    flex: 1 1;
    min-width: 0;
  }
}

.dropdown-opt {
  background-color: #fff;
  outline: medium none invert !important;
  outline: initial !important;
  border: medium none currentColor !important;
  border: initial !important;
}

/* ── LAYOUT_1 only: outermost header background — soft light theme.
   Scoped exclusively to data-layout="grid" (layoutMode === "grid").
   LAYOUT_2 (data-layout="list") is never matched by this rule. */
.header[data-layout="grid"] {
  background: linear-gradient(180deg, #ffffff 0%, #F5F5F5 60%, #E8F5E9 100%) !important;
  border-bottom: 1px solid #dcedc8;
}

/* ── LAYOUT_1 only: desktop inner pill ── */
.header[data-layout="grid"] .header-white-bar {
  background: #ffffff !important;
  border: 1px solid #e8f5e9 !important;
  box-shadow: 0 2px 8px rgba(33, 130, 177, 0.07) !important;
}

/* ── LAYOUT_1 only: mobile/tablet inner pill ── */
.header[data-layout="grid"] .header-mobile-pill {
  background: #F5F5F5 !important;
  border: 1px solid #e8f5e9 !important;
  box-shadow: 0 2px 8px rgba(33, 130, 177, 0.07) !important;
}

/* ── LAYOUT_2 only: outermost header background — subtle light green gradient.
   Scoped exclusively to data-layout="list" (layoutMode === "list").
   LAYOUT_1 (data-layout="grid") is never matched by this rule. */
.header[data-layout="list"] {
  background: linear-gradient(180deg, #f0faf0 0%, #E8F5E9 100%) !important;
  border-bottom: 1px solid #c8e6c9;
}

/* ── Layout 1 only: distance control — white background ── */
/* Targets the SliderModal root <Box> which is the sole direct child of its
   wrapper on every breakpoint. Scoped to Layout 1 via data-layout="grid". */
.header[data-layout="grid"] .header-mobile-row2-slider > div,
.header[data-layout="grid"] .slider-row > div {
  background-color: #ffffff;
}



/* ── Mobile only: light-blue → soft-gray gradient header ── */
@media (max-width: 600px) {

  /* Layout 1 (grid): crisp sky-blue top → warm silver-gray bottom */
  .header[data-layout="grid"] {
    background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 35%, #cfd8dc 70%, #eceff1 100%) !important;
    border-bottom: 1px solid #b0bec5 !important;
  }

  /* Layout 2 (list): slightly deeper blue top → same warm-gray fade */
  .header[data-layout="list"] {
    background: linear-gradient(180deg, #bbdefb 0%, #90caf9 35%, #b0bec5 70%, #e0e0e0 100%) !important;
    border-bottom: 1px solid #90a4ae !important;
  }

  /* Inner pill: solid white — maximum contrast for all controls */
  .header[data-layout="grid"] .header-mobile-pill,
  .header[data-layout="list"] .header-mobile-pill {
    background: #ffffff !important;
    border: 1px solid rgba(144, 164, 174, 0.35) !important;
    box-shadow: 0 2px 10px rgba(30, 80, 140, 0.09) !important;
  }
}

/* .css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input{
    padding: 0 !important;
    padding-right: 32px !important;

} */
 
/* ══════════════════════════════════════════════════════════════════════
   DESKTOP LIST LAYOUT ONLY — MasterClick Main White Panel: Dark Blue Crystal
   Scope: @media (min-width: 1024px) + .header[data-layout="list"]
   The Grid Layout (.header[data-layout="grid"]) is NEVER matched here.
   Changes ONLY the visible .header-white-bar panel background to dark blue.
══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Dark Blue Crystal panel — List Layout only ── */
  .header[data-layout="list"] .header-white-bar {
    /* Dark blue crystal/glass background */
    background: linear-gradient(
      145deg,
      #071828 0%,
      #0b2240 45%,
      #0d2a50 100%
    ) !important;

    /* Subtle glass border */
    border: 1px solid rgba(56, 189, 248, 0.28) !important;

    /* Crystal depth shadow */
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(56, 189, 248, 0.08),
      0 0 14px rgba(20, 80, 200, 0.18),
      inset 1px 0 0 rgba(56, 189, 248, 0.10),
      inset -1px 0 0 rgba(56, 189, 248, 0.06) !important;

    /* Position context for pseudo-element edge lights */
    position: relative !important;
    overflow: hidden !important;
  }

  /* ── Crystal top-edge highlight line ── */
  .header[data-layout="list"] .header-white-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(56, 189, 248, 0.06) 0%,
      rgba(56, 189, 248, 0.38) 18%,
      rgba(125, 211, 252, 0.58) 50%,
      rgba(56, 189, 248, 0.38) 82%,
      rgba(56, 189, 248, 0.06) 100%
    );
    pointer-events: none;
    z-index: 2;
  }

  /* ── Crystal left-edge corner glow ── */
  .header[data-layout="list"] .header-white-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(125, 211, 252, 0.50) 0%,
      rgba(56, 189, 248, 0.22) 55%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 2;
  }

  /* Ensure the children elements stay above the lighting effects */
  .header[data-layout="list"] .header-white-bar > * {
    position: relative;
    z-index: 3;
  }
}


.carousel .control-arrow,.carousel.carousel-slider .control-arrow{transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-moz-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-moz-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}

.bottom-nav {
    width: 100%;
    height: 45px;
    background-color: gainsboro;
    position: fixed;
    bottom: 0;
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.081);

    display: flex;
    justify-content: space-around;
    align-items: center;
}

.bottom-nav img {
    width: 1.6rem;
}

.bottom-nav li {
    list-style: none;
}

.bottom_main_box {
    position: relative;
    width: 60px;
    height: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    background: white;
    bottom: 8px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;


}

.bottom_main_box::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: -20px;
    background: gainsboro;
    border-top-right-radius: 21px;
    /* box-shadow: 6px -6px 0 0px #ffffffe8; */
    top: 11px;

}

.bottom_main_box::after {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    right: -20px;
    background: gainsboro;
    border-top-left-radius: 21px;
    /* box-shadow: -1px -10px 0 0px #fff; */
    top: 11px;

}


.bottom_semi {
    width: 60px;
    height: 40px;
    position: absolute;
    bottom: 0px;
    background: #dcdcdc99;
    border-radius: 0 0 150px 150px;
    left: 10px;
}

.bottom_icon_box {
    position: absolute;
    width: 45px;
    height: 45px;
    background: #2182B1;
    border-radius: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    left: 17px;
    bottom: 15px;
    border: 2px solid white;
}
/* ── LayoutToggle: sliding thumb toggle — dark blue accent, matches share button height ── */

/* md (default) — desktop size: matches phc-share-btn height (36px) */
.lt-toggle.lt-md {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  width: 56px;
  height: 36px;
  border-radius: 6px;
  padding: 3px;
  box-sizing: border-box;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* sm — compact for page headers: matches phc-share-btn mobile height (32px) */
.lt-toggle.lt-sm {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  width: 52px;
  height: 32px;
  border-radius: 6px;
  padding: 0;
  box-sizing: border-box;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Grid mode — light blue bg + blue border */
.lt-toggle.lt-grid {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* List mode — solid dark blue bg */
.lt-toggle.lt-list {
  background: #1565C0;
  border: 1.5px solid #0d47a1;
}

/* Sliding thumb */
.lt-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease,
              -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* md thumb size */
.lt-md .lt-thumb {
  width: 28px;
  height: 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* sm thumb size */
.lt-sm .lt-thumb {
  width: 24px;
  height: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}

/* Grid: thumb on left, blue bg */
.lt-grid .lt-thumb {
  background: #1565C0;
  color: #fff;
  -webkit-transform: translateY(-50%) translateX(0);
          transform: translateY(-50%) translateX(0);
}

/* List: thumb slides right, white bg */
.lt-list.lt-md .lt-thumb {
  background: #fff;
  color: #1565C0;
  -webkit-transform: translateY(-50%) translateX(25px);
          transform: translateY(-50%) translateX(25px);
}

.lt-list.lt-sm .lt-thumb {
  background: #fff;
  color: #1565C0;
  -webkit-transform: translateY(-50%) translateX(25px);
          transform: translateY(-50%) translateX(25px);
}

.lt-icon {
  font-size: 14px !important;
  position: relative;
  z-index: 1;
}

.lt-grid .lt-icon {
  color: #fff;
}

.lt-list .lt-icon {
  color: #1565C0;
}

/* ─────────────────────────────────────────────────────────────────
   CATEGORY LIST VIEW  –  Responsive styles
   Mobile-first: base = mobile, then tablet & desktop overrides
───────────────────────────────────────────────────────────────── */

/* ── Root container ── */
.clv-root {
  min-height: 100vh;
  background-color: #f4f5f7;
  overflow-y: auto;
}

/* ── Sticky top bar ── */
.clv-topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.clv-back {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #333;
}

/* ── Centred body wrapper ── */
.clv-body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0.75rem 6rem;
  box-sizing: border-box;
}

/* ── Section header (title + toggle icon) ── */
.clv-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.25rem 0.75rem;
}

.clv-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.clv-view-icon {
  font-size: 26px;
  cursor: pointer;
  color: #444;
}

/* ── Grid container padding ── */
.clv-grid {
  padding: 0 !important;
}

/* Mobile-only: enforce 3 columns and increase category icons/images
   to the maximum uniform size that fits naturally inside each card
   without changing card/container dimensions, spacing, padding,
   or layout. Applies to both Grid and List layouts under #parent-div. */
@media (max-width: 599px) {

  /* Ensure any Grid items using `xs=3` under #parent-div (including
     grids without the `clv-grid` class) render as exactly 1/3 width on
     mobile so this page matches the All Categories layout. */
  #parent-div .MuiGrid-grid-xs-3 {
    flex-basis: 33.333333% !important;
    max-width: 33.333333% !important;
  }

  /* Ensure grid items that use `xs=3` remain exactly 1/3 width */
  #parent-div .clv-grid .MuiGrid-grid-xs-3 {
    flex-basis: 33.333333% !important;
    max-width: 33.333333% !important;
  }

  /* Card height is controlled in component; do not expand cards here.
     We'll compute image maximums based on the known mobile card height
     used in the component (`85px`) so images scale uniformly. */

  /* Create a consistent inner image container inside each grid card and
     make the image fill that container while preserving aspect ratio.
     This normalizes visual icon size across cards and uses the maximum
     space available without changing card/container dimensions. */
  #parent-div .MuiCard-root > div > div:first-child {
    box-sizing: border-box !important;
    padding: 6px 8px 0 8px !important; /* keep small padding from edges */
    width: 100% !important;
    /* Reduce reserved title space slightly to allow larger icons while
       keeping the title readable. This does not change overall card size
       or layout — only allows the image area to grow within the card. */
    height: calc(100% - 20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* Image fills the container as large as possible while maintaining
     original aspect ratio. Using both max-width and max-height keeps
     all icons visually identical. */
  #parent-div .MuiCard-root > div > div:first-child img,
  #parent-div .MuiCard-root > div > div:first-child [role="img"] {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
     /* No transform: rely on max-width/max-height to enlarge within container
       so images never get cropped or distorted. */
  }

  /* List layout: keep the `.clv-list-img-wrap` container unchanged but
     make the inner image fill it as much as possible while leaving a
     consistent 4px padding so the icon never touches the borders. This
     produces uniform visual icon sizes across list cards. */
  #parent-div .clv-list-img {
    /* Grow the inner image to the largest size that fits inside the
       existing 62×62 container while leaving 4px padding on all sides. */
    max-width: 54px !important; /* 62 - 8px padding */
    max-height: 54px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    /* No transform: use max dimensions so image fills container without cropping. */
  }

  /* Keep titles centered and unchanged in position */
  #parent-div .MuiCard-root .MuiTypography-root,
  #parent-div .clv-list-label {
    text-align: center !important;
  }

}

/* ── Search bar ── */
.clv-search-wrap {
  position: relative;
  margin-bottom: 1rem;
}

.clv-search-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
}

.clv-search-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 18px;
  pointer-events: none;
}

/* ── List view body ── */
.clv-list-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0 0.1rem 2rem;
}

/* ── List card ── */
.clv-list-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 0.55rem 0.9rem 0.55rem 0.65rem;
  cursor: pointer;
  transition: box-shadow 0.18s ease, -webkit-transform 0.15s ease;
  transition: box-shadow 0.18s ease, transform 0.15s ease;
  transition: box-shadow 0.18s ease, transform 0.15s ease, -webkit-transform 0.15s ease;
  -webkit-tap-highlight-color: rgba(19, 64, 19, 0.08);
}

.clv-list-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0,0,0,0.05);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.clv-list-card:active {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ── Image container ── */
.clv-list-img-wrap {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: #f0f4f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.clv-list-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

/* ── Text + arrow row ── */
.clv-list-content {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.clv-list-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  line-height: 1.35 !important;
  word-break: break-word;
  flex: 1 1;
}

.clv-list-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #aaa;
  margin-left: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────
   TABLET  600px – 1024px
───────────────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 1024px) {
  .clv-body {
    padding: 1.25rem 1.5rem 6rem;
  }

  .clv-topbar {
    padding: 0.85rem 1.5rem;
  }

  .clv-list-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.6rem;
    gap: 0.6rem;
  }
}

/* ─────────────────────────────────────────────────────────────────
   DESKTOP  > 1024px
───────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .clv-topbar {
    padding: 0.85rem 2rem;
  }

  .clv-body {
    padding: 1.5rem 2rem 4rem;
  }

  .clv-list-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.75rem;
    gap: 0.75rem;
  }

  .clv-list-card {
    border-radius: 14px;
  }

  .clv-list-img-wrap {
    width: 68px;
    height: 68px;
  }

  .clv-list-img {
    width: 56px;
    height: 56px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   SUBCATEGORY & ALL-SUBCATEGORIES — Mobile/Tablet header overrides
   (≤ 1023px only — desktop unchanged)
───────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {

  /* Blue header background instead of green */
  #parent-div .phc-inner,
  .phc-bar .phc-inner {
    background: #e3f0fb;
    border-color: #90caf9;
  }

  /* Blue accent on back button border */
  #parent-div .phc-back,
  .phc-bar .phc-back {
    border-color: #90caf9;
    color: #0d47a1;
  }

  #parent-div .phc-back-icon,
  .phc-bar .phc-back-icon {
    color: #0d47a1;
  }

  #parent-div .phc-back-label,
  .phc-bar .phc-back-label {
    color: #0d47a1;
  }

  /* Blue page title */
  #parent-div .phc-page-title,
  .phc-bar .phc-page-title {
    color: #0d47a1;
  }

  /* Search input focus ring — blue */
  #parent-div .phc-search-input:focus,
  .phc-bar .phc-search-input:focus {
    border-color: #1565C0;
  }
}

/* ─────────────────────────────────────────────────────────────────
/* ─────────────────────────────────────────────────────────────────
   LAYOUT 2 — SubCategory page dark blue crystal theme
   Scope: body[data-layout2="true"] #parent-div
   All screens (mobile, tablet, desktop).
   Mirrors the dark blue theme used in CategoryDetails Layout 2.
   Layout 1 (#parent-div without data-layout2) is completely untouched.
───────────────────────────────────────────────────────────────── */

/* Page root: deep navy background */
body[data-layout2="true"] #parent-div {
  background-color: #081522 !important;
}

/* Grid Theme (LEFT switch) — apply only on SubCategory pages
   (targets the header container behind the All Categories back button).
   Scoped to `#parent-div.subcat-root` so only this page is affected. */
body[data-layout1="true"] #parent-div.subcat-root .phc-inner {
  background-color: #f4f5f7 !important; /* light grey */
}

/* Grid Theme (LEFT switch) — light page palette for SubCategory only.
   Restores the original light theme when Grid Theme is active, without
   affecting List Theme or shared CSS. */
body[data-layout1="true"] #parent-div.subcat-root {
  background-color: #f7f8fa !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e8ebef !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-inner {
  background: #ffffff !important;
  border: none !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-page-title {
  color: #222222 !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-back {
  background: #ffffff !important;
  border: 1px solid #e3e7ec !important;
  color: #222222 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-back:hover {
  background: #f4f6f9 !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-back-icon,
body[data-layout1="true"] #parent-div.subcat-root .phc-back-label {
  color: #222222 !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-search-input {
  background: #ffffff !important;
  border-color: #d9dee5 !important;
  color: #222222 !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-search-input::-webkit-input-placeholder {
  color: rgba(34, 34, 34, 0.45) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-search-input::placeholder {
  color: rgba(34, 34, 34, 0.45) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-search-input:focus {
  border-color: #b8c2cc !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-search-btn {
  background: #f0f3f6 !important;
  border-color: #d9dee5 !important;
  color: #222222 !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-search-btn:hover {
  background: #e7eaef !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-share-btn {
  background: #f7f8fa !important;
  border: 1px solid #e3e7ec !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-share-btn svg {
  color: #222222 !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-share-btn:hover {
  background: #eef0f3 !important;
}

body[data-layout1="true"] #parent-div.subcat-root h4 {
  color: #222222 !important;
}

body[data-layout1="true"] #parent-div.subcat-root h4 ~ svg {
  color: #5d6672 !important;
  background: transparent !important;
  border: none !important;
}

body[data-layout1="true"] #parent-div.subcat-root .MuiCard-root {
  background: #ffffff !important;
  border: 1px solid #e8ebef !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .MuiCard-root::before,
body[data-layout1="true"] #parent-div.subcat-root .MuiCard-root::after {
  display: none !important;
  content: none !important;
}

body[data-layout1="true"] #parent-div.subcat-root .MuiCard-root .MuiTypography-root {
  color: #222222 !important;
}

body[data-layout1="true"] #parent-div.subcat-root .clv-list-card {
  background: #ffffff !important;
  border: 1px solid #e8ebef !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .clv-list-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .clv-list-img-wrap {
  background: #f4f6f8 !important;
  border: 1px solid #dee3ea !important;
}

body[data-layout1="true"] #parent-div.subcat-root .clv-list-label {
  color: #222222 !important;
}

body[data-layout1="true"] #parent-div.subcat-root .clv-list-arrow {
  color: rgba(34, 34, 34, 0.45) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .phc-inner img {
  box-shadow: none !important;
}

body[data-layout1="true"] #parent-div.subcat-root .lt-toggle.lt-grid {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .lt-toggle.lt-grid .lt-thumb {
  background: #1565C0 !important;
  color: #fff !important;
}

/* Header bar: dark navy crystal */
body[data-layout2="true"] #parent-div .phc-bar {
  background: linear-gradient(135deg, #071828 0%, #0b2240 50%, #0d2a50 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow:
    0 2px 18px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(56, 189, 248, 0.22),
    inset 0 1px 0 rgba(56, 140, 255, 0.10) !important;
}

body[data-layout2="true"] #parent-div .phc-inner {
  background: transparent !important;
  border: none !important;
}

/* Page title */
body[data-layout2="true"] #parent-div .phc-page-title {
  color: #e8f4ff !important;
}

/* Back button */
body[data-layout2="true"] #parent-div .phc-back {
  background: rgba(10, 30, 60, 0.85) !important;
  border: 1px solid rgba(80, 160, 255, 0.40) !important;
  color: #b8d8f8 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

body[data-layout2="true"] #parent-div .phc-back:hover {
  background: rgba(15, 45, 85, 0.90) !important;
  box-shadow: 0 3px 12px rgba(30, 100, 255, 0.30) !important;
}

body[data-layout2="true"] #parent-div .phc-back-icon,
body[data-layout2="true"] #parent-div .phc-back-label {
  color: #b8d8f8 !important;
}

/* Search input */
body[data-layout2="true"] #parent-div .phc-search-input {
  background: rgba(8, 22, 42, 0.90) !important;
  border-color: rgba(80, 160, 255, 0.35) !important;
  color: #d6e4f2 !important;
}

body[data-layout2="true"] #parent-div .phc-search-input::-webkit-input-placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

body[data-layout2="true"] #parent-div .phc-search-input::placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

body[data-layout2="true"] #parent-div .phc-search-input:focus {
  border-color: rgba(56, 189, 248, 0.65) !important;
}

/* Page-scoped Theme Toggle: apply dark theme when #parent-div has `.theme-dark`.
   This mirrors the existing Layout 2 dark theme but is scoped only to this page
   and does not change global `body` attributes or layout mode. */
#parent-div.theme-dark {
  background-color: #081522 !important;
}

#parent-div.theme-dark .phc-bar {
  background: linear-gradient(135deg, #071828 0%, #0b2240 50%, #0d2a50 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow:
    0 2px 18px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(56, 189, 248, 0.22),
    inset 0 1px 0 rgba(56, 140, 255, 0.10) !important;
}

#parent-div.theme-dark .phc-inner {
  background: transparent !important;
  border: none !important;
}

#parent-div.theme-dark .phc-page-title {
  color: #e8f4ff !important;
}

#parent-div.theme-dark .phc-back {
  background: rgba(10, 30, 60, 0.85) !important;
  border: 1px solid rgba(80, 160, 255, 0.40) !important;
  color: #b8d8f8 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

#parent-div.theme-dark .phc-back:hover {
  background: rgba(15, 45, 85, 0.90) !important;
  box-shadow: 0 3px 12px rgba(30, 100, 255, 0.30) !important;
}

#parent-div.theme-dark .phc-back-icon,
#parent-div.theme-dark .phc-back-label {
  color: #b8d8f8 !important;
}

#parent-div.theme-dark .phc-search-input {
  background: rgba(8, 22, 42, 0.90) !important;
  border-color: rgba(80, 160, 255, 0.35) !important;
  color: #d6e4f2 !important;
}

#parent-div.theme-dark .phc-search-input::-webkit-input-placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

#parent-div.theme-dark .phc-search-input::placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

#parent-div.theme-dark .phc-search-input:focus {
  border-color: rgba(56, 189, 248, 0.65) !important;
}

/* List Theme (top switch RIGHT) — change only the All Categories back button
   to a dark blue background when the page-level `theme-light` class is present
   (this page's controlled List Theme). Only modifies this selector. */
#parent-div.theme-light .phc-back {
  background-color: #0d2a50 !important; /* dark blue */
}

#parent-div.theme-light .phc-back-icon,
#parent-div.theme-light .phc-back-label {
  color: #ffffff !important; /* ensure white icon/text remain visible */
}

/* Search button */
body[data-layout2="true"] #parent-div .phc-search-btn {
  background: linear-gradient(135deg, #1245b8 0%, #1a5cd4 100%) !important;
  box-shadow: 0 0 10px rgba(30, 100, 255, 0.40) !important;
  color: #fff !important;
}

body[data-layout2="true"] #parent-div .phc-search-btn:hover {
  background: linear-gradient(135deg, #1a5cd4 0%, #1e6ee0 100%) !important;
}

/* Share button */
body[data-layout2="true"] #parent-div .phc-share-btn {
  background: rgba(10, 30, 60, 0.85) !important;
  border: 1px solid rgba(80, 160, 255, 0.40) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

body[data-layout2="true"] #parent-div .phc-share-btn svg {
  color: #b8d8f8 !important;
}

body[data-layout2="true"] #parent-div .phc-share-btn:hover {
  background: rgba(15, 45, 85, 0.90) !important;
  box-shadow: 0 3px 12px rgba(30, 100, 255, 0.30) !important;
}

/* Section heading ("Sub Category") */
body[data-layout2="true"] #parent-div h4 {
  color: #e8f4ff !important;
}

/* View toggle icons (MdDashboard / GiHamburgerMenu) */
body[data-layout2="true"] #parent-div h4 ~ svg {
  color: #b8d8f8 !important;
}

/* Grid view: category cards — deep navy crystal */
body[data-layout2="true"] #parent-div .MuiCard-root {
  background: linear-gradient(160deg, #071828 0%, #0b2238 55%, #0e2a48 100%) !important;
  border: 1px solid rgba(56, 160, 255, 0.22) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(56, 189, 248, 0.08),
    0 0 16px rgba(20, 80, 200, 0.14),
    inset 1px 0 0 rgba(56, 189, 248, 0.06),
    inset -1px 0 0 rgba(56, 189, 248, 0.04) !important;
  position: relative;
  overflow: hidden;
}

/* Crystal top-edge accent on grid cards */
body[data-layout2="true"] #parent-div .MuiCard-root::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(56, 189, 248, 0.08) 0%,
    rgba(56, 189, 248, 0.45) 20%,
    rgba(125, 211, 252, 0.70) 50%,
    rgba(56, 189, 248, 0.45) 80%,
    rgba(56, 189, 248, 0.08) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Crystal left-edge corner glow on grid cards */
body[data-layout2="true"] #parent-div .MuiCard-root::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 35%;
  background: linear-gradient(180deg,
    rgba(125, 211, 252, 0.60) 0%,
    rgba(56, 189, 248, 0.25) 55%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Card text */
body[data-layout2="true"] #parent-div .MuiCard-root .MuiTypography-root {
  color: #e8f4ff !important;
}

/* List view cards: dark navy */
body[data-layout2="true"] #parent-div .clv-list-card {
  background: linear-gradient(160deg, #071828 0%, #0b2238 55%, #0e2a48 100%) !important;
  border: 1px solid rgba(56, 160, 255, 0.22) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(56, 189, 248, 0.08) !important;
}

body[data-layout2="true"] #parent-div .clv-list-card:hover {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.75),
    0 0 18px rgba(30, 100, 255, 0.25) !important;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

body[data-layout2="true"] #parent-div .clv-list-img-wrap {
  background: rgba(8, 22, 42, 0.80) !important;
  border: 1px solid rgba(56, 160, 255, 0.18) !important;
}

body[data-layout2="true"] #parent-div .clv-list-label {
  color: #e8f4ff !important;
}

body[data-layout2="true"] #parent-div .clv-list-arrow {
  color: rgba(100, 180, 240, 0.65) !important;
}

/* ─────────────────────────────────────────────────────────────────
   LAYOUT 1 ONLY — SubCategory page share button: soft grey background
   Scope: :not(body[data-layout2="true"]) #parent-div
   Does NOT affect Layout 2 or any other page.
───────────────────────────────────────────────────────────────── */
:not(body[data-layout2="true"]) #parent-div .phc-share-btn {
  background: rgba(90, 100, 115, 0.72) !important;
  border-color: rgba(120, 135, 155, 0.50) !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-share-btn svg {
  color: #ffffff !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-share-btn:hover {
  background: rgba(100, 112, 128, 0.85) !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-share-btn:active {
  background: rgba(75, 85, 98, 0.90) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CRYSTAL DARK BLUE THEME — Layout 1 (toggle OFF)
   Scope: :not(body[data-layout2="true"]) #parent-div
   SubCategory page only. All screens (mobile, tablet, desktop).
   Does NOT affect Layout 2 or any other page.
═══════════════════════════════════════════════════════════════ */

/* ── Page root: deep navy background ── */
:not(body[data-layout2="true"]) #parent-div {
  background-color: #081522 !important;
}

/* ── Sticky header bar ── */
:not(body[data-layout2="true"]) #parent-div .phc-bar {
  background: linear-gradient(135deg, #071828 0%, #0b2240 50%, #0d2a50 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow:
    0 2px 18px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(56, 189, 248, 0.22),
    inset 0 1px 0 rgba(56, 140, 255, 0.10) !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-inner {
  background: transparent !important;
  border: none !important;
}

/* ── Page title ── */
:not(body[data-layout2="true"]) #parent-div .phc-page-title {
  color: #e8f4ff !important;
  text-decoration: none !important;
}

/* ── Back button ── */
:not(body[data-layout2="true"]) #parent-div .phc-back {
  background: rgba(10, 30, 60, 0.85) !important;
  border: 1px solid rgba(80, 160, 255, 0.40) !important;
  color: #b8d8f8 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-back:hover {
  background: rgba(15, 45, 85, 0.90) !important;
  box-shadow: 0 3px 12px rgba(30, 100, 255, 0.30) !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-back-icon,
:not(body[data-layout2="true"]) #parent-div .phc-back-label {
  color: #b8d8f8 !important;
}

/* ── Search input ── */
:not(body[data-layout2="true"]) #parent-div .phc-search-input {
  background: rgba(8, 22, 42, 0.90) !important;
  border-color: rgba(80, 160, 255, 0.35) !important;
  color: #d6e4f2 !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-search-input::-webkit-input-placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-search-input::placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-search-input:focus {
  border-color: rgba(56, 189, 248, 0.65) !important;
}

/* ── Search button ── */
:not(body[data-layout2="true"]) #parent-div .phc-search-btn {
  background: linear-gradient(135deg, #1245b8 0%, #1a5cd4 100%) !important;
  box-shadow: 0 0 10px rgba(30, 100, 255, 0.40) !important;
  color: #fff !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-search-btn:hover {
  background: linear-gradient(135deg, #1a5cd4 0%, #1e6ee0 100%) !important;
}

/* ── Share button (overrides the grey rule above with crystal style) ── */
:not(body[data-layout2="true"]) #parent-div .phc-share-btn {
  background: rgba(10, 30, 60, 0.85) !important;
  border: 1px solid rgba(80, 160, 255, 0.40) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-share-btn svg {
  color: #b8d8f8 !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-share-btn:hover {
  background: rgba(15, 45, 85, 0.90) !important;
  box-shadow: 0 3px 12px rgba(30, 100, 255, 0.30) !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-share-btn:active {
  background: rgba(8, 22, 50, 0.95) !important;
}

/* ── Section heading ("Sub Category") ── */
:not(body[data-layout2="true"]) #parent-div h4 {
  color: #e8f4ff !important;
}

/* ── View toggle icons (MdDashboard / GiHamburgerMenu) ── */
:not(body[data-layout2="true"]) #parent-div h4 ~ svg {
  color: #b8d8f8 !important;
}

/* ── Grid view: category cards — deep navy crystal ── */
:not(body[data-layout2="true"]) #parent-div .MuiCard-root {
  background: linear-gradient(160deg, #071828 0%, #0b2238 55%, #0e2a48 100%) !important;
  border: 1px solid rgba(56, 160, 255, 0.22) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(56, 189, 248, 0.08),
    0 0 16px rgba(20, 80, 200, 0.14),
    inset 1px 0 0 rgba(56, 189, 248, 0.06),
    inset -1px 0 0 rgba(56, 189, 248, 0.04) !important;
  position: relative;
  overflow: hidden;
}

/* Crystal top-edge highlight */
:not(body[data-layout2="true"]) #parent-div .MuiCard-root::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(56, 189, 248, 0.08) 0%,
    rgba(56, 189, 248, 0.45) 20%,
    rgba(125, 211, 252, 0.70) 50%,
    rgba(56, 189, 248, 0.45) 80%,
    rgba(56, 189, 248, 0.08) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Crystal left-edge corner glow */
:not(body[data-layout2="true"]) #parent-div .MuiCard-root::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 35%;
  background: linear-gradient(180deg,
    rgba(125, 211, 252, 0.60) 0%,
    rgba(56, 189, 248, 0.25) 55%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── Card text ── */
:not(body[data-layout2="true"]) #parent-div .MuiCard-root .MuiTypography-root {
  color: #e8f4ff !important;
}

/* ── List view cards: dark navy crystal ── */
:not(body[data-layout2="true"]) #parent-div .clv-list-card {
  background: linear-gradient(160deg, #071828 0%, #0b2238 55%, #0e2a48 100%) !important;
  border: 1px solid rgba(56, 160, 255, 0.22) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(56, 189, 248, 0.08) !important;
  -webkit-tap-highlight-color: rgba(56, 189, 248, 0.10);
}

:not(body[data-layout2="true"]) #parent-div .clv-list-card:hover {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.75),
    0 0 18px rgba(30, 100, 255, 0.25) !important;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

:not(body[data-layout2="true"]) #parent-div .clv-list-card:active {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.60),
    0 0 6px rgba(30, 100, 255, 0.15) !important;
}

/* ── List card image wrap ── */
:not(body[data-layout2="true"]) #parent-div .clv-list-img-wrap {
  background: rgba(8, 22, 42, 0.80) !important;
  border: 1px solid rgba(56, 160, 255, 0.18) !important;
}

/* ── List card label ── */
:not(body[data-layout2="true"]) #parent-div .clv-list-label {
  color: #e8f4ff !important;
}

/* ── List card arrow ── */
:not(body[data-layout2="true"]) #parent-div .clv-list-arrow {
  color: rgba(100, 180, 240, 0.65) !important;
}

/* ── Mobile/tablet header inner (overrides the blue #e3f0fb rule above) ── */
:not(body[data-layout2="true"]) #parent-div .phc-inner {
  background: transparent !important;
  border: none !important;
}

:not(body[data-layout2="true"]) #parent-div .phc-page-title {
  color: #e8f4ff !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROUNDED CORNERS + CRYSTAL IMAGE/ICON STYLING — Layout 1 Only
   Scope: :not(body[data-layout2="true"]) #parent-div
   SubCategory page only. Desktop, Tablet, Mobile.
   Does NOT affect Layout 2 or any other page.
═══════════════════════════════════════════════════════════════ */

/* ── Cover image (banner at top of header) ── */
:not(body[data-layout2="true"]) #parent-div .phc-inner img {
  border-radius: 8px !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(56, 189, 248, 0.18) !important;
}

/* ── Header icon buttons: back, share — subtle rounded corners ── */
:not(body[data-layout2="true"]) #parent-div .phc-back,
:not(body[data-layout2="true"]) #parent-div .phc-share-btn {
  border-radius: 8px !important;
}

/* ── Search button rounded right corner ── */
:not(body[data-layout2="true"]) #parent-div .phc-search-btn {
  border-radius: 0 8px 8px 0 !important;
}

/* ── Search input rounded left corner ── */
:not(body[data-layout2="true"]) #parent-div .phc-search-input {
  border-radius: 8px 0 0 8px !important;
}

/* ── LayoutToggle container ── */
:not(body[data-layout2="true"]) #parent-div .lt-toggle {
  border-radius: 8px !important;
}

/* Page-scoped: active GRID appearance for the LayoutToggle on this page only
   (targets the LayoutToggle when GRID is active under #parent-div). This
   restores a light theme for GRID without touching global LayoutToggle.css
   or Header.css, and it has higher specificity to win on this page. */
:not(body[data-layout2="true"]) #parent-div .lt-toggle.lt-grid {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
}

/* Ensure the thumb keeps good contrast (blue thumb over light background) */
:not(body[data-layout2="true"]) #parent-div .lt-toggle.lt-grid .lt-thumb {
  background: #1565C0 !important;
  color: #fff !important;
}

/* Page-scoped GRID-only light theme overrides */
:not(body[data-layout2="true"]) #parent-div.is-grid {
  background-color: #f7f8fb !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .clv-body {
  background: #f3f4f6 !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-bar {
  background: linear-gradient(180deg, #ffffff 0%, #eef2f5 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-inner {
  background: transparent !important;
  border: none !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-page-title,
:not(body[data-layout2="true"]) #parent-div.is-grid .clv-section-title {
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-back {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-back:hover {
  background: #f3f4f6 !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-back-icon,
:not(body[data-layout2="true"]) #parent-div.is-grid .phc-back-label {
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-search-input {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #111827 !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-search-input::-webkit-input-placeholder {
  color: #94a3b8 !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-search-input::placeholder {
  color: #94a3b8 !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-search-input:focus {
  border-color: #a5b4fc !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-search-btn {
  background: #eef2f5 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-search-btn:hover {
  background: #e5e7eb !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-share-btn {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-share-btn svg {
  color: #2563eb !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-share-btn:hover {
  background: #eef2f5 !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid h4 ~ svg,
:not(body[data-layout2="true"]) #parent-div.is-grid .clv-view-icon {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .MuiCard-root {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .MuiCard-root:hover,
:not(body[data-layout2="true"]) #parent-div.is-grid .MuiCard-root:active {
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .MuiCard-root::before,
:not(body[data-layout2="true"]) #parent-div.is-grid .MuiCard-root::after {
  display: none !important;
  content: none !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .MuiCard-root img {
  -webkit-filter: none !important;
          filter: none !important;
}

:not(body[data-layout2="true"]) #parent-div.is-grid .phc-inner img {
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM DARK BLUE CRYSTAL / GLASS — ALL CATEGORIES LIST MODE ONLY
   Scope: #parent-div.clv-root.is-list
   Applies to: Desktop (≥1025px) · Tablet (600–1024px) · Mobile (<600px)
   GRID MODE (#parent-div.clv-root.is-grid) is 100% UNTOUCHED.
════════════════════════════════════════════════════════════════════════ */

/* ─── 1. PAGE ROOT — deep navy radial gradient base ─── */
#parent-div.clv-root.is-list {
  background: radial-gradient(ellipse at 20% 0%, #0f2244 0%, #0a1628 50%, #050d1a 100%) !important;
  min-height: 100vh !important;
}

/* ─── 2. BODY WRAPPER — slightly lighter, adds mid-depth layer ─── */
#parent-div.clv-root.is-list .clv-body {
  background: transparent !important;
}

/* ─── 3. STICKY HEADER BAR — multi-tone dark blue crystal ─── */
#parent-div.clv-root.is-list .phc-bar {
  background: linear-gradient(180deg, #0d2248 0%, #091c3e 60%, #071428 100%) !important;
  border-bottom: 1px solid rgba(100, 180, 255, 0.25) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.75),
    0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(125, 211, 252, 0.18),
    inset 0 -1px 0 rgba(56, 130, 240, 0.12) !important;
  position: relative !important;
}

/* Header inner top-edge crystal highlight line */
#parent-div.clv-root.is-list .phc-bar::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(125, 211, 252, 0.4) 25%,
    rgba(200, 235, 255, 0.75) 50%,
    rgba(125, 211, 252, 0.4) 75%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#parent-div.clv-root.is-list .phc-inner {
  background: transparent !important;
  border: none !important;
}

/* ─── 4. PAGE TITLE ─── */
#parent-div.clv-root.is-list .phc-page-title {
  color: #d8eeff !important;
  text-shadow: 0 1px 6px rgba(56, 150, 255, 0.6) !important;
}

/* ─── 5. SECTION TITLE (All Categories) ─── */
#parent-div.clv-root.is-list .clv-section-title {
  color: #c8e8ff !important;
  text-shadow: 0 1px 4px rgba(30, 100, 200, 0.5) !important;
}

/* ─── 6. BACK BUTTON — crystal glass ─── */
#parent-div.clv-root.is-list .phc-back {
  background: linear-gradient(145deg, #112240 0%, #0d1a33 60%, #081020 100%) !important;
  border: 1px solid rgba(80, 160, 255, 0.35) !important;
  color: #b8d8f8 !important;
  border-radius: 8px !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.55),
    inset 1px 1px 0 rgba(125, 211, 252, 0.30),
    inset -1px -1px 0 rgba(0, 0, 0, 0.45) !important;
  position: relative !important;
  overflow: hidden !important;
}

#parent-div.clv-root.is-list .phc-back::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.18) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}

#parent-div.clv-root.is-list .phc-back:hover {
  background: linear-gradient(145deg, #162b50 0%, #112040 100%) !important;
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.65),
    0 0 10px rgba(56, 150, 255, 0.2),
    inset 1px 1px 0 rgba(125, 211, 252, 0.45) !important;
}

#parent-div.clv-root.is-list .phc-back-icon,
#parent-div.clv-root.is-list .phc-back-label {
  position: relative !important;
  z-index: 2 !important;
  color: #b8d8f8 !important;
}

/* ─── 7. SEARCH INPUT ─── */
#parent-div.clv-root.is-list .clv-search-input {
  background: linear-gradient(180deg, #0a1628 0%, #0d1e35 100%) !important;
  border: 1px solid rgba(80, 160, 255, 0.30) !important;
  color: #d6e8f8 !important;
  border-radius: 8px !important;
  box-shadow:
    inset 1px 2px 6px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#parent-div.clv-root.is-list .clv-search-input::-webkit-input-placeholder {
  color: rgba(150, 195, 235, 0.5) !important;
}

#parent-div.clv-root.is-list .clv-search-input::placeholder {
  color: rgba(150, 195, 235, 0.5) !important;
}

#parent-div.clv-root.is-list .clv-search-input:focus {
  border-color: rgba(100, 180, 255, 0.65) !important;
  box-shadow:
    inset 1px 2px 6px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(56, 150, 255, 0.25) !important;
  outline: none !important;
}

/* ─── 8. SECTION HEADER ROW ─── */
#parent-div.clv-root.is-list .clv-section-header {
  background: linear-gradient(180deg, rgba(12, 30, 60, 0.95) 0%, rgba(8, 20, 40, 0.90) 100%) !important;
  border-bottom: 1px solid rgba(80, 160, 255, 0.18) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 0.6rem 0.75rem !important;
  margin-bottom: 0.25rem !important;
  box-shadow:
    inset 0 1px 0 rgba(125, 211, 252, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
}

/* Section header top crystal rim */
#parent-div.clv-root.is-list .clv-section-header::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.55), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ─── 9. VIEW TOGGLE ICON ─── */
#parent-div.clv-root.is-list .clv-view-icon {
  color: #b8d8f8 !important;
  background: rgba(10, 30, 60, 0.70) !important;
  border: 1px solid rgba(80, 160, 255, 0.28) !important;
  border-radius: 6px !important;
  padding: 3px !important;
  box-sizing: content-box !important;
  box-shadow:
    inset 1px 1px 0 rgba(125, 211, 252, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* ─── 10. LIST BODY WRAPPER ─── */
#parent-div.clv-root.is-list .clv-list-body {
  background: transparent !important;
}

/* ─── 11. LIST CARDS — premium 3D crystal glass ─── */
#parent-div.clv-root.is-list .clv-list-card {
  background: linear-gradient(150deg, #0e2040 0%, #0a1830 50%, #06101e 100%) !important;
  border: 1px solid rgba(60, 140, 255, 0.22) !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.70),
    0 2px 6px rgba(0, 0, 0, 0.50),
    inset 1px 1px 0 rgba(125, 211, 252, 0.30),   /* TOP-LEFT crystal rim */
    inset -1px -1px 0 rgba(0, 0, 0, 0.50) !important;  /* BOTTOM-RIGHT dark edge */
  transition:
    box-shadow 0.22s ease,
    -webkit-transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease !important;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    -webkit-transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  -webkit-tap-highlight-color: rgba(56, 189, 248, 0.12) !important;
}

/* Crystal diagonal glare across card surface */
#parent-div.clv-root.is-list .clv-list-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  /* BRIGHT TOP-LEFT → transparent → DARK BOTTOM-RIGHT */
  background: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(125, 211, 252, 0.10) 12%,
    transparent 25%,
    transparent 75%,
    rgba(0, 0, 0, 0.18) 100%
  ) !important;
}

/* Crystal top-edge reflection line */
#parent-div.clv-root.is-list .clv-list-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(125, 211, 252, 0.50) 30%,
    rgba(200, 235, 255, 0.80) 50%,
    rgba(125, 211, 252, 0.50) 70%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Card hover — lift + brightened crystal */
#parent-div.clv-root.is-list .clv-list-card:hover {
  -webkit-transform: translateY(-2px) !important;
          transform: translateY(-2px) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.80),
    0 4px 10px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(56, 150, 255, 0.20),
    inset 1px 1px 0 rgba(125, 211, 252, 0.50),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55) !important;
}

/* Card active / press */
#parent-div.clv-root.is-list .clv-list-card:active {
  -webkit-transform: scale(0.98) !important;
          transform: scale(0.98) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.60),
    inset 1px 1px 0 rgba(125, 211, 252, 0.20) !important;
}

/* ─── 12. IMAGE WRAP — crystal glass frame ─── */
#parent-div.clv-root.is-list .clv-list-img-wrap {
  background: linear-gradient(145deg, #0d2244 0%, #081a30 100%) !important;
  border: 1px solid rgba(56, 140, 255, 0.28) !important;
  border-radius: 10px !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.50),
    inset 1px 1px 0 rgba(125, 211, 252, 0.22),
    inset -1px -1px 0 rgba(0, 0, 0, 0.40) !important;
  position: relative !important;
  z-index: 3 !important;
  flex-shrink: 0 !important;
}

/* ─── 13. CARD TEXT & LABEL ─── */
#parent-div.clv-root.is-list .clv-list-label {
  position: relative !important;
  z-index: 3 !important;
  color: #d8eeff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.70) !important;
}

/* ─── 14. ARROW ICON ─── */
#parent-div.clv-root.is-list .clv-list-arrow {
  color: rgba(100, 180, 240, 0.60) !important;
  position: relative !important;
  z-index: 3 !important;
  border-radius: 4px !important;
}



/* Image inside CategoreyCard grid */
:not(body[data-layout2="true"]) #parent-div .MuiCard-root img {
  border-radius: 6px !important;
  -webkit-filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.40)) !important;
          filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.40)) !important;
}

/* ── List view: image wrap rounded corners ── */
:not(body[data-layout2="true"]) #parent-div .clv-list-img-wrap {
  border-radius: 10px !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(56, 189, 248, 0.14) !important;
}

/* List card image itself */
:not(body[data-layout2="true"]) #parent-div .clv-list-img {
  border-radius: 7px !important;
}

/* ── List card: rounded corners ── */
:not(body[data-layout2="true"]) #parent-div .clv-list-card {
  border-radius: 12px !important;
}

/* ── ChevronRight arrow icon: subtle rounded container feel ── */
:not(body[data-layout2="true"]) #parent-div .clv-list-arrow {
  border-radius: 4px !important;
}

/* ── MdDashboard / GiHamburgerMenu toggle icon: wrap with rounded bg ── */
:not(body[data-layout2="true"]) #parent-div h4 ~ svg {
  border-radius: 6px !important;
  padding: 3px !important;
  background: rgba(10, 30, 60, 0.60) !important;
  border: 1px solid rgba(80, 160, 255, 0.30) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.30) !important;
  box-sizing: content-box !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROUNDED WHITE ICON CONTAINERS — Layout 1 Only
   Scope: :not(body[data-layout2="true"]) #parent-div
   Targets the inner image/icon wrapper div inside each grid card.
   SubCategory page only. Does NOT affect Layout 2.
═══════════════════════════════════════════════════════════════ */

/* Inner image wrapper div (the white container holding the icon) */
:not(body[data-layout2="true"]) #parent-div .MuiCard-root > div > div:first-child {
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════
   LIST MODE ONLY — Section header panel: premium dark blue crystal
   Scope: #parent-div.clv-root.is-list .clv-section-header
   Placed last so cascade order wins over all earlier rules.
   GRID MODE is 100% untouched — .clv-section-header inside is-grid
   is never matched by these selectors.
══════════════════════════════════════════════════════════════════════ */
#parent-div.clv-root.is-list .clv-section-header {
  background: linear-gradient(
    160deg,
    #0d2248 0%,
    #091c3e 50%,
    #071428 100%
  ) !important;
  border-bottom: 1px solid rgba(80, 160, 255, 0.22) !important;
  border-radius: 10px !important;
  padding: 0.6rem 0.75rem !important;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(140, 210, 255, 0.20),
    inset 0 -1px 0 rgba(30, 80, 200, 0.12) !important;
  position: relative !important;
}

/* Crystal top-edge shimmer line */
#parent-div.clv-root.is-list .clv-section-header::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(140, 210, 255, 0.45) 30%,
    rgba(210, 240, 255, 0.80) 50%,
    rgba(140, 210, 255, 0.45) 70%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}

/* Title text — light blue so it reads on dark bg */
#parent-div.clv-root.is-list .clv-section-header .clv-section-title {
  color: #c8e4ff !important;
  text-shadow: 0 1px 6px rgba(30, 100, 200, 0.55) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Toggle icon — light blue on dark bg */
#parent-div.clv-root.is-list .clv-section-header .clv-view-icon {
  color: #90c8f8 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ── Grid mode only: white card backgrounds on SubCategory page ── */
body[data-layout1="true"] #parent-div.subcat-root .MuiCard-root {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15) !important;
}

body[data-layout1="true"] #parent-div.subcat-root .MuiCard-root::before,
body[data-layout1="true"] #parent-div.subcat-root .MuiCard-root::after {
  display: none !important;
  content: none !important;
}

body[data-layout1="true"] #parent-div.subcat-root .MuiCard-root .MuiTypography-root {
  color: #555555 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SUBCATEGORY PAGE — GRID MODE VISUAL REDESIGN
   Classes: .scg-*  (subcategory-grid)
   Applied ONLY inside the grid panel (toggle === false).
   List mode is 100% untouched.
═══════════════════════════════════════════════════════════════ */

/* ── Category header strip ── */
.scg-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #dbeeff;
  border: 1px solid #b3d8f8;
  border-radius: 10px;
  padding: 9px 14px;
  margin: 0.75rem 0.75rem 0;
}

.scg-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.scg-header-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.scg-header-name {
  font-size: 13px;
  font-weight: 700;
  color: #0d3a6e;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scg-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.scg-header-count {
  font-size: 11px;
  font-weight: 600;
  color: #1565c0;
  background: #ffffff;
  border: 1px solid #b3d8f8;
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}

.scg-toggle-icon {
  font-size: 24px !important;
  cursor: pointer;
  color: #1565c0;
  flex-shrink: 0;
}

/* ── Dark-gray grid background ── */
.scg-grid-bg {
  background: #2e3440;
  border-radius: 10px;
  margin: 0.5rem 0.75rem 0;
  padding: 0.75rem;
}

/* ── White subcategory cards — override dark-blue CSS rules ── */
.scg-grid-bg .MuiCard-root {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10) !important;
}

.scg-grid-bg .MuiCard-root::before,
.scg-grid-bg .MuiCard-root::after {
  display: none !important;
  content: none !important;
}

.scg-grid-bg .MuiCard-root .MuiTypography-root {
  color: #444444 !important;
}

.scg-grid-bg .MuiCard-root img {
  -webkit-filter: none !important;
          filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SUBCATEGORY PAGE — GRID MODE HEADER & SEARCH IMPROVEMENTS
   Scope: #parent-div[data-grid-mode="true"]
   List mode (data-grid-mode absent) is 100% untouched.
═══════════════════════════════════════════════════════════════ */

/* ── Light-green accent on the inner header pill ── */
#parent-div[data-grid-mode="true"] .phc-inner {
  background: #e8f5e9 !important;
  border: 1px solid #a5d6a7 !important;
  border-radius: 8px !important;
}

/* ── "All Categories" back button — clear blue ── */
#parent-div[data-grid-mode="true"] .phc-back {
  background: #1565c0 !important;
  border: 1px solid #1565c0 !important;
  box-shadow: 0 1px 4px rgba(21, 101, 192, 0.30) !important;
  color: #ffffff !important;
}

#parent-div[data-grid-mode="true"] .phc-back:hover {
  background: #0d47a1 !important;
  box-shadow: 0 3px 10px rgba(21, 101, 192, 0.40) !important;
}

#parent-div[data-grid-mode="true"] .phc-back-icon,
#parent-div[data-grid-mode="true"] .phc-back-label {
  color: #ffffff !important;
}

/* ── Page title — dark, readable on light-green bg ── */
#parent-div[data-grid-mode="true"] .phc-page-title {
  color: #1b5e20 !important;
  text-decoration: none !important;
}

/* ── Search input — clean white ── */
#parent-div[data-grid-mode="true"] .phc-search-input {
  background: #ffffff !important;
  border: 1px solid #c8e6c9 !important;
  border-right: none !important;
  color: #1a1a1a !important;
  border-radius: 8px 0 0 8px !important;
}

#parent-div[data-grid-mode="true"] .phc-search-input::-webkit-input-placeholder {
  color: #90a4ae !important;
}

#parent-div[data-grid-mode="true"] .phc-search-input::placeholder {
  color: #90a4ae !important;
}

#parent-div[data-grid-mode="true"] .phc-search-input:focus {
  border-color: #66bb6a !important;
  outline: none !important;
}

/* ── Circular search button ── */
.phc-search-btn--circle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #1565c0 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
  /* detach from the input's joined border */
  margin-left: 6px !important;
}

.phc-search-btn--circle:hover {
  background: #0d47a1 !important;
  box-shadow: 0 4px 10px rgba(21, 101, 192, 0.45) !important;
}

.phc-search-btn--circle:active {
  -webkit-transform: scale(0.94) !important;
          transform: scale(0.94) !important;
}

/* When circle button is used, round the right side of the input too */
#parent-div[data-grid-mode="true"] .phc-search-input {
  border-radius: 8px !important;
  border-right: 1px solid #c8e6c9 !important;
}

/* =================================================================
   ProductDetails.css - Premium Desktop Responsive Layout (Full Width)
================================================================= */

/* Main layout wrapper */
.product-details-root {
  width: 100%;
  box-sizing: border-box;
}

.product-details-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* ── Desktop: image left, info panel right ── */
@media (min-width: 960px) {
  .product-details-root {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 24px;
    padding: 24px;
    box-sizing: border-box;
  }

  /* Left column: slideshow + desktop mini carousel stacked */
  .pd-left-col {
    flex: 0 0 51%;
    width: 51%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    align-self: flex-start;
  }

  /* Constrain slideshow height so left col bottom aligns with right panel bottom.
     Right panel = 487px. Mini carousel wrap = ~117px (101px thumb + 16px padding).
     Slideshow height = 487px - 12px gap - 117px = 358px. */
  .product-carousel-section {
    position: relative;
    width: 100%;
    height: 358px;
    border-radius: 10px;
    overflow: hidden;
    /* Premium 3D: outer shadow + thin white border */
    box-shadow:
      0 6px 28px rgba(0, 0, 0, 0.18),
      0 2px 8px rgba(0, 0, 0, 0.10);
    border: 1.5px solid rgba(255, 255, 255, 0.72);
    outline: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* Force HeroCarousel to fill the constrained height */
  .product-carousel-section > div,
  .product-carousel-section .MuiBox-root {
    height: 100% !important;
  }

  /* Premium inner shadow overlay on the slideshow */
  .product-carousel-section::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 22px 5px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    z-index: 10;
  }

  .product-details-main {
    flex: 0 0 49%;
    width: 49%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .product-info-section {
    height: 487px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .product-info-section .product-content {
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Desktop mini carousel */
  .pd-desk-mini-carousel-wrap {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 8px 0;
    box-sizing: border-box;
  }

  .pd-desk-mini-carousel-wrap:hover .pd-desk-mini-carousel-track {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }

  .pd-desk-mini-carousel-track {
    display: flex;
    gap: 10px;
    padding: 0 10px;
    /* Speed increased ~16%: 32s → 27s */
    -webkit-animation: pd-desk-scroll 27s linear infinite;
            animation: pd-desk-scroll 27s linear infinite;
    will-change: transform;
  }

  @-webkit-keyframes pd-desk-scroll {
    0%   { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  }

  @keyframes pd-desk-scroll {
    0%   { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  }

  .pd-desk-mini-thumb {
    flex: 0 0 auto;
    width: 151px;
    height: 101px;
    border-radius: 7px;
    overflow: hidden;
    /* Premium thumb: outer + inner shadow */
    border: 1px solid rgba(255, 255, 255, 0.6);
    outline: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow:
      0 3px 10px rgba(0, 0, 0, 0.14),
      inset 0 0 8px 2px rgba(0, 0, 0, 0.18);
    background: #f5f5f5;
    position: relative;
  }

  .pd-desk-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

@media (min-width: 1280px) {
  .product-info-section {
    height: 526px;
  }
  /* Recalculate: 526px - 12px gap - 117px mini carousel = 397px */
  .product-carousel-section {
    height: 397px;
  }
}

/* ── pd-left-col: no-op on mobile (children flow normally) ── */
@media (max-width: 959px) {
  .pd-left-col {
    width: 100%;
  }
  .pd-desk-mini-carousel-wrap {
    display: none;
  }
  /* Keep action icons in normal document flow on mobile */
  .pd-action-group {
    position: static;
  }
}

/* Carousel Section at top root level (Full Width edge-to-edge) */
.product-carousel-section {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Mobile: card-style slideshow with margins, radius, inner shadow ── */
@media (max-width: 959px) {
  .product-carousel-section {
    padding: 10px 12px 0;
    box-sizing: border-box;
  }

  .product-carousel-section > div,
  .product-carousel-section .MuiBox-root:first-child {
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.14),
      inset 0 0 18px 4px rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
}

/* Sections */
.product-info-section {
  width: 100%;
}

.product-catalog-section {
  width: 100%;
  background: linear-gradient(180deg, #dff8e8 0%, #c8efda 100%);
}

@media (min-width: 960px) {
  .product-catalog-section {
    padding: 0 24px 24px;
    box-sizing: border-box;
  }
}

.product-details-header {
  display: flex;
  width: 100%;
  align-items: center;
  z-index: 1000;
  background: #edf7ed;
  height: 50px;
  padding: 0px 15px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.product-details-header-inner {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Info card styling */
.product-content {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  z-index: 101;
  position: relative;
  transition: all 0.3s ease;
}

@media (min-width: 960px) {
  .product-content {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 24px !important;
  }

  /* Action icons: lift to upper-right corner of the info panel */
  .pd-action-group {
    position: absolute;
    top: 13px;
    right: 20px;
    z-index: 2;
  }
}

.social-media {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0px 2.5px 5px rgba(22, 107, 142, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  will-change: transform;
  transition: box-shadow 280ms ease-out,
              -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              -webkit-filter 280ms ease-out;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 280ms ease-out,
              filter 280ms ease-out;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 280ms ease-out,
              filter 280ms ease-out,
              -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              -webkit-filter 280ms ease-out;
}

.social-media:hover {
  -webkit-transform: translateY(-3px) scale(1.08);
          transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 20px rgba(22, 107, 142, 0.30);
  -webkit-filter: brightness(1.06);
          filter: brightness(1.06);
}

.social-media:active {
  -webkit-transform: translateY(1px) scale(0.93);
          transform: translateY(1px) scale(0.93);
  box-shadow: 0 2px 5px rgba(22, 107, 142, 0.15);
  -webkit-filter: brightness(0.92);
          filter: brightness(0.92);
}

.pro-btn {
  border-radius: 24px !important;
  width: 69px !important;
  height: 32px !important;
}

.typo-name {
  border-bottom-left-radius: 10px ;
  border-bottom-right-radius: 10px ;
  position: absolute ;
  text-align: center !important;
  background: #c5adad ;
  left: 50% ;
  top: 0;
  -webkit-transform: translate(-50%, 0px) ;
          transform: translate(-50%, 0px) ;
  padding: 0px 6px !important;
  font-size: 12px !important;
  line-height: 15px !important ;
  width: -webkit-max-content !important;
  width: max-content !important;
}

@media (max-width: 959px) {
  .img-parent {
    padding-bottom: 2px;
  }
  .img-parent--fourCol {
    padding-bottom: 4mm;
  }
  .product-catalog-section .catalog-card--fourCol {
    min-height: 80vh;
  }
}

.img-parent {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
}

@media (max-width: 959px) {
  .img-parent--fourCol {
    aspect-ratio: 2 / 1.2;
  }
  .img-parent--grid {
    aspect-ratio: 1 / 1;
  }
  .img-parent--tall {
    aspect-ratio: 1 / 2;
  }
}

.img-parent--tall {
  aspect-ratio: 1 / 1.414;
}

@media (min-width: 960px) {
  .img-parent--tall {
    aspect-ratio: 1 / 1.5;
    width: 100%;
  }
  .img-parent--fourCol {
    aspect-ratio: 1 / 0.7;
  }
  /* Consistent radius on catalogue thumbnails — desktop only */
  .img-parent {
    border-radius: 7px;
  }
}

.img-parent img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-parent--fourCol img {
  object-fit: cover;
  width: 100%;
}

.img-child {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, 0.35);
  border: none;
  z-index: 1000;
}

.yarl__root {
  z-index: 10000 !important;
}

/* ── Mini Catalogue Carousel: mobile-only ── */
@media (min-width: 960px) {
  .pd-mini-carousel-wrap {
    display: none;
  }
}

/* ── Mobile-only: Mini Catalogue Carousel ── */
@media (max-width: 959px) {
  .pd-mini-carousel-wrap {
    margin: 10px 12px 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 7px 0;
    /* pause on touch */
    -webkit-tap-highlight-color: transparent;
  }

  .pd-mini-carousel-wrap:hover .pd-mini-carousel-track,
  .pd-mini-carousel-wrap:active .pd-mini-carousel-track {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }

  .pd-mini-carousel-track {
    display: flex;
    gap: 8px;
    padding: 0 8px;
    /* width = (thumbWidth + gap) * totalItems — set via animation */
    -webkit-animation: pd-mini-scroll 28s linear infinite;
            animation: pd-mini-scroll 28s linear infinite;
    will-change: transform;
  }

  @-webkit-keyframes pd-mini-scroll {
    0%   { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  }

  @keyframes pd-mini-scroll {
    0%   { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  }

  .pd-mini-thumb {
    flex: 0 0 auto;
    width: 126px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    background: #f5f5f5;
  }

  .pd-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

.product-hero-wrapper {
  overflow: hidden;
  background: #000;
  padding: 0 6px;
}

.product-hero-wrapper .carousel .slide img,
.product-hero-wrapper .carousel .slide > div img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  object-position: left top;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35);
  object-fit: cover;
}

.product-hero-wrapper .carousel {
  background: #000;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM ACTION BUTTONS  (View / Favourite / Share)
═══════════════════════════════════════════════════════════════ */
.pd-action-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pd-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffffff, #f0f2f5);
  box-shadow:
    3px 3px 7px rgba(0, 0, 0, 0.13),
    -2px -2px 5px rgba(255, 255, 255, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(220, 225, 232, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition:
    box-shadow 270ms ease-out,
    background 270ms ease,
    -webkit-transform 270ms cubic-bezier(0.34, 1.56, 0.64, 1),
    -webkit-filter 270ms ease;
  transition:
    transform 270ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 270ms ease-out,
    background 270ms ease,
    filter 270ms ease;
  transition:
    transform 270ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 270ms ease-out,
    background 270ms ease,
    filter 270ms ease,
    -webkit-transform 270ms cubic-bezier(0.34, 1.56, 0.64, 1),
    -webkit-filter 270ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* ── Per-button hover glow colours ── */
.pd-action-btn--view:hover {
  -webkit-transform: translateY(-3px) scale(1.05);
          transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 6px 18px rgba(33, 130, 177, 0.28),
    -2px -2px 5px rgba(255, 255, 255, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: linear-gradient(145deg, #f0f7ff, #e4f0fb);
}

.pd-action-btn--fav:hover {
  -webkit-transform: translateY(-3px) scale(1.05);
          transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 6px 18px rgba(229, 57, 53, 0.24),
    -2px -2px 5px rgba(255, 255, 255, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: linear-gradient(145deg, #fff5f5, #fde8e8);
}

.pd-action-btn--share:hover {
  -webkit-transform: translateY(-3px) scale(1.05);
          transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 6px 18px rgba(46, 125, 50, 0.24),
    -2px -2px 5px rgba(255, 255, 255, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: linear-gradient(145deg, #f2faf2, #e4f4e4);
}

/* ── Press / active ── */
.pd-action-btn:active {
  -webkit-transform: translateY(1px) scale(0.94);
          transform: translateY(1px) scale(0.94);
  box-shadow:
    1px 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 2px 4px rgba(0, 0, 0, 0.08);
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95);
}

/* ── Badge (view / call count) ── */
.pd-action-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  background: #b43636;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 9px;
  padding: 2px 4px;
  min-width: 15px;
  text-align: center;
  line-height: 12px;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(180, 54, 54, 0.4);
}

/* MUI Checkbox inside the fav button: remove its own padding/ripple area */
.pd-action-btn--fav .MuiCheckbox-root {
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM DARK CRYSTAL THEME  —  Layout 2 (right toggle) · Desktop only
   Scoped to .pd-dark-page · mirrors Recognitions page design language
   Mobile (≤959px) is completely untouched.
═══════════════════════════════════════════════════════════════════════ */

/* ── Keyframes (declared globally so they work inside media query) ── */
@-webkit-keyframes pd-bg-drift {
  0%,100% { opacity: 0.82; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }
  33%      { opacity: 0.90; -webkit-transform: translateX(5px) translateY(-4px); transform: translateX(5px) translateY(-4px); }
  66%      { opacity: 0.85; -webkit-transform: translateX(-4px) translateY(5px); transform: translateX(-4px) translateY(5px); }
}
@keyframes pd-bg-drift {
  0%,100% { opacity: 0.82; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); }
  33%      { opacity: 0.90; -webkit-transform: translateX(5px) translateY(-4px); transform: translateX(5px) translateY(-4px); }
  66%      { opacity: 0.85; -webkit-transform: translateX(-4px) translateY(5px); transform: translateX(-4px) translateY(5px); }
}
@-webkit-keyframes pd-shimmer {
  0%   { -webkit-transform: translateX(-130%) skewX(-18deg); transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { -webkit-transform: translateX(230%) skewX(-18deg); transform: translateX(230%) skewX(-18deg); opacity: 0; }
}
@keyframes pd-shimmer {
  0%   { -webkit-transform: translateX(-130%) skewX(-18deg); transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { -webkit-transform: translateX(230%) skewX(-18deg); transform: translateX(230%) skewX(-18deg); opacity: 0; }
}
@-webkit-keyframes pd-card-reflect {
  0%   { -webkit-transform: translateX(-160%) skewX(-20deg); transform: translateX(-160%) skewX(-20deg); opacity: 0; }
  5%   { opacity: 0.28; }
  95%  { opacity: 0.28; }
  100% { -webkit-transform: translateX(260%) skewX(-20deg); transform: translateX(260%) skewX(-20deg); opacity: 0; }
}
@keyframes pd-card-reflect {
  0%   { -webkit-transform: translateX(-160%) skewX(-20deg); transform: translateX(-160%) skewX(-20deg); opacity: 0; }
  5%   { opacity: 0.28; }
  95%  { opacity: 0.28; }
  100% { -webkit-transform: translateX(260%) skewX(-20deg); transform: translateX(260%) skewX(-20deg); opacity: 0; }
}
@-webkit-keyframes pd-btn-glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(30,100,255,0.45), 0 0 0 1px rgba(80,160,255,0.30), 0 3px 10px rgba(0,0,0,0.40), inset 0 1px 0 rgba(180,220,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.20); }
  50%      { box-shadow: 0 0 18px rgba(30,100,255,0.65), 0 0 0 1px rgba(100,180,255,0.45), 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(200,235,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.22); }
}
@keyframes pd-btn-glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(30,100,255,0.45), 0 0 0 1px rgba(80,160,255,0.30), 0 3px 10px rgba(0,0,0,0.40), inset 0 1px 0 rgba(180,220,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.20); }
  50%      { box-shadow: 0 0 18px rgba(30,100,255,0.65), 0 0 0 1px rgba(100,180,255,0.45), 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(200,235,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.22); }
}


/* ══════════════════════════════════════════════════════════════
   PAGE ROOT — deep navy crystal background
══════════════════════════════════════════════════════════════ */
.pd-dark-page {
  min-height: 100vh;
  position: relative;
  isolation: isolate;

  background:
    radial-gradient(ellipse 70% 45% at 0% 0%,   rgba(4,12,50,0.95)   0%, transparent 65%),
    radial-gradient(ellipse 85% 40% at 50% 0%,  rgba(8,28,90,0.60)   0%, transparent 62%),
    radial-gradient(ellipse 55% 70% at 100% 30%, rgba(12,45,130,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 95% 95%,  rgba(0,60,120,0.18)  0%, transparent 58%),
    radial-gradient(ellipse 45% 35% at 5% 90%,   rgba(2,6,28,0.70)    0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 55% 55%,  rgba(5,18,60,0.35)   0%, transparent 70%),
    linear-gradient(118deg,
      #010510 0%,
      #020a1e 15%,
      #030e2a 28%,
      #050f30 40%,
      #071a45 55%,
      #081f57 70%,
      #0a2468 84%,
      #0c2a78 100%
    );
}

/* Crystal mesh overlay */
.pd-dark-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(128deg,
      transparent 0%,
      rgba(255,255,255,0.018) 28%,
      transparent 30%,
      transparent 54%,
      rgba(255,255,255,0.012) 56%,
      transparent 58%,
      transparent 80%,
      rgba(255,255,255,0.008) 82%,
      transparent 84%
    );
  -webkit-animation: pd-bg-drift 18s ease-in-out infinite;
          animation: pd-bg-drift 18s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Soft inner-glow ring */
.pd-dark-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    inset 0 0 120px rgba(10,60,180,0.22),
    inset 0 0 60px  rgba(0,100,220,0.12);
}

/* All direct children sit above the pseudo overlays */
.pd-dark-page > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   HEADER BAR  (.phc-bar)
══════════════════════════════════════════════════════════════ */
.pd-dark-page .phc-bar {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(20,70,180,0.22) 0%, transparent 65%),
    linear-gradient(118deg,
      rgba(2,6,22,0.96) 0%,
      rgba(4,12,40,0.92) 50%,
      rgba(6,18,60,0.88) 100%
    ) !important;
  border-bottom: 1px solid rgba(80,160,255,0.22) !important;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(56,140,255,0.12) !important;
}

/* Back button */
.pd-dark-page .phc-back {
  color: rgba(200,225,255,0.85) !important;
}
.pd-dark-page .phc-back-icon,
.pd-dark-page .phc-back-label {
  color: rgba(200,225,255,0.85) !important;
}

/* Share icon in header */
.pd-dark-page .phc-share-btn svg {
  color: rgba(180,215,255,0.75) !important;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT DETAILS ROOT — layout wrapper
══════════════════════════════════════════════════════════════ */
.pd-dark-page .product-details-root {
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════
   LEFT COLUMN — slideshow frame
══════════════════════════════════════════════════════════════ */
.pd-dark-page .product-carousel-section {
  border: 1.5px solid rgba(80,160,255,0.32) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.10),
    0 8px 32px rgba(0,0,0,0.60),
    0 2px 8px rgba(0,0,0,0.40),
    0 0 30px rgba(14,60,200,0.18) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

/* Desktop mini carousel strip */
.pd-dark-page .pd-desk-mini-carousel-wrap {
  background:
    linear-gradient(118deg,
      rgba(2,6,22,0.92) 0%,
      rgba(5,14,48,0.86) 50%,
      rgba(8,24,78,0.80) 100%
    ) !important;
  border: 1px solid rgba(80,160,255,0.22) !important;
  box-shadow:
    0 4px 18px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.pd-dark-page .pd-desk-mini-thumb {
  border: 1px solid rgba(80,160,255,0.28) !important;
  box-shadow:
    0 3px 10px rgba(0,0,0,0.45),
    inset 0 0 8px 2px rgba(0,0,0,0.30),
    0 0 0 1px rgba(56,189,248,0.08) !important;
  background: rgba(3,10,38,0.80) !important;
}

/* ══════════════════════════════════════════════════════════════
   INFO PANEL  (.product-content)
══════════════════════════════════════════════════════════════ */
.pd-dark-page .product-content {
  background:
    radial-gradient(ellipse 80% 45% at 100% 0%,  rgba(30,100,220,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 0%  100%, rgba(2,6,22,0.55)     0%, transparent 65%),
    linear-gradient(125deg,
      rgba(3,  8,  28, 0.90) 0%,
      rgba(5, 14,  48, 0.82) 30%,
      rgba(8, 24,  78, 0.72) 60%,
      rgba(12, 36, 108, 0.60) 100%
    ) !important;
  border: 1px solid rgba(80,160,255,0.22) !important;
  border-top: 1px solid rgba(140,210,255,0.28) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.16),
    inset 1px 0  0 rgba(160,215,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 0 28px rgba(8,40,160,0.14),
    0 12px 32px rgba(0,0,0,0.40),
    0 2px 8px rgba(0,0,0,0.22) !important;
  overflow: hidden;
  position: relative;
}

/* Crystal shimmer sweep on info panel */
.pd-dark-page .product-content::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.00) 38%,
    rgba(200,235,255,0.07) 50%,
    rgba(255,255,255,0.00) 62%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  -webkit-animation: pd-shimmer 12s ease-in-out infinite;
          animation: pd-shimmer 12s ease-in-out infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  will-change: transform, opacity;
}

/* Top-edge cyan accent line */
.pd-dark-page .product-content::before {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(56,189,248,0.30) 25%,
    rgba(125,211,252,0.50) 50%,
    rgba(56,189,248,0.30) 75%,
    transparent);
  pointer-events: none;
  z-index: 5;
}

/* Business name */
.pd-dark-page .product-content h3 {
  color: #7dd3fc !important;
  text-shadow: 0 0 16px rgba(56,189,248,0.35), 0 1px 6px rgba(0,0,0,0.65) !important;
}

/* Sub-category, address, phone text */
.pd-dark-page .product-content p,
.pd-dark-page .product-content .MuiTypography-root {
  color: rgba(185,218,255,0.82) !important;
}

/* Inline phone link */
.pd-dark-page .product-content a[href^="tel"] {
  color: #7dd3fc !important;
  text-shadow: 0 0 8px rgba(56,189,248,0.30) !important;
}

/* "About Us" / "Services" section headings */
.pd-dark-page .product-content .MuiTypography-root[style*="fontWeight: \"600\""],
.pd-dark-page .product-content .MuiTypography-root[style*="font-weight: 600"] {
  color: rgba(200,228,255,0.92) !important;
}

/* Divider hr */
.pd-dark-page .product-content hr {
  border-color: rgba(56,140,255,0.18) !important;
}

/* Services bullet dots */
.pd-dark-page .product-content .MuiBox-root[style*="background: \"#14A800\""],
.pd-dark-page .product-content .MuiBox-root[style*="background: rgb(20, 168, 0)"] {
  background: #38bdf8 !important;
  box-shadow: 0 0 6px rgba(56,189,248,0.55) !important;
}

/* ══════════════════════════════════════════════════════════════
   ACTION BUTTONS  (View / Favourite / Share)
══════════════════════════════════════════════════════════════ */
.pd-dark-page .pd-action-btn {
  background: linear-gradient(
    138deg,
    #020c2e 0%,
    #041540 18%,
    #071e5a 35%,
    #0d2e88 55%,
    #1245b8 72%,
    #1a5cd4 88%,
    #1e6ee0 100%
  ) !important;
  border: 1.5px solid rgba(80,160,255,0.50) !important;
  border-top-color: rgba(140,210,255,0.65) !important;
  border-left-color: rgba(100,185,255,0.55) !important;
  box-shadow:
    0 0 12px rgba(30,100,255,0.50),
    0 0 0 1px rgba(60,140,255,0.18),
    0 3px 10px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(180,220,255,0.28),
    inset 1px 0 0 rgba(140,200,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.22) !important;
}

.pd-dark-page .pd-action-btn svg {
  color: rgba(180,220,255,0.90) !important;
  -webkit-filter: drop-shadow(0 0 4px rgba(56,189,248,0.40)) !important;
          filter: drop-shadow(0 0 4px rgba(56,189,248,0.40)) !important;
}

.pd-dark-page .pd-action-btn:hover {
  -webkit-filter: brightness(1.14) !important;
          filter: brightness(1.14) !important;
  -webkit-transform: translateY(-3px) scale(1.06) !important;
          transform: translateY(-3px) scale(1.06) !important;
}

/* Favourite checkbox icon colours stay as-is (red heart) */

/* ══════════════════════════════════════════════════════════════
   SOCIAL MEDIA BUTTONS
══════════════════════════════════════════════════════════════ */
.pd-dark-page .social-media {
  background:
    linear-gradient(138deg,
      rgba(2,8,28,0.92) 0%,
      rgba(5,16,52,0.86) 40%,
      rgba(8,26,80,0.78) 100%
    ) !important;
  border: 1.5px solid rgba(80,160,255,0.42) !important;
  border-top-color: rgba(140,210,255,0.58) !important;
  border-left-color: rgba(100,185,255,0.48) !important;
  box-shadow:
    0 0 12px rgba(30,100,255,0.45),
    0 0 0 1px rgba(56,140,255,0.14),
    0 3px 10px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(180,220,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.22) !important;
  -webkit-animation: pd-btn-glow-pulse 4s ease-in-out infinite;
          animation: pd-btn-glow-pulse 4s ease-in-out infinite;
  will-change: box-shadow;
  position: relative;
  overflow: hidden;
}

/* Gloss sheen on social buttons */
.pd-dark-page .social-media::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(180,220,255,0.06) 55%,
    transparent 100%
  );
  border-radius: 5px 5px 50% 50% / 5px 5px 8px 8px;
  pointer-events: none;
  z-index: 2;
}

.pd-dark-page .social-media:hover {
  -webkit-transform: translateY(-4px) scale(1.10) !important;
          transform: translateY(-4px) scale(1.10) !important;
  box-shadow:
    0 0 22px rgba(30,100,255,0.65),
    0 4px 14px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(200,235,255,0.30) !important;
  -webkit-filter: brightness(1.12) !important;
          filter: brightness(1.12) !important;
}

.pd-dark-page .social-media:active {
  -webkit-transform: translateY(1px) scale(0.92) !important;
          transform: translateY(1px) scale(0.92) !important;
  -webkit-filter: brightness(0.88) !important;
          filter: brightness(0.88) !important;
}

/* ══════════════════════════════════════════════════════════════
   CATALOGUE SECTION
══════════════════════════════════════════════════════════════ */
.pd-dark-page .product-catalog-section {
  background: transparent;
}

/* "Catalogues" heading */
.pd-dark-page .product-catalog-section h3 {
  color: rgba(200,228,255,0.92) !important;
  text-shadow: 0 0 10px rgba(56,189,248,0.20) !important;
}

/* ── Category filter buttons ── */
.pd-dark-page .product-catalog-section button[type="button"] {
  background: linear-gradient(
    138deg,
    rgba(2,8,28,0.92) 0%,
    rgba(5,16,52,0.86) 40%,
    rgba(8,26,80,0.78) 100%
  ) !important;
  border: 1.5px solid rgba(80,160,255,0.38) !important;
  color: rgba(185,218,255,0.88) !important;
  box-shadow:
    0 0 8px rgba(30,100,255,0.30),
    0 2px 8px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(180,220,255,0.16) !important;
  transition: box-shadow 0.22s ease,
              -webkit-transform 0.22s cubic-bezier(0.22,1,0.36,1),
              -webkit-filter 0.22s ease !important;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.22s ease,
              filter 0.22s ease !important;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.22s ease,
              filter 0.22s ease,
              -webkit-transform 0.22s cubic-bezier(0.22,1,0.36,1),
              -webkit-filter 0.22s ease !important;
}

/* Active / selected filter button */
.pd-dark-page .product-catalog-section button[type="button"][style*="background: rgb(33, 130, 177)"],
.pd-dark-page .product-catalog-section button[type="button"][style*="background: #2182B1"] {
  background: linear-gradient(
    138deg,
    #020c2e 0%,
    #041540 18%,
    #071e5a 35%,
    #0d2e88 55%,
    #1245b8 72%,
    #1a5cd4 88%,
    #1e6ee0 100%
  ) !important;
  border: 1.5px solid rgba(140,210,255,0.65) !important;
  color: #fff !important;
  box-shadow:
    0 0 14px rgba(30,100,255,0.55),
    0 0 0 1px rgba(80,160,255,0.22),
    0 3px 10px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(200,235,255,0.28) !important;
  -webkit-animation: pd-btn-glow-pulse 4s ease-in-out infinite;
          animation: pd-btn-glow-pulse 4s ease-in-out infinite;
}

.pd-dark-page .product-catalog-section button[type="button"]:hover {
  -webkit-transform: translateY(-2px) scale(1.04) !important;
          transform: translateY(-2px) scale(1.04) !important;
  -webkit-filter: brightness(1.14) !important;
          filter: brightness(1.14) !important;
  box-shadow:
    0 0 18px rgba(30,100,255,0.55),
    0 4px 12px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(200,235,255,0.22) !important;
}

/* ── Layout toggle icons (fourCol / grid / tall) ── */
.pd-dark-page .product-catalog-section [style*="cursor: pointer"] > div[style*="border"] {
  background: rgba(3,10,38,0.85) !important;
  border-color: rgba(80,160,255,0.40) !important;
}

/* ── Catalogue card shell ── */
.pd-dark-page .product-catalog-section .MuiCard-root {
  background:
    radial-gradient(ellipse 100% 35% at 50% 0%,
      rgba(255,255,255,0.055) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 100%,
      rgba(1,3,14,0.80) 0%, transparent 65%),
    linear-gradient(170deg,
      #010610 0%,
      #030c22 18%,
      #050f30 36%,
      #071a45 56%,
      #081e54 74%,
      #0a2462 100%
    ) !important;
  border: 1.5px solid rgba(80,160,255,0.22) !important;
  border-top: 1.5px solid rgba(130,200,255,0.28) !important;
  box-shadow:
    inset 0  1.5px 0 rgba(255,255,255,0.13),
    inset 1.5px 0  0 rgba(140,205,255,0.07),
    inset -1px 0  0 rgba(0,0,0,0.14),
    inset 0  -1px 0 rgba(0,0,0,0.28),
    0 14px 44px rgba(0,0,0,0.62),
    0 4px 16px rgba(0,0,0,0.42),
    0 0 32px rgba(6,28,150,0.13) !important;
  overflow: hidden;
  position: relative;
}

/* Crystal shimmer on catalogue card */
.pd-dark-page .product-catalog-section .MuiCard-root::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(180,225,255,0.08) 50%,
    rgba(255,255,255,0.00) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 6;
  -webkit-animation: pd-card-reflect 14s ease-in-out infinite;
          animation: pd-card-reflect 14s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Cyan top-edge accent on catalogue card */
.pd-dark-page .product-catalog-section .MuiCard-root::before {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(56,189,248,0.35) 28%,
    rgba(125,211,252,0.55) 50%,
    rgba(56,189,248,0.35) 72%,
    transparent);
  pointer-events: none;
  z-index: 5;
}

/* ── Catalogue image tiles ── */
.pd-dark-page .img-parent {
  border: 1px solid rgba(80,160,255,0.22) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.55),
    0 0 18px rgba(6,28,150,0.14),
    inset 0 0 8px 2px rgba(0,0,0,0.35) !important;
}

.pd-dark-page .img-parent:hover {
  border-color: rgba(56,189,248,0.45) !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.65),
    0 0 28px rgba(14,60,200,0.28),
    inset 0 0 8px 2px rgba(0,0,0,0.30) !important;
  -webkit-transform: translateY(-3px) scale(1.02) !important;
          transform: translateY(-3px) scale(1.02) !important;
}

/* Image name label */
.pd-dark-page .typo-name {
  background: rgba(3,10,38,0.82) !important;
  color: rgba(185,218,255,0.88) !important;
  border: 1px solid rgba(56,140,255,0.22) !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE MINI CAROUSEL (hidden on desktop, but style anyway)
══════════════════════════════════════════════════════════════ */
.pd-dark-page .pd-mini-carousel-wrap {
  background:
    linear-gradient(118deg,
      rgba(2,6,22,0.92) 0%,
      rgba(5,14,48,0.86) 50%,
      rgba(8,24,78,0.80) 100%
    ) !important;
  border: 1px solid rgba(80,160,255,0.22) !important;
}

.pd-dark-page .pd-mini-thumb {
  border: 1px solid rgba(80,160,255,0.28) !important;
  background: rgba(3,10,38,0.80) !important;
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY — respect reduced-motion
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pd-dark-page::before,
  .pd-dark-page .product-content::after,
  .pd-dark-page .social-media,
  .pd-dark-page .product-catalog-section .MuiCard-root::after,
  .pd-dark-page .product-catalog-section button[type="button"][style*="background: #2182B1"] {
    -webkit-animation: none !important;
            animation: none !important;
  }
}





/* ============================================================
   LAYOUT 2 (.pd-dark-page) - Restored Original Light Design
   All screens. Mobile untouched.
============================================================ */

/* -- Page root: clean light background -- */
.pd-dark-page {
  min-height: 100vh;
  background: #f5f7fa;
  position: static;
  isolation: auto;
}

.pd-dark-page::before,
.pd-dark-page::after {
  display: none !important;
  content: none !important;
  -webkit-animation: none !important;
          animation: none !important;
}

/* -- Header bar: original light green -- */
.pd-dark-page .phc-bar {
  background: #edf7ed !important;
  border-bottom: 2px solid #c8e6c9 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.pd-dark-page .phc-inner {
  background: transparent !important;
  border: none !important;
}

.pd-dark-page .phc-back {
  background: transparent !important;
  border: none !important;
  color: #134013 !important;
  box-shadow: none !important;
}

.pd-dark-page .phc-back-icon,
.pd-dark-page .phc-back-label {
  color: #134013 !important;
}

.pd-dark-page .phc-share-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pd-dark-page .phc-share-btn svg {
  color: #134013 !important;
}

/* -- Legacy mobile header -- */
.pd-dark-page .product-details-header {
  background: #edf7ed !important;
  border-bottom: 2px solid #c8e6c9 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.pd-dark-page .product-details-header .MuiButton-root,
.pd-dark-page .product-details-header button {
  color: #134013 !important;
}

/* -- product-details-root -- */
.pd-dark-page .product-details-root {
  background: transparent;
}

/* -- Slideshow: original white frame -- */
.pd-dark-page .product-carousel-section {
  border: 1.5px solid rgba(255,255,255,0.72) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10) !important;
  border-radius: 10px !important;
  background: transparent !important;
}

.pd-dark-page .product-carousel-section::before,
.pd-dark-page .product-carousel-section::after {
  display: none !important;
  content: none !important;
  -webkit-animation: none !important;
          animation: none !important;
}

/* -- Desktop mini carousel: original white -- */
.pd-dark-page .pd-desk-mini-carousel-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.09) !important;
}

.pd-dark-page .pd-desk-mini-thumb {
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.14), inset 0 0 8px 2px rgba(0,0,0,0.18) !important;
  background: #f5f5f5 !important;
}

/* -- Info panel: original white card -- */
.pd-dark-page .product-content {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-top: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

.pd-dark-page .product-content::before,
.pd-dark-page .product-content::after {
  display: none !important;
  content: none !important;
  -webkit-animation: none !important;
          animation: none !important;
}

.pd-dark-page .product-content h3 {
  color: inherit !important;
  text-shadow: none !important;
}

.pd-dark-page .product-content p,
.pd-dark-page .product-content .MuiTypography-root {
  color: inherit !important;
}

.pd-dark-page .product-content a[href^="tel"] {
  color: rgba(33,130,177,1) !important;
  text-shadow: none !important;
}

.pd-dark-page .product-content hr {
  border-color: rgba(0,0,0,0.12) !important;
}

.pd-dark-page .product-content .MuiBox-root[style*="background: \"#14A800\""],
.pd-dark-page .product-content .MuiBox-root[style*="background: rgb(20, 168, 0)"] {
  background: #14A800 !important;
  box-shadow: none !important;
}

.pd-dark-page .product-content .MuiSvgIcon-root {
  color: rgba(33,130,177,1) !important;
}

.pd-dark-page .product-content img[alt=""] {
  -webkit-filter: none !important;
          filter: none !important;
}

/* -- Action buttons: original neumorphic light -- */
.pd-dark-page .pd-action-btn {
  background: linear-gradient(145deg, #ffffff, #f0f2f5) !important;
  border: 1px solid rgba(220,225,232,0.7) !important;
  box-shadow: 3px 3px 7px rgba(0,0,0,0.13), -2px -2px 5px rgba(255,255,255,0.85), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.pd-dark-page .pd-action-btn svg {
  color: inherit !important;
  -webkit-filter: none !important;
          filter: none !important;
}

.pd-dark-page .pd-action-btn--view svg {
  stroke: #5a7fa8 !important;
  color: #5a7fa8 !important;
}

.pd-dark-page .pd-action-btn:hover {
  -webkit-filter: none !important;
          filter: none !important;
  -webkit-transform: translateY(-3px) scale(1.05) !important;
          transform: translateY(-3px) scale(1.05) !important;
}

/* -- Social media buttons: original white -- */
.pd-dark-page .social-media {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0px 2.5px 5px rgba(22,107,142,0.25) !important;
  -webkit-animation: none !important;
          animation: none !important;
}

.pd-dark-page .social-media::before {
  display: none !important;
  content: none !important;
}

.pd-dark-page .social-media:hover {
  -webkit-transform: translateY(-3px) scale(1.08) !important;
          transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(22,107,142,0.30) !important;
  -webkit-filter: brightness(1.06) !important;
          filter: brightness(1.06) !important;
}

.pd-dark-page .social-media:active {
  -webkit-transform: translateY(1px) scale(0.93) !important;
          transform: translateY(1px) scale(0.93) !important;
  box-shadow: 0 2px 5px rgba(22,107,142,0.15) !important;
  -webkit-filter: brightness(0.92) !important;
          filter: brightness(0.92) !important;
}

/* -- Catalogue section: original green gradient -- */
.pd-dark-page .product-catalog-section {
  background: linear-gradient(180deg, #dff8e8 0%, #c8efda 100%) !important;
}

.pd-dark-page .product-catalog-section h3 {
  color: inherit !important;
  text-shadow: none !important;
}

.pd-dark-page .product-catalog-section button[type="button"] {
  background: #fff !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
  box-shadow: none !important;
  -webkit-animation: none !important;
          animation: none !important;
}

.pd-dark-page .product-catalog-section button[type="button"][style*="background: rgb(33, 130, 177)"],
.pd-dark-page .product-catalog-section button[type="button"][style*="background: #2182B1"] {
  background: #2182B1 !important;
  border: 2px solid #2182B1 !important;
  color: #fff !important;
  box-shadow: none !important;
  -webkit-animation: none !important;
          animation: none !important;
}

.pd-dark-page .product-catalog-section button[type="button"]:hover {
  -webkit-transform: none !important;
          transform: none !important;
  -webkit-filter: none !important;
          filter: none !important;
}

.pd-dark-page .product-catalog-section .MuiCard-root {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 3px 1px 7px #00000061 !important;
  overflow: hidden;
}

.pd-dark-page .product-catalog-section .MuiCard-root::before,
.pd-dark-page .product-catalog-section .MuiCard-root::after {
  display: none !important;
  content: none !important;
  -webkit-animation: none !important;
          animation: none !important;
}

.pd-dark-page .product-catalog-section .MuiCardContent-root {
  background: transparent !important;
}

.pd-dark-page .img-parent {
  border: none !important;
  box-shadow: inset 0 0 8px 2px rgba(0,0,0,0.35) !important;
}

.pd-dark-page .img-parent:hover {
  border: none !important;
  box-shadow: inset 0 0 8px 2px rgba(0,0,0,0.35) !important;
  -webkit-transform: none !important;
          transform: none !important;
}

.pd-dark-page .typo-name {
  background: #c5adad !important;
  color: inherit !important;
  border: none !important;
}

/* -- Mobile mini carousel: original white -- */
.pd-dark-page .pd-mini-carousel-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10) !important;
}

.pd-dark-page .pd-mini-thumb {
  border: 1px solid rgba(0,0,0,0.07) !important;
  background: #f5f5f5 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT-1 — Premium Crystal Dark Blue Theme
   Scope: .pd-crystal-page  ·  Desktop (≥1200px) + Tablet (768px–1199px)
   Mobile (<768px): completely untouched — zero rules apply below 768px.
   Layout-2 (.pd-dark-page): completely untouched — zero overlap.
══════════════════════════════════════════════════════════════════ */

/* ── Shared crystal gradient keyframes ── */
@-webkit-keyframes l1-shimmer {
  0%   { -webkit-transform: translateX(-130%) skewX(-18deg); transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { -webkit-transform: translateX(230%) skewX(-18deg); transform: translateX(230%) skewX(-18deg); opacity: 0; }
}
@keyframes l1-shimmer {
  0%   { -webkit-transform: translateX(-130%) skewX(-18deg); transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { -webkit-transform: translateX(230%) skewX(-18deg); transform: translateX(230%) skewX(-18deg); opacity: 0; }
}
@-webkit-keyframes l1-card-reflect {
  0%   { -webkit-transform: translateX(-160%) skewX(-20deg); transform: translateX(-160%) skewX(-20deg); opacity: 0; }
  5%   { opacity: 0.22; }
  95%  { opacity: 0.22; }
  100% { -webkit-transform: translateX(260%) skewX(-20deg); transform: translateX(260%) skewX(-20deg); opacity: 0; }
}
@keyframes l1-card-reflect {
  0%   { -webkit-transform: translateX(-160%) skewX(-20deg); transform: translateX(-160%) skewX(-20deg); opacity: 0; }
  5%   { opacity: 0.22; }
  95%  { opacity: 0.22; }
  100% { -webkit-transform: translateX(260%) skewX(-20deg); transform: translateX(260%) skewX(-20deg); opacity: 0; }
}
@-webkit-keyframes l1-glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(63,169,245,0.38), 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(180,220,255,0.20); }
  50%      { box-shadow: 0 0 18px rgba(63,169,245,0.58), 0 4px 14px rgba(0,0,0,0.40), inset 0 1px 0 rgba(200,235,255,0.26); }
}
@keyframes l1-glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(63,169,245,0.38), 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(180,220,255,0.20); }
  50%      { box-shadow: 0 0 18px rgba(63,169,245,0.58), 0 4px 14px rgba(0,0,0,0.40), inset 0 1px 0 rgba(200,235,255,0.26); }
}

/* ── Page root: deep navy crystal canvas (all screen sizes) ── */
.pd-crystal-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 45% at 0% 0%,   rgba(10,35,66,0.95)  0%, transparent 65%),
    radial-gradient(ellipse 80% 40% at 50% 0%,   rgba(18,56,112,0.55) 0%, transparent 62%),
    radial-gradient(ellipse 55% 65% at 100% 30%, rgba(30,106,170,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 95% 95%,  rgba(10,50,100,0.18) 0%, transparent 58%),
    radial-gradient(ellipse 45% 35% at 5%  90%,  rgba(5,15,40,0.65)   0%, transparent 60%),
    linear-gradient(118deg,
      #020810 0%,
      #040e22 15%,
      #061530 28%,
      #081c40 40%,
      #0a2342 55%,
      #0d2c52 70%,
      #103568 84%,
      #123870 100%
    );
}

/* ── Header bar: all screen sizes ── */
.pd-crystal-page .phc-bar {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(63,169,245,0.14) 0%, transparent 65%),
    linear-gradient(118deg,
      rgba(4,12,30,0.97) 0%,
      rgba(8,22,50,0.94) 50%,
      rgba(12,35,75,0.90) 100%
    ) !important;
  border-bottom: 1px solid rgba(63,169,245,0.28) !important;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.45),
    inset 0 -1px 0 rgba(63,169,245,0.14) !important;
}
.pd-crystal-page .phc-back-icon,
.pd-crystal-page .phc-back-label {
  color: rgba(210,232,255,0.88) !important;
}
.pd-crystal-page .phc-share-btn svg {
  color: rgba(180,215,255,0.80) !important;
}

/* ── Info panel: all screen sizes ── */
.pd-crystal-page .product-content {
  background:
    radial-gradient(ellipse 80% 45% at 100% 0%,  rgba(63,169,245,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 0%  100%, rgba(4,12,30,0.55)    0%, transparent 65%),
    linear-gradient(125deg,
      rgba(8,  22,  50, 0.92) 0%,
      rgba(12, 35,  75, 0.86) 28%,
      rgba(16, 50, 100, 0.78) 55%,
      rgba(22, 70, 130, 0.68) 80%,
      rgba(30, 90, 160, 0.58) 100%
    ) !important;
  border: 1px solid rgba(63,169,245,0.24) !important;
  border-top: 1px solid rgba(140,210,255,0.32) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.16),
    inset 1px 0  0 rgba(63,169,245,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 12px 32px rgba(0,0,0,0.36),
    0 2px 8px rgba(0,0,0,0.20) !important;
  overflow: hidden;
  position: relative;
}
.pd-crystal-page .product-content h3 {
  color: #a8d8f8 !important;
  text-shadow: 0 0 14px rgba(63,169,245,0.28), 0 1px 4px rgba(0,0,0,0.55) !important;
}
.pd-crystal-page .product-content p,
.pd-crystal-page .product-content .MuiTypography-root {
  color: rgba(210,232,255,0.88) !important;
}
.pd-crystal-page .product-content a[href^="tel"] {
  color: #a8d8f8 !important;
}
.pd-crystal-page .product-content hr {
  border-color: rgba(63,169,245,0.20) !important;
}

/* ── Social media buttons: all screen sizes ── */
.pd-crystal-page .social-media {
  background: linear-gradient(138deg,
    rgba(8,22,50,0.92) 0%,
    rgba(12,35,75,0.86) 40%,
    rgba(18,56,112,0.78) 100%
  ) !important;
  border: 1.5px solid rgba(63,169,245,0.42) !important;
  border-top-color: rgba(140,210,255,0.58) !important;
  box-shadow:
    0 0 10px rgba(63,169,245,0.32),
    0 3px 10px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(180,220,255,0.20) !important;
  -webkit-animation: l1-glow-pulse 4.5s ease-in-out infinite;
          animation: l1-glow-pulse 4.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.pd-crystal-page .social-media::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.16) 0%,
    rgba(180,220,255,0.05) 55%,
    transparent 100%
  );
  border-radius: 5px 5px 50% 50% / 5px 5px 8px 8px;
  pointer-events: none;
  z-index: 2;
}
.pd-crystal-page .social-media:hover {
  -webkit-transform: translateY(-4px) scale(1.10) !important;
          transform: translateY(-4px) scale(1.10) !important;
  box-shadow:
    0 0 20px rgba(63,169,245,0.55),
    0 4px 14px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(200,235,255,0.28) !important;
  -webkit-filter: brightness(1.10) !important;
          filter: brightness(1.10) !important;
}

/* ── Catalogue section: all screen sizes ── */
.pd-crystal-page .product-catalog-section {
  background:
    radial-gradient(ellipse 70% 40% at 0% 0%,   rgba(10,35,66,0.90)  0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(5,15,40,0.60)  0%, transparent 65%),
    linear-gradient(118deg,
      #020810 0%,
      #040e22 20%,
      #061530 40%,
      #0a2342 60%,
      #0d2c52 80%,
      #103568 100%
    ) !important;
}
.pd-crystal-page .product-catalog-section h3 {
  color: rgba(210,232,255,0.94) !important;
  text-shadow: 0 0 10px rgba(63,169,245,0.18) !important;
}
.pd-crystal-page .product-catalog-section .MuiCard-root {
  background:
    linear-gradient(170deg,
      #020810 0%,
      #040e22 18%,
      #061530 36%,
      #0a2342 56%,
      #0d2c52 74%,
      #103568 100%
    ) !important;
  border: 1.5px solid rgba(63,169,245,0.24) !important;
  border-top: 1.5px solid rgba(140,210,255,0.30) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.12),
    0 14px 44px rgba(0,0,0,0.52),
    0 4px 16px rgba(0,0,0,0.36) !important;
  overflow: hidden;
  position: relative;
}
.pd-crystal-page .product-catalog-section button[type="button"] {
  background: linear-gradient(135deg,
    rgba(8,22,50,0.92) 0%,
    rgba(12,35,75,0.86) 50%,
    rgba(18,56,112,0.78) 100%
  ) !important;
  border: 1px solid rgba(63,169,245,0.40) !important;
  color: rgba(210,232,255,0.90) !important;
  box-shadow:
    0 0 8px rgba(63,169,245,0.22),
    0 2px 8px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(180,220,255,0.14) !important;
}
.pd-crystal-page .product-catalog-section button[type="button"][style*="background: rgb(33, 130, 177)"],
.pd-crystal-page .product-catalog-section button[type="button"][style*="background: #2182B1"] {
  background: linear-gradient(135deg,
    #0a2342 0%,
    #103568 35%,
    #1a5090 65%,
    #2a82c8 100%
  ) !important;
  border: 1.5px solid rgba(140,210,255,0.62) !important;
  color: #fff !important;
  box-shadow:
    0 0 14px rgba(63,169,245,0.48),
    0 3px 10px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(200,235,255,0.24) !important;
  -webkit-animation: l1-glow-pulse 4.5s ease-in-out infinite;
          animation: l1-glow-pulse 4.5s ease-in-out infinite;
}
.pd-crystal-page .typo-name {
  background: rgba(8,22,50,0.82) !important;
  color: rgba(210,232,255,0.90) !important;
  border: 1px solid rgba(63,169,245,0.22) !important;
}

/* ── Mobile mini carousel: all screen sizes ── */
.pd-crystal-page .pd-mini-carousel-wrap {
  background:
    linear-gradient(118deg,
      rgba(4,12,30,0.94) 0%,
      rgba(8,22,50,0.88) 50%,
      rgba(12,35,75,0.82) 100%
    ) !important;
  border: 1px solid rgba(63,169,245,0.24) !important;
}
.pd-crystal-page .pd-mini-thumb {
  border: 1px solid rgba(63,169,245,0.28) !important;
  background: rgba(8,22,50,0.80) !important;
}

/* ── Action buttons: all screen sizes ── */
.pd-crystal-page .pd-action-btn {
  background: linear-gradient(138deg,
    #0a2342 0%,
    #0d2c52 20%,
    #103568 38%,
    #1a5090 58%,
    #1e6aaa 78%,
    #2a82c8 100%
  ) !important;
  border: 1.5px solid rgba(63,169,245,0.50) !important;
  border-top-color: rgba(140,210,255,0.65) !important;
  box-shadow:
    0 0 10px rgba(63,169,245,0.40),
    0 3px 10px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(180,220,255,0.24) !important;
}
.pd-crystal-page .pd-action-btn svg {
  color: rgba(210,232,255,0.92) !important;
  -webkit-filter: drop-shadow(0 0 3px rgba(63,169,245,0.35)) !important;
          filter: drop-shadow(0 0 3px rgba(63,169,245,0.35)) !important;
}
.pd-crystal-page .pd-action-btn--view svg {
  stroke: rgba(180,225,255,0.88) !important;
  color: rgba(180,225,255,0.88) !important;
}
.pd-crystal-page .pd-action-btn:hover {
  -webkit-filter: brightness(1.12) !important;
          filter: brightness(1.12) !important;
  -webkit-transform: translateY(-3px) scale(1.06) !important;
          transform: translateY(-3px) scale(1.06) !important;
}

@media (min-width: 768px) {

  /* ── Page root: deep navy crystal canvas ── */
  .pd-crystal-page {
    min-height: 100vh;
    background:
      radial-gradient(ellipse 70% 45% at 0% 0%,   rgba(10,35,66,0.95)  0%, transparent 65%),
      radial-gradient(ellipse 80% 40% at 50% 0%,   rgba(18,56,112,0.55) 0%, transparent 62%),
      radial-gradient(ellipse 55% 65% at 100% 30%, rgba(30,106,170,0.30) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 95% 95%,  rgba(10,50,100,0.18) 0%, transparent 58%),
      radial-gradient(ellipse 45% 35% at 5%  90%,  rgba(5,15,40,0.65)   0%, transparent 60%),
      linear-gradient(118deg,
        #020810 0%,
        #040e22 15%,
        #061530 28%,
        #081c40 40%,
        #0a2342 55%,
        #0d2c52 70%,
        #103568 84%,
        #123870 100%
      );
  }

  /* ── Header bar (.phc-bar) ── */
  .pd-crystal-page .phc-bar {
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%,
        rgba(63,169,245,0.14) 0%, transparent 65%),
      linear-gradient(118deg,
        rgba(4,12,30,0.97) 0%,
        rgba(8,22,50,0.94) 50%,
        rgba(12,35,75,0.90) 100%
      ) !important;
    border-bottom: 1px solid rgba(63,169,245,0.28) !important;
    box-shadow:
      0 2px 16px rgba(0,0,0,0.45),
      inset 0 -1px 0 rgba(63,169,245,0.14) !important;
  }

  .pd-crystal-page .phc-inner {
    background: transparent !important;
    border: none !important;
  }

  .pd-crystal-page .phc-back {
    background: rgba(8,22,50,0.82) !important;
    border: 1px solid rgba(63,169,245,0.38) !important;
    color: rgba(210,232,255,0.88) !important;
  }

  .pd-crystal-page .phc-back-icon,
  .pd-crystal-page .phc-back-label {
    color: rgba(210,232,255,0.88) !important;
  }

  .pd-crystal-page .phc-share-btn {
    background: rgba(8,22,50,0.82) !important;
    border: 1px solid rgba(63,169,245,0.38) !important;
  }

  .pd-crystal-page .phc-share-btn svg {
    color: rgba(180,215,255,0.80) !important;
  }

  /* ── product-details-root: transparent so page bg shows ── */
  .pd-crystal-page .product-details-root {
    background: transparent;
  }

  /* ══════════════════════════════════════════════════════════
     SLIDESHOW PANEL (.product-carousel-section)
  ══════════════════════════════════════════════════════════ */
  .pd-crystal-page .product-carousel-section {
    background:
      radial-gradient(ellipse 90% 55% at 15% 10%,
        rgba(63,169,245,0.16) 0%, transparent 58%),
      radial-gradient(ellipse 60% 50% at 85% 85%,
        rgba(5,15,40,0.55) 0%, transparent 65%),
      linear-gradient(135deg,
        #0a2342 0%,
        #0d2c52 20%,
        #103568 40%,
        #1a5090 60%,
        #1e6aaa 80%,
        #2a82c8 100%
      ) !important;
    border: 1.5px solid rgba(63,169,245,0.32) !important;
    box-shadow:
      0 0 0 1px rgba(63,169,245,0.10),
      0 8px 32px rgba(0,0,0,0.50),
      0 2px 8px rgba(0,0,0,0.30),
      0 0 28px rgba(10,60,140,0.16),
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(0,0,0,0.20) !important;
    border-radius: 12px !important;
    overflow: hidden;
    position: relative;
  }

  /* Top-edge crystal highlight on slideshow */
  .pd-crystal-page .product-carousel-section::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1.5px;
    background: linear-gradient(90deg,
      transparent,
      rgba(63,169,245,0.32) 25%,
      rgba(180,225,255,0.60) 50%,
      rgba(63,169,245,0.32) 75%,
      transparent);
    pointer-events: none;
    z-index: 5;
  }

  /* Diagonal gloss sweep on slideshow */
  .pd-crystal-page .product-carousel-section::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(
      112deg,
      transparent 0%,
      rgba(255,255,255,0.00) 36%,
      rgba(180,225,255,0.07) 50%,
      rgba(255,255,255,0.00) 64%,
      transparent 100%
    );
    box-shadow: inset 0 0 22px 5px rgba(0,0,0,0.22);
    pointer-events: none;
    z-index: 10;
  }

  /* ══════════════════════════════════════════════════════════
     DESKTOP MINI CAROUSEL STRIP
  ══════════════════════════════════════════════════════════ */
  .pd-crystal-page .pd-desk-mini-carousel-wrap {
    background:
      linear-gradient(118deg,
        rgba(4,12,30,0.94) 0%,
        rgba(8,22,50,0.88) 50%,
        rgba(12,35,75,0.82) 100%
      ) !important;
    border: 1px solid rgba(63,169,245,0.24) !important;
    box-shadow:
      0 4px 18px rgba(0,0,0,0.38),
      inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }

  .pd-crystal-page .pd-desk-mini-thumb {
    border: 1px solid rgba(63,169,245,0.28) !important;
    box-shadow:
      0 3px 10px rgba(0,0,0,0.38),
      inset 0 0 8px 2px rgba(0,0,0,0.24),
      0 0 0 1px rgba(63,169,245,0.08) !important;
    background: rgba(8,22,50,0.80) !important;
  }

  /* ══════════════════════════════════════════════════════════
     BUSINESS INFO PANEL (.product-content)
  ══════════════════════════════════════════════════════════ */
  .pd-crystal-page .product-content {
    background:
      radial-gradient(ellipse 80% 45% at 100% 0%,  rgba(63,169,245,0.10) 0%, transparent 55%),
      radial-gradient(ellipse 60% 50% at 0%  100%, rgba(4,12,30,0.55)    0%, transparent 65%),
      linear-gradient(125deg,
        rgba(8,  22,  50, 0.92) 0%,
        rgba(12, 35,  75, 0.86) 28%,
        rgba(16, 50, 100, 0.78) 55%,
        rgba(22, 70, 130, 0.68) 80%,
        rgba(30, 90, 160, 0.58) 100%
      ) !important;
    border: 1px solid rgba(63,169,245,0.24) !important;
    border-top: 1px solid rgba(140,210,255,0.32) !important;
    box-shadow:
      inset 0  1px 0 rgba(255,255,255,0.16),
      inset 1px 0  0 rgba(63,169,245,0.10),
      inset 0 -1px 0 rgba(0,0,0,0.24),
      0 0 28px rgba(10,50,140,0.14),
      0 12px 32px rgba(0,0,0,0.36),
      0 2px 8px rgba(0,0,0,0.20) !important;
    overflow: hidden;
    position: relative;
  }

  /* Crystal shimmer sweep on info panel */
  .pd-crystal-page .product-content::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(255,255,255,0.00) 38%,
      rgba(180,225,255,0.07) 50%,
      rgba(255,255,255,0.00) 62%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 10;
    -webkit-animation: l1-shimmer 14s ease-in-out infinite;
            animation: l1-shimmer 14s ease-in-out infinite;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
    will-change: transform, opacity;
  }

  /* Top-edge cyan accent line on info panel */
  .pd-crystal-page .product-content::before {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 1.5px;
    background: linear-gradient(90deg,
      transparent,
      rgba(63,169,245,0.28) 25%,
      rgba(140,210,255,0.52) 50%,
      rgba(63,169,245,0.28) 75%,
      transparent);
    pointer-events: none;
    z-index: 5;
  }

  /* ── Info panel text colours ── */
  .pd-crystal-page .product-content h3 {
    color: #a8d8f8 !important;
    text-shadow: 0 0 14px rgba(63,169,245,0.28), 0 1px 4px rgba(0,0,0,0.55) !important;
  }

  .pd-crystal-page .product-content p,
  .pd-crystal-page .product-content .MuiTypography-root {
    color: rgba(210,232,255,0.88) !important;
  }

  .pd-crystal-page .product-content a[href^="tel"] {
    color: #a8d8f8 !important;
    text-shadow: 0 0 8px rgba(63,169,245,0.25) !important;
  }

  .pd-crystal-page .product-content .MuiTypography-root[style*="fontWeight: \"600\""],
  .pd-crystal-page .product-content .MuiTypography-root[style*="font-weight: 600"] {
    color: rgba(220,238,255,0.94) !important;
  }

  .pd-crystal-page .product-content hr {
    border-color: rgba(63,169,245,0.20) !important;
  }

  /* Services bullet dots */
  .pd-crystal-page .product-content .MuiBox-root[style*="background: \"#14A800\""],
  .pd-crystal-page .product-content .MuiBox-root[style*="background: rgb(20, 168, 0)"] {
    background: #3fa9f5 !important;
    box-shadow: 0 0 6px rgba(63,169,245,0.48) !important;
  }

  /* Call icon */
  .pd-crystal-page .product-content .MuiSvgIcon-root {
    color: #3fa9f5 !important;
  }

  /* Location icon */
  .pd-crystal-page .product-content img[alt=""] {
    -webkit-filter: brightness(0) saturate(100%) invert(65%) sepia(55%) saturate(350%) hue-rotate(180deg) brightness(115%) !important;
            filter: brightness(0) saturate(100%) invert(65%) sepia(55%) saturate(350%) hue-rotate(180deg) brightness(115%) !important;
  }

  /* ══════════════════════════════════════════════════════════
     ACTION BUTTONS (View / Favourite / Share)
  ══════════════════════════════════════════════════════════ */
  .pd-crystal-page .pd-action-btn {
    background: linear-gradient(138deg,
      #0a2342 0%,
      #0d2c52 20%,
      #103568 38%,
      #1a5090 58%,
      #1e6aaa 78%,
      #2a82c8 100%
    ) !important;
    border: 1.5px solid rgba(63,169,245,0.50) !important;
    border-top-color: rgba(140,210,255,0.65) !important;
    border-left-color: rgba(100,185,255,0.55) !important;
    box-shadow:
      0 0 10px rgba(63,169,245,0.40),
      0 0 0 1px rgba(63,169,245,0.14),
      0 3px 10px rgba(0,0,0,0.38),
      inset 0 1px 0 rgba(180,220,255,0.24),
      inset 1px 0 0 rgba(140,200,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.20) !important;
  }

  .pd-crystal-page .pd-action-btn svg {
    color: rgba(210,232,255,0.92) !important;
    -webkit-filter: drop-shadow(0 0 3px rgba(63,169,245,0.35)) !important;
            filter: drop-shadow(0 0 3px rgba(63,169,245,0.35)) !important;
  }

  .pd-crystal-page .pd-action-btn--view svg {
    stroke: rgba(180,225,255,0.88) !important;
    color: rgba(180,225,255,0.88) !important;
  }

  .pd-crystal-page .pd-action-btn:hover {
    -webkit-filter: brightness(1.12) !important;
            filter: brightness(1.12) !important;
    -webkit-transform: translateY(-3px) scale(1.06) !important;
            transform: translateY(-3px) scale(1.06) !important;
  }

  /* ══════════════════════════════════════════════════════════
     SOCIAL MEDIA BUTTONS
  ══════════════════════════════════════════════════════════ */
  .pd-crystal-page .social-media {
    background: linear-gradient(138deg,
      rgba(8,22,50,0.92) 0%,
      rgba(12,35,75,0.86) 40%,
      rgba(18,56,112,0.78) 100%
    ) !important;
    border: 1.5px solid rgba(63,169,245,0.42) !important;
    border-top-color: rgba(140,210,255,0.58) !important;
    border-left-color: rgba(100,185,255,0.48) !important;
    box-shadow:
      0 0 10px rgba(63,169,245,0.32),
      0 0 0 1px rgba(63,169,245,0.12),
      0 3px 10px rgba(0,0,0,0.38),
      inset 0 1px 0 rgba(180,220,255,0.20),
      inset 0 -1px 0 rgba(0,0,0,0.20) !important;
    -webkit-animation: l1-glow-pulse 4.5s ease-in-out infinite;
            animation: l1-glow-pulse 4.5s ease-in-out infinite;
    will-change: box-shadow;
    position: relative;
    overflow: hidden;
  }

  /* Gloss sheen on social buttons */
  .pd-crystal-page .social-media::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.16) 0%,
      rgba(180,220,255,0.05) 55%,
      transparent 100%
    );
    border-radius: 5px 5px 50% 50% / 5px 5px 8px 8px;
    pointer-events: none;
    z-index: 2;
  }

  .pd-crystal-page .social-media:hover {
    -webkit-transform: translateY(-4px) scale(1.10) !important;
            transform: translateY(-4px) scale(1.10) !important;
    box-shadow:
      0 0 20px rgba(63,169,245,0.55),
      0 4px 14px rgba(0,0,0,0.42),
      inset 0 1px 0 rgba(200,235,255,0.28) !important;
    -webkit-filter: brightness(1.10) !important;
            filter: brightness(1.10) !important;
  }

  .pd-crystal-page .social-media:active {
    -webkit-transform: translateY(1px) scale(0.93) !important;
            transform: translateY(1px) scale(0.93) !important;
    -webkit-filter: brightness(0.90) !important;
            filter: brightness(0.90) !important;
  }

  /* ══════════════════════════════════════════════════════════
     CATALOGUE SECTION
  ══════════════════════════════════════════════════════════ */

  /* Section background */
  .pd-crystal-page .product-catalog-section {
    background:
      radial-gradient(ellipse 70% 40% at 0% 0%,   rgba(10,35,66,0.90)  0%, transparent 65%),
      radial-gradient(ellipse 60% 50% at 100% 100%, rgba(5,15,40,0.60)  0%, transparent 65%),
      linear-gradient(118deg,
        #020810 0%,
        #040e22 20%,
        #061530 40%,
        #0a2342 60%,
        #0d2c52 80%,
        #103568 100%
      ) !important;
  }

  /* "Catalogues" heading */
  .pd-crystal-page .product-catalog-section h3 {
    color: rgba(210,232,255,0.94) !important;
    text-shadow: 0 0 10px rgba(63,169,245,0.18) !important;
  }

  /* ── Category filter buttons ── */
  .pd-crystal-page .product-catalog-section button[type="button"] {
    background: linear-gradient(135deg,
      rgba(8,22,50,0.92) 0%,
      rgba(12,35,75,0.86) 50%,
      rgba(18,56,112,0.78) 100%
    ) !important;
    border: 1px solid rgba(63,169,245,0.40) !important;
    color: rgba(210,232,255,0.90) !important;
    box-shadow:
      0 0 8px rgba(63,169,245,0.22),
      0 2px 8px rgba(0,0,0,0.32),
      inset 0 1px 0 rgba(180,220,255,0.14) !important;
    transition: box-shadow 0.22s ease,
                -webkit-transform 0.22s cubic-bezier(0.22,1,0.36,1),
                -webkit-filter 0.22s ease !important;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.22s ease,
                filter 0.22s ease !important;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.22s ease,
                filter 0.22s ease,
                -webkit-transform 0.22s cubic-bezier(0.22,1,0.36,1),
                -webkit-filter 0.22s ease !important;
  }

  /* Active / selected filter button */
  .pd-crystal-page .product-catalog-section button[type="button"][style*="background: rgb(33, 130, 177)"],
  .pd-crystal-page .product-catalog-section button[type="button"][style*="background: #2182B1"] {
    background: linear-gradient(135deg,
      #0a2342 0%,
      #103568 35%,
      #1a5090 65%,
      #2a82c8 100%
    ) !important;
    border: 1.5px solid rgba(140,210,255,0.62) !important;
    color: #fff !important;
    box-shadow:
      0 0 14px rgba(63,169,245,0.48),
      0 0 0 1px rgba(63,169,245,0.18),
      0 3px 10px rgba(0,0,0,0.38),
      inset 0 1px 0 rgba(200,235,255,0.24) !important;
    -webkit-animation: l1-glow-pulse 4.5s ease-in-out infinite;
            animation: l1-glow-pulse 4.5s ease-in-out infinite;
  }

  .pd-crystal-page .product-catalog-section button[type="button"]:hover {
    -webkit-transform: translateY(-2px) scale(1.04) !important;
            transform: translateY(-2px) scale(1.04) !important;
    -webkit-filter: brightness(1.12) !important;
            filter: brightness(1.12) !important;
  }

  /* ── Catalogue card shell (overrides inline background style) ── */
  .pd-crystal-page .product-catalog-section .MuiCard-root {
    background:
      radial-gradient(ellipse 100% 35% at 50% 0%,
        rgba(63,169,245,0.06) 0%, transparent 50%),
      radial-gradient(ellipse 50% 40% at 100% 100%,
        rgba(2,8,22,0.75) 0%, transparent 65%),
      linear-gradient(170deg,
        #020810 0%,
        #040e22 18%,
        #061530 36%,
        #0a2342 56%,
        #0d2c52 74%,
        #103568 100%
      ) !important;
    border: 1.5px solid rgba(63,169,245,0.24) !important;
    border-top: 1.5px solid rgba(140,210,255,0.30) !important;
    box-shadow:
      inset 0  1.5px 0 rgba(255,255,255,0.12),
      inset 1.5px 0  0 rgba(63,169,245,0.07),
      inset -1px 0  0 rgba(0,0,0,0.12),
      inset 0  -1px 0 rgba(0,0,0,0.24),
      0 14px 44px rgba(0,0,0,0.52),
      0 4px 16px rgba(0,0,0,0.36),
      0 0 28px rgba(10,50,140,0.12) !important;
    overflow: hidden;
    position: relative;
  }

  /* Crystal shimmer on catalogue card */
  .pd-crystal-page .product-catalog-section .MuiCard-root::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 38%;
    height: 100%;
    background: linear-gradient(
      108deg,
      transparent 0%,
      rgba(255,255,255,0.00) 35%,
      rgba(180,225,255,0.07) 50%,
      rgba(255,255,255,0.00) 65%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 6;
    -webkit-animation: l1-card-reflect 16s ease-in-out infinite;
            animation: l1-card-reflect 16s ease-in-out infinite;
    will-change: transform, opacity;
  }

  /* Cyan top-edge accent on catalogue card */
  .pd-crystal-page .product-catalog-section .MuiCard-root::before {
    content: '';
    position: absolute;
    top: 0; left: 18%; right: 18%;
    height: 1.5px;
    background: linear-gradient(90deg,
      transparent,
      rgba(63,169,245,0.30) 28%,
      rgba(140,210,255,0.52) 50%,
      rgba(63,169,245,0.30) 72%,
      transparent);
    pointer-events: none;
    z-index: 5;
  }

  /* CardContent: transparent so card bg shows */
  .pd-crystal-page .product-catalog-section .MuiCardContent-root {
    background: transparent !important;
  }

  /* ── Catalogue image tiles ── */
  .pd-crystal-page .img-parent {
    border: 1px solid rgba(63,169,245,0.22) !important;
    box-shadow:
      0 4px 16px rgba(0,0,0,0.45),
      0 0 16px rgba(10,50,140,0.12),
      inset 0 0 8px 2px rgba(0,0,0,0.28) !important;
  }

  .pd-crystal-page .img-parent:hover {
    border-color: rgba(63,169,245,0.45) !important;
    box-shadow:
      0 8px 28px rgba(0,0,0,0.55),
      0 0 24px rgba(10,60,180,0.22),
      inset 0 0 8px 2px rgba(0,0,0,0.24) !important;
    -webkit-transform: translateY(-3px) scale(1.02) !important;
            transform: translateY(-3px) scale(1.02) !important;
  }

  /* Image name label */
  .pd-crystal-page .typo-name {
    background: rgba(8,22,50,0.82) !important;
    color: rgba(210,232,255,0.90) !important;
    border: 1px solid rgba(63,169,245,0.22) !important;
  }

}

/* ── Tablet: slightly softer reflections (768px–1199px) ── */
@media (min-width: 768px) and (max-width: 1199px) {
  .pd-crystal-page .product-content::after,
  .pd-crystal-page .product-catalog-section .MuiCard-root::after {
    opacity: 0.60;
  }

  .pd-crystal-page .product-content::before,
  .pd-crystal-page .product-carousel-section::before,
  .pd-crystal-page .product-catalog-section .MuiCard-root::before {
    opacity: 0.72;
  }
}

/* ── Accessibility: respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .pd-crystal-page .product-content::after,
  .pd-crystal-page .social-media,
  .pd-crystal-page .product-catalog-section .MuiCard-root::after,
  .pd-crystal-page .product-catalog-section button[type="button"][style*="background: #2182B1"] {
    -webkit-animation: none !important;
            animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT 1 (.pd-crystal-page) — Info section top spacing fix
   Prevents customer name / category / phone / location from being
   clipped at the top of the info panel on all screen sizes.
   Layout 2 (.pd-dark-page) is completely untouched.
══════════════════════════════════════════════════════════════════ */

/* Mobile (<768px): add top padding so rounded corners don't clip the name */
@media (max-width: 767px) {
  .pd-crystal-page .product-content {
    padding-top: 36px !important;
  }
}

/* Tablet (768px–1199px) and Desktop (≥1200px):
   Switch info panel from justify-content:flex-end to flex-start so the
   name/category/phone/location block is anchored at the top, not the bottom. */
@media (min-width: 768px) {
  .pd-crystal-page .product-info-section .product-content {
    justify-content: flex-start !important;
    padding-top: 20px !important;
  }
}

@media (min-width: 768px) {
  .pd-dark-page .pd-social-row {
    margin-top: 9px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT 2 (.pd-dark-page) — Info block vertical positioning fix
   Tablet + Desktop (≥768px) only. Mobile untouched. Layout 1 untouched.
   Goal: anchor the info block at the top of the panel with ~20px breathing
   room, then reclaim space below phone/about/social so nothing clips.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* 1. Anchor content to top of the panel (overrides base flex-end) */
  .pd-dark-page .product-info-section .product-content {
    justify-content: flex-start !important;
    padding-top: 20px !important;
  }

  /* 2. Remove the extra margin-top that was pushing the name block further down */
  .pd-dark-page .product-content > div:first-child {
    margin-top: 0 !important;
  }

  /* 3. Tighten spacing below phone number row */
  .pd-dark-page .product-content > div[style*="marginBottom: \"15px\""],
  .pd-dark-page .product-content > div[style*="marginBottom: 15px"] {
    margin-bottom: 8px !important;
  }

  /* 4. Reduce About Us heading top gap */
  .pd-dark-page .product-content .MuiTypography-root[style*="marginTop: \"17px\""],
  .pd-dark-page .product-content .MuiTypography-root[style*="marginTop: 17px"] {
    margin-top: 8px !important;
  }

  /* 5. Tighten social row top margin */
  .pd-dark-page .pd-social-row {
    margin-top: 4px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP + LIST VIEW ONLY — Customer info panel: solid dark blue
   Scope: .pd-crystal-page (List view) · ≥960px (desktop two-column)
   Tablet (<960px) and Mobile are completely untouched.
   Grid view (.pd-dark-page) is completely untouched.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  .pd-crystal-page .product-content {
    background: #0a1f3d !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LIST MODE ONLY — Customer info panel: solid dark blue background
   Scope: .pd-crystal-page · ALL screen sizes
   Grid view (.pd-dark-page) is completely untouched.
══════════════════════════════════════════════════════════════════ */
.pd-crystal-page .product-content {
  background: #0a1f3d !important;
}
.pd-crystal-page .product-content h3 {
  color: #a8d8f8 !important;
}
.pd-crystal-page .product-content p,
.pd-crystal-page .product-content .MuiTypography-root {
  color: rgba(210,232,255,0.88) !important;
}
.pd-crystal-page .product-content a[href^="tel"] {
  color: #a8d8f8 !important;
}
.pd-crystal-page .product-content hr {
  border-color: rgba(63,169,245,0.20) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP + LIST MODE ONLY — Right-side info panel: dark blue
   Scope: .pd-crystal-page · min-width 960px ONLY
   Mobile, Tablet, and Grid mode (.pd-dark-page) are untouched.
══════════════════════════════════════════════════════════════════ */

/* First: undo the all-screen override appended previously */
.pd-crystal-page .product-content {
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll !important;
  background: initial !important;
}
.pd-crystal-page .product-content h3 {
  color: inherit !important;
}
.pd-crystal-page .product-content p,
.pd-crystal-page .product-content .MuiTypography-root {
  color: inherit !important;
}
.pd-crystal-page .product-content a[href^="tel"] {
  color: inherit !important;
}
.pd-crystal-page .product-content hr {
  border-color: currentColor !important;
  border-color: initial !important;
}

/* Then: apply ONLY at desktop (≥960px) in list mode */
@media (min-width: 960px) {
  .pd-crystal-page .product-content {
    background: #0a1f3d !important;
  }
  .pd-crystal-page .product-content h3 {
    color: #a8d8f8 !important;
  }
  .pd-crystal-page .product-content p,
  .pd-crystal-page .product-content .MuiTypography-root {
    color: rgba(210,232,255,0.88) !important;
  }
  .pd-crystal-page .product-content a[href^="tel"] {
    color: #a8d8f8 !important;
  }
  .pd-crystal-page .product-content hr {
    border-color: rgba(63,169,245,0.20) !important;
  }
}

/* Desktop + List Mode ONLY — move button group (Call/Location/WhatsApp/Social) up 10mm */
@media (min-width: 960px) {
  .pd-crystal-page .pd-social-row {
    margin-top: -10mm !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LIST MODE — Responsive spacing inside the info panel
   Scope: .pd-crystal-page · ≥960px (desktop two-column layout only)
   Grid mode (.pd-dark-page), Tablet (<960px), Mobile: completely untouched.
   Goal: compress vertical gaps progressively so all content fits without
   unnecessary downward push as the panel narrows between 960px–1280px.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  /* Panel itself: reduce padding so content has more room */
  .pd-crystal-page .product-info-section .product-content {
    padding: 14px 16px !important;
  }

  /* Business name: tighter bottom gap */
  .pd-crystal-page .product-content h3 {
    font-size: clamp(1.1rem, 2.2vw, 1.6rem) !important;
    margin-bottom: 2px !important;
  }

  /* Category row: reduce gap */
  .pd-crystal-page .product-content > div:first-child {
    padding-bottom: 3px !important;
  }

  /* hr dividers: collapse margin */
  .pd-crystal-page .product-content hr {
    margin: 4px 0 !important;
  }

  /* Location row: tighten top/bottom margin */
  .pd-crystal-page .product-content > div[style*="margin: 15px 0px 6px"],
  .pd-crystal-page .product-content > div[style*="margin: \"15px 0px 6px\""] {
    margin: 6px 0 3px !important;
  }

  /* Phone number row: reduce bottom margin */
  .pd-crystal-page .product-content > div[style*="marginBottom: \"15px\""],
  .pd-crystal-page .product-content > div[style*="marginBottom: 15px"] {
    margin-bottom: 4px !important;
  }

  /* About Us heading: reduce top gap */
  .pd-crystal-page .product-content .MuiTypography-root[style*="marginTop: \"17px\""],
  .pd-crystal-page .product-content .MuiTypography-root[style*="marginTop: 17px"] {
    margin-top: 6px !important;
  }

  /* About Us body text: tighten margins */
  .pd-crystal-page .product-content .MuiTypography-root[style*="marginBottom: \"12px\""],
  .pd-crystal-page .product-content .MuiTypography-root[style*="marginBottom: 12px"] {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    line-height: 1.45 !important;
  }

  /* Services box: reduce top margin */
  .pd-crystal-page .product-content .MuiBox-root[style*="marginTop: \"20px\""],
  .pd-crystal-page .product-content .MuiBox-root[style*="marginTop: 20px"] {
    margin-top: 4px !important;
  }

  /* Services grid: reduce bottom margin */
  .pd-crystal-page .product-content .MuiGrid-container[style*="marginBottom: \"10px\""],
  .pd-crystal-page .product-content .MuiGrid-container[style*="marginBottom: 10px"] {
    margin-bottom: 4px !important;
  }

  /* Social row: reduce gap (preserves the -10mm upward shift already applied) */
  .pd-crystal-page .pd-social-row {
    gap: 0.6rem !important;
    margin-bottom: 0 !important;
  }

  /* Social buttons: slightly smaller to fit more per row at narrow widths */
  .pd-crystal-page .social-media {
    width: 44px !important;
    height: 44px !important;
  }
}

/* At the tightest desktop range (960px–1100px) compress further */
@media (min-width: 960px) and (max-width: 1100px) {
  .pd-crystal-page .product-info-section .product-content {
    padding: 10px 12px !important;
  }

  .pd-crystal-page .product-content h3 {
    font-size: 1.1rem !important;
  }

  .pd-crystal-page .product-content .MuiTypography-root[style*="marginTop: \"17px\""],
  .pd-crystal-page .product-content .MuiTypography-root[style*="marginTop: 17px"] {
    margin-top: 3px !important;
  }

  .pd-crystal-page .product-content .MuiTypography-root[style*="marginBottom: \"12px\""],
  .pd-crystal-page .product-content .MuiTypography-root[style*="marginBottom: 12px"] {
    font-size: 12px !important;
    line-height: 1.38 !important;
    margin-bottom: 2px !important;
  }

  .pd-crystal-page .social-media {
    width: 40px !important;
    height: 40px !important;
  }

  .pd-crystal-page .social-media img {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Desktop + List Mode ONLY — move button group 10mm DOWNWARD (overrides previous -10mm rule) */
@media (min-width: 960px) {
  .pd-crystal-page .pd-social-row {
    margin-top: 10mm !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LIST MODE + DESKTOP ONLY — Customer info panel: rich dark blue
   crystal/glass effect with subtle left-edge side lighting.
   Scope: .pd-crystal-page · min-width 960px only.
   Grid mode, Tablet, Mobile: completely untouched.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  .pd-crystal-page .product-content {
    background:
      /* Left-edge blue side light */
      radial-gradient(ellipse 55% 70% at 0% 50%,   rgba(63,169,245,0.13) 0%, transparent 60%),
      /* Top-left corner soft illumination */
      radial-gradient(ellipse 45% 40% at 0% 0%,    rgba(80,180,255,0.10) 0%, transparent 55%),
      /* Subtle right-edge depth shadow */
      radial-gradient(ellipse 35% 50% at 100% 50%, rgba(4,12,30,0.55)    0%, transparent 65%),
      /* Bottom depth */
      radial-gradient(ellipse 60% 35% at 50% 100%, rgba(2,8,22,0.50)     0%, transparent 60%),
      /* Base dark blue */
      linear-gradient(135deg,
        #071428 0%,
        #091a36 18%,
        #0b2044 35%,
        #0d2655 52%,
        #0a1f45 68%,
        #081a3a 84%,
        #061230 100%
      ) !important;

    border: 1px solid rgba(63,169,245,0.22) !important;
    border-top: 1px solid rgba(120,200,255,0.30) !important;
    border-left: 1px solid rgba(90,185,255,0.26) !important;

    box-shadow:
      /* Left-edge inner crystal light */
      inset 3px 0 18px rgba(63,169,245,0.10),
      /* Top-edge inner highlight */
      inset 0 1px 0 rgba(255,255,255,0.12),
      /* Bottom inner depth */
      inset 0 -1px 0 rgba(0,0,0,0.30),
      /* Outer ambient glow */
      0 0 24px rgba(10,50,140,0.18),
      0 8px 28px rgba(0,0,0,0.38) !important;

    position: relative;
    overflow: hidden;
  }

  /* Subtle left-edge crystal sheen line */
  .pd-crystal-page .product-content::before {
    content: '';
    position: absolute;
    top: 8%; bottom: 8%;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(120,200,255,0.28) 25%,
      rgba(180,225,255,0.45) 50%,
      rgba(120,200,255,0.28) 75%,
      transparent 100%
    );
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
  }

  /* Diagonal glass gloss sweep — very subtle, no animation */
  .pd-crystal-page .product-content::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(
      108deg,
      rgba(255,255,255,0.00) 0%,
      rgba(180,225,255,0.04) 40%,
      rgba(220,240,255,0.07) 50%,
      rgba(180,225,255,0.04) 60%,
      rgba(255,255,255,0.00) 100%
    );
    pointer-events: none;
    z-index: 4;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP + LIST MODE ONLY — Right-side info panel: dark blue bg
   Scope: .pd-crystal-page · min-width 960px ONLY
   Grid mode, Tablet, Mobile: completely untouched.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  .pd-crystal-page .product-info-section .product-content {
    background: #071428 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP + LIST MODE ONLY — Right-side panel: dark→light blue
   premium crystal/glass gradient.
   Scope: .pd-crystal-page · min-width 960px ONLY.
   Grid mode, Tablet, Mobile: completely untouched.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {

  /* ── Background area behind the panel (product-details-main column) ── */
  .pd-crystal-page .product-details-main {
    background:
      radial-gradient(ellipse 80% 60% at 100% 0%,  rgba(96,200,255,0.13) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 100% 100%, rgba(40,120,220,0.10) 0%, transparent 55%),
      linear-gradient(135deg,
        #071428 0%,
        #0a1e3e 30%,
        #0e2d5a 55%,
        #1a5080 75%,
        #2a7aaa 100%
      ) !important;
    border-radius: 12px;
  }

  /* ── Right-side info panel: dark→light blue crystal gradient ── */
  .pd-crystal-page .product-info-section .product-content {
    background:
      /* Glass highlight — top-left corner */
      radial-gradient(ellipse 70% 40% at 0% 0%,    rgba(255,255,255,0.07) 0%, transparent 55%),
      /* Light blue bloom — right edge */
      radial-gradient(ellipse 55% 65% at 100% 50%, rgba(96,200,255,0.18)  0%, transparent 60%),
      /* Soft top illumination */
      radial-gradient(ellipse 80% 35% at 50% 0%,   rgba(80,170,240,0.12)  0%, transparent 55%),
      /* Base dark→light blue gradient */
      linear-gradient(135deg,
        #071428 0%,
        #0a1e3e 22%,
        #0e2d5a 42%,
        #1a5080 65%,
        #2272a8 85%,
        #2a88c0 100%
      ) !important;

    border: 1px solid rgba(96,200,255,0.28) !important;
    border-top: 1px solid rgba(160,220,255,0.38) !important;
    border-right: 1px solid rgba(60,160,230,0.22) !important;

    box-shadow:
      /* Inner top highlight — glass feel */
      inset 0  1px 0 rgba(255,255,255,0.14),
      /* Inner left edge glow */
      inset 3px 0 16px rgba(63,169,245,0.08),
      /* Inner right light bloom */
      inset -4px 0 22px rgba(96,200,255,0.10),
      /* Outer ambient */
      0 0 28px rgba(20,80,180,0.20),
      0 8px 32px rgba(0,0,0,0.32) !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* ── Static glass gloss sweep (no animation) ── */
  .pd-crystal-page .product-info-section .product-content::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      112deg,
      rgba(255,255,255,0.00) 0%,
      rgba(200,235,255,0.05) 38%,
      rgba(220,245,255,0.09) 50%,
      rgba(200,235,255,0.05) 62%,
      rgba(255,255,255,0.00) 100%
    );
    pointer-events: none;
    z-index: 4;
  }

  /* ── Top-edge crystal accent line ── */
  .pd-crystal-page .product-info-section .product-content::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1.5px;
    background: linear-gradient(90deg,
      transparent,
      rgba(96,200,255,0.30) 25%,
      rgba(180,230,255,0.55) 50%,
      rgba(96,200,255,0.30) 75%,
      transparent
    );
    pointer-events: none;
    z-index: 5;
  }

  /* ── Text: keep readable on gradient bg ── */
  .pd-crystal-page .product-info-section .product-content h3 {
    color: #e0f4ff !important;
    text-shadow: 0 0 12px rgba(96,200,255,0.30), 0 1px 4px rgba(0,0,0,0.50) !important;
  }
  .pd-crystal-page .product-info-section .product-content p,
  .pd-crystal-page .product-info-section .product-content .MuiTypography-root {
    color: rgba(220,240,255,0.90) !important;
  }
  .pd-crystal-page .product-info-section .product-content a[href^="tel"] {
    color: #b8e8ff !important;
  }
  .pd-crystal-page .product-info-section .product-content hr {
    border-color: rgba(96,200,255,0.22) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP LIST MODE — Remove remaining white background behind
   the right-side information panel.
   Scope: .pd-crystal-page · min-width 960px ONLY.
   Grid mode, Tablet, Mobile: completely untouched.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {

  /* Right column wrapper — fills with crystal blue gradient */
  .pd-crystal-page .product-details-main {
    background: linear-gradient(
      135deg,
      #071B45 0%,
      #0B2E68 35%,
      #144D9E 70%,
      #2E78D6 100%
    ) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow:
      0 12px 35px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    overflow: hidden !important;
  }

  /* Info section scroll wrapper — transparent so column bg shows */
  .pd-crystal-page .product-info-section {
    background: transparent !important;
  }

  /* Scrollbar on info section: style to match dark theme */
  .pd-crystal-page .product-info-section::-webkit-scrollbar {
    width: 4px !important;
  }
  .pd-crystal-page .product-info-section::-webkit-scrollbar-track {
    background: rgba(7,27,69,0.40) !important;
    border-radius: 4px !important;
  }
  .pd-crystal-page .product-info-section::-webkit-scrollbar-thumb {
    background: rgba(46,120,214,0.55) !important;
    border-radius: 4px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP LIST MODE — Catalogue parent container: crystal blue
   Scope: .pd-crystal-page · min-width 960px ONLY.
   Targets the large MuiCard wrapper (pd-catalogue-card) that holds
   all catalogue grid items. Cards inside are untouched.
   Grid mode, Tablet, Mobile: completely untouched.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {

  /* Outer catalogue section wrapper */
  .pd-crystal-page .product-catalog-section {
    background: linear-gradient(
      135deg,
      #071B45 0%,
      #0B2E68 35%,
      #144D9E 70%,
      #2E78D6 100%
    ) !important;
  }

  /* The large MuiCard that wraps the entire catalogue grid */
  .pd-crystal-page .pd-catalogue-card.MuiCard-root,
  .pd-crystal-page .pd-catalogue-card {
    background: linear-gradient(
      135deg,
      #071B45 0%,
      #0B2E68 35%,
      #144D9E 70%,
      #2E78D6 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 18px !important;
    box-shadow:
      0 12px 35px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    overflow: hidden !important;
  }

  /* CardContent inside the catalogue wrapper: transparent */
  .pd-crystal-page .pd-catalogue-card .MuiCardContent-root {
    background: transparent !important;
  }

  /* Any direct div wrappers inside the catalogue section
     that may carry a white/light background */
  .pd-crystal-page .product-catalog-section > div {
    background: transparent !important;
  }
}

.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity .25s ease;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:9999;z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:#000;background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:0;overflow:hidden;overscroll-behavior:contain;overscroll-behavior:var(--yarl__controller_overscroll-behavior,contain);position:absolute;right:0;top:0;touch-action:none;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:1;opacity:var(--yarl__pull_down_opacity,1);-webkit-transform:translate(0,0);-webkit-transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_down_offset,0));transform:translate(0,0);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_down_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + 0*1px + 0*1%));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-webkit-column-gap:calc(0*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*0*1%);-webkit-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(0*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*0*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1 1;overflow:hidden;padding:calc(0*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*0*1%);padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{-webkit-touch-callout:none;max-height:100%;max-width:100%;object-fit:contain;touch-action:none;touch-action:var(--yarl__controller_touch_action,none);user-select:none;-webkit-user-select:none}@media screen and (min-width:800px){.yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_image_cover{height:100%;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{-webkit-animation:yarl__delayed_fadein 1s linear;animation:yarl__delayed_fadein 1s linear;color:hsla(0,0%,100%,.8);color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{-webkit-animation:yarl__stroke_opacity 1s linear infinite;animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{-webkit-animation-delay:-1.875s;animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){-webkit-animation-delay:-1.75s;animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){-webkit-animation-delay:-1.625s;animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){-webkit-animation-delay:-1.5s;animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){-webkit-animation-delay:-1.375s;animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){-webkit-animation-delay:-1.25s;animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){-webkit-animation-delay:-1.125s;animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){-webkit-animation-delay:-1s;animation-delay:-1s}.yarl__slide_error{color:red;color:var(--yarl__slide_icon_error_color,red);height:48px;height:var(--yarl__slide_icon_error_size,48px);width:48px;width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:none 0s ease 0s;transition:initial}.yarl__slide_loading,.yarl__slide_loading line{-webkit-animation:unset;animation:none 0s ease 0s 1 normal none running;-webkit-animation:initial;animation:initial}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:8px;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:32px;height:var(--yarl__icon_size,32px);width:32px;width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;background-color:transparent;background-color:var(--yarl__button_background_color,transparent);border:0;border:var(--yarl__button_border,0);color:hsla(0,0%,100%,.8);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;-webkit-filter:drop-shadow(2px 2px 2px rgba(0,0,0,.8));-webkit-filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));filter:drop-shadow(2px 2px 2px rgba(0,0,0,.8));filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:0;margin:var(--yarl__button_margin,0);outline:none;padding:8px;padding:var(--yarl__button_padding,8px)}.yarl__button:focus{color:#fff;color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:hsla(0,0%,100%,.8);color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:#fff;color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:#fff;color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:hsla(0,0%,100%,.4);color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:24px 16px;padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:auto;left:initial;right:0;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:auto;right:initial;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@-webkit-keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@-webkit-keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}
.mbk-root {
  min-height: 100vh;
  background: #f4f6fb;
  padding-bottom: 70px;
}

/* ── Header ── */
.mbk-header {
  background: #edf7ed;
  padding: 20px 18px 28px;
  border-bottom: 2px solid #c8e6c9;
}

.mbk-header-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #134013 !important;
  letter-spacing: 0.3px;
}

.mbk-header-sub {
  font-size: 12px !important;
  color: #2e7d32 !important;
  margin-top: 3px !important;
  font-weight: 500 !important;
}

/* ── Body ── */
.mbk-body {
  padding: 0 14px;
  margin-top: -10px;
}

/* ── Section ── */
.mbk-section {
  background: #fff;
  border-radius: 20px;
  padding: 16px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(14, 58, 83, 0.08);
}

.mbk-section-header {
  margin-bottom: 14px;
}

.mbk-section-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

.mbk-section-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0E3A53 !important;
  flex: 1 1;
}

.mbk-count-chip {
  background: #e8f4f8;
  color: #2182B1;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 9px;
}

/* ── Search ── */
.mbk-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4f6fb;
  border-radius: 12px;
  padding: 8px 12px;
  border: 1.5px solid #e8f0f5;
}

.mbk-search-input {
  flex: 1 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #1a2e3b;
  font-family: inherit;
}

.mbk-search-input::-webkit-input-placeholder {
  color: #b0c8d4;
}

.mbk-search-input::placeholder {
  color: #b0c8d4;
}

/* ── Bookmark Cards — MUI Card handles layout, just set list spacing ── */
.mbk-cards-list {
  display: flex;
  flex-direction: column;
  /* gap provided by Card's mt: 2 (16px) matching ProductCard */
}

/* ── Recently Viewed — list spacing only, MUI Card handles layout ── */
.mbk-recent-list {
  display: flex;
  flex-direction: column;
}

/* ── Desktop / large-screen layout ── */
@media (min-width: 1024px) {
  .mbk-body {
    padding: 0 24px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -10px;
  }

  .mbk-section {
    padding: 20px 20px;
  }

  .mbk-cards-list,
  .mbk-recent-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px;
    gap: 16px;
  }

  /* Reset Card's mt:2 inside the grid so gap handles spacing */
  .mbk-cards-list .MuiCard-root,
  .mbk-recent-list .MuiCard-root {
    margin-top: 0;
    width: 100%;
  }

  /* Scale card content slightly for desktop readability */
  .mbk-cards-list .MuiCardContent-root,
  .mbk-recent-list .MuiCardContent-root {
    -webkit-transform: scaleX(1.05);
            transform: scaleX(1.05);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }

  /* Larger image on desktop */
  .mbk-cards-list .MuiCard-root img[height="105px"],
  .mbk-recent-list .MuiCard-root img[height="105px"] {
    height: 130px !important;
  }

  .mbk-cards-list .MuiCard-root [style*="height: 105px"],
  .mbk-recent-list .MuiCard-root [style*="height: 105px"] {
    height: 130px !important;
  }

  .mbk-header {
    padding: 28px 32px 36px;
    border-bottom: 2px solid #c8e6c9;
  }

  .mbk-header-title {
    font-size: 26px !important;
  }
}

.mbk-clear-btn {
  color: #e53935 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  background: #fff0f0 !important;
}



/* ── Empty State ── */
.mbk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  text-align: center;
}

.mbk-empty-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #9ab0be !important;
  margin-top: 10px !important;
}

.mbk-empty-sub {
  font-size: 12px !important;
  color: #b8cdd8 !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
}

/* ── Skeleton loading ── */
.mbk-loading-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mbk-skeleton {
  height: 130px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f0f4f7 25%, #e4ecf0 50%, #f0f4f7 75%);
  background-size: 200% 100%;
  -webkit-animation: mbk-shimmer 1.4s infinite;
          animation: mbk-shimmer 1.4s infinite;
  margin-top: 16px;
}

@-webkit-keyframes mbk-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes mbk-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.listing-header{
    width: 100%;
    height: 5rem;
    background-color: #edf7ed;
    border-bottom: 2px solid #c8e6c9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #134013;
    position: fixed;
    top: 0;
    z-index: 1000000;
}

.list-content{
    position: relative;
    margin-top: 5.7rem;
}

.mylist-btn{
    width: 50%;
}

.list-card {
    background: #FFFFFF;
    border-radius: 20px 20px 20px 20px;
    width: 100%;
    box-shadow: 0px 2.5px 5px rgba(22, 107, 142, 0.25);
}

.first-row {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    /* gap: 7px; */
    margin-bottom: 12px;
}

.second-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    padding: 10px 0px;
}

.third-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
}

.list-btn1 {
    border: solid 1px #F09630 !important;
    color: #F09630 !important;

}

.list-btn1:focus {
    background-color: transparent !important;
    background-color: initial !important;
    color: #F09630 !important;
}

.listing-typo {
    color: #166B8E;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.listing-typo1 {
    font-size: 12px !important;
    font-weight: 700 !important;
}


.editButton {
    font-weight: 400 !important;
    font-size: 12px !important;
    color: black !important;
    text-transform: none;
    border-bottom: 1px solid black !important;
    border-radius: 6px !important;
    box-shadow: 1px 0px 6px #000000ad !important;
    text-transform: none !important;
}

.calls-typo {
    line-height: 19.36px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.likes-typo {
    line-height: 14.52px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 3px;
}
.DeleteModal-body {
    background-color: #fff;
    margin: 1rem;
    border-radius: 10px;
    padding: 1rem;
    position: relative;
    /* top: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  .btn-reg-success {
    width: 169px !important;
    height: 48px !important;
    margin-top: 1rem !important;
    border-radius: 15px !important;
  }
  
.inp-dropdown-business {
    outline: medium none invert;
    outline: initial;
    border: medium none currentColor;
    border: initial;
    width: 100%;
    height: 3rem;
    border-radius: 50px;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: -2px 0px 5px rgba(22, 107, 142, 0.25);
    margin-bottom: 10px;
}

.next-btn {
    width: 50px;
    height: 50px;
    background: #0E3A53;
    box-shadow: 0px 4.5283px 9.0566px rgba(40, 78, 120, 0.1);
    border-radius: 14.4906px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.cancel-button{
    width:108px;
    height:48px;
    border-radius: 24px !important;
    border: 2px solid rgba(14, 58, 83, 1) !important;
    color:rgba(14, 58, 83, 1) !important;
    text-transform: none !important;
}
.sure-button{
    width:108px;
    height:48px;
    border-radius: 24px !important;
    border: 2px solid rgba(14, 58, 83, 1) !important;
    color:white !important;
    text-transform: none !important;
    background: rgba(14, 58, 83, 1) !important;
}
.try-button{
    width:169px;
    height: 48px;
    border-radius: 12px !important;
    background: rgba(240, 150, 48, 1) !important;
    color: white !important;
    padding: 11px 27px;
    text-transform: none !important;

}
.success-button{
    background: rgba(14, 58, 83, 1) !important;
    width:169px;
    height: 48px;
    border-radius: 12px !important;
    color: white !important;
    padding: 11px 27px;
    text-transform: none !important;

}
.completeRegistration-form-body > p {
    margin-bottom: 10px;
    font-size: 100%;
}
.completeRegistration-form-body > input.reg-inp {
    font-size: 100%;
}
.completeRegistration-form-body > input.reg-inp::-webkit-input-placeholder {
    font-size: 100%;
}
.completeRegistration-form-body > input.reg-inp::placeholder {
    font-size: 100%;
}
.save-button{
    background-color: rgb(14, 58, 83) !important;
    color: white !important;
    height: 38px;
    text-transform: none !important;
}

/* Redesigned Add Business Page Styles */
.add-business-page-wrapper {
  background-color: #f8fafc;
  min-height: 100vh;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.add-business-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  overflow: hidden;
}

.add-business-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
  gap: 16px;
}

.header-close-icon {
  color: #64748b;
  cursor: pointer;
  font-size: 24px !important;
  transition: color 0.2s;
}

.header-close-icon:hover {
  color: #0f172a;
}

.header-title-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-title-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #e8f2fc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2182B1;
}

.header-title-icon {
  font-size: 20px !important;
}

.header-title-text {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.add-business-form-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-field-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
  text-align: left;
}

.required-star {
  color: #ef4444;
  margin-left: 2px;
}

.input-with-icon {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  height: 48px;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-with-icon:focus-within {
  border-color: #2182B1;
  box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.15);
}

.input-icon-box {
  width: 48px;
  height: 100%;
  background-color: #e8f2fc;
  border-right: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2182B1;
  flex-shrink: 0;
}

.input-icon {
  font-size: 20px !important;
}

.form-input {
  flex: 1 1;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 14px;
  font-size: 15px;
  color: #0f172a;
  box-sizing: border-box;
}

.form-input::-webkit-input-placeholder {
  color: #94a3b8;
}

.form-input::placeholder {
  color: #94a3b8;
}

.clickable-input {
  cursor: pointer;
}

/* Custom select styling */
.select-wrapper {
  position: relative;
}

.form-select {
  flex: 1 1;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 40px 0 14px;
  font-size: 15px;
  background-color: transparent;
  color: #0f172a;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
}

.select-arrow-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
  font-size: 20px !important;
}

/* Location input icon button */
.input-icon-button {
  width: 48px;
  height: 100%;
  background-color: #e8f2fc;
  border: none;
  border-right: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2182B1;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.input-icon-button:hover {
  background-color: #d8e6f5;
}

/* Shop Image custom styling */
.shop-image-container {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.shop-image-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}

/* Malayalam helper styling */
.malayalam-helper {
  font-size: 10.5px;
  line-height: 1.7;
  color: #475569;
  font-weight: 500;
  margin: 4px 0 6px;
  white-space: normal;
  word-break: break-word;
}

.choose-file-btn {
  color: #2182B1 !important;
  border: 1.5px solid #2182B1 !important;
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  background-color: #ffffff !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.choose-file-btn:hover {
  background-color: rgba(33, 130, 177, 0.04) !important;
  border-color: #2182B1 !important;
}

.file-info-text {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.shop-image-right-container {
  flex-shrink: 0;
  width: 100px;
  display: flex;
  flex-direction: column;
}

.shop-image-right {
  width: 100px;
  height: 100px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.approval-notice-panel {
  background-color: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 11px;
  color: #334155;
  line-height: 1.5;
  text-align: center;
  font-weight: 500;
  box-sizing: border-box;
  margin-top: 16px;
  width: 100%;
}

.shop-placeholder-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

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

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

.shop-upload-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e2e8f0;
  border-top-color: #166B8E;
  border-radius: 50%;
  -webkit-animation: spin 0.8s linear infinite;
          animation: spin 0.8s linear infinite;
}

.shop-image-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.shop-image-preview img.shop-actual-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-image-icon {
  position: absolute;
  width: 22px;
  height: 22px;
  cursor: pointer;
  right: 6px;
  top: 6px;
  background-color: #facc15;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  padding: 4px;
  z-index: 10;
  box-sizing: border-box;
  transition: background-color 0.2s, -webkit-transform 0.2s;
  transition: background-color 0.2s, transform 0.2s;
  transition: background-color 0.2s, transform 0.2s, -webkit-transform 0.2s;
}

.delete-image-icon:hover {
  background-color: #eab308;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

/* Save + Back Home button row */
.ab-btn-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

.form-save-btn {
  background-color: #2182B1 !important;
  color: white !important;
  text-transform: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 0 4px 6px -1px rgba(33, 130, 177, 0.2) !important;
  height: 38px;
  white-space: nowrap;
}

.form-save-btn:hover {
  background-color: #1a6b93 !important;
}

.form-back-home-btn {
  background: linear-gradient(135deg, #0E3A53, #2182B1) !important;
  color: #fff !important;
  text-transform: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 0 3px 8px rgba(14, 58, 83, 0.25) !important;
  height: 38px;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .ab-btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .form-save-btn,
  .form-back-home-btn {
    width: 100%;
  }
}

/* Support Help Card */
.registration-help-card {
  background-color: #e8f2fc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 450px;
  margin: 40px auto 40px auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.help-left {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.help-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #cde2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2182B1;
  flex-shrink: 0;
}

.help-icon {
  font-size: 20px !important;
}

.help-text {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

.help-divider-line {
  flex: 1 1;
  height: 1px;
  background-color: #cbd5e1;
  margin: 0 16px;
}

.help-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.help-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: white;
  transition: opacity 0.2s;
  letter-spacing: 0.5px;
}

.help-btn:hover {
  opacity: 0.9;
}

.whatsapp-btn, .call-btn {
  background-color: #0b3c5d; /* Dark navy */
}

.btn-icon {
  font-size: 16px !important;
}
/* ── MyProfile Premium UI ── */

.mp-root {
    min-height: 100vh;
    background: #f4f6fb;
    padding-bottom: 90px;
}

/* ── Compact Header ── */
.mp-header {
    background: linear-gradient(160deg, #1b5e20 0%, #43a047 100%);
    padding: 14px 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mp-header-title {
    color: rgba(255,255,255,0.80) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 12px !important;
    align-self: flex-start;
}

.mp-header-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.mp-header-avatar {
    border: 3px solid rgba(255,255,255,0.35) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
    margin-bottom: 8px;
}

.mp-user-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center;
    line-height: 1.2 !important;
}

.mp-user-mobile {
    font-size: 12px !important;
    color: rgba(255,255,255,0.75) !important;
    text-align: center;
    margin-top: 2px !important;
    letter-spacing: 0.3px;
}

.mp-user-shop {
    font-size: 11px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-align: center;
    margin-top: 4px !important;
    background: rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 2px 12px;
}

/* ── Subscription banner ── */
.mp-subs-banner {
    margin: 0 16px;
    margin-top: -14px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border-radius: 14px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.30);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mp-subs-banner-text { flex: 1 1; }

.mp-subs-banner-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.mp-subs-banner-sub {
    font-size: 11px !important;
    color: rgba(255,255,255,0.80) !important;
    margin-top: 2px !important;
}

.mp-subs-banner-btn {
    background: rgba(255,255,255,0.22);
    border: 1.5px solid rgba(255,255,255,0.45);
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    white-space: nowrap;
}

/* ── Menu section ── */
.mp-menu-section {
    padding: 12px 16px 0;
}

.mp-section-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #9ab0be !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 10px !important;
    padding-left: 4px;
}

.mp-menu-card {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(14, 58, 83, 0.07) !important;
    margin-bottom: 10px !important;
    overflow: hidden;
}

.mp-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mp-menu-item:hover { background: #f7fafc; }
.mp-menu-item:active { background: #eef4f8; }

.mp-menu-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
}

.mp-menu-text { flex: 1 1; }

.mp-menu-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a2e3b !important;
    line-height: 1.2 !important;
}

.mp-menu-subtitle {
    font-size: 11px !important;
    color: #9ab0be !important;
    margin-top: 1px !important;
}

.mp-menu-arrow {
    color: #c5d8e3 !important;
    font-size: 18px !important;
}

/* ── Logout ── */
.mp-logout-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(14, 58, 83, 0.06);
    margin-bottom: 8px;
    margin-top: 6px;
}

.mp-logout-item:hover { background: #fff5f5; }

.mp-logout-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.mp-logout-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #e53935 !important;
    flex: 1 1;
}

/* ── Home button ── */
.mp-home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #1b5e20 0%, #43a047 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(27, 94, 32, 0.28);
    margin-top: 8px;
    margin-bottom: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s, -webkit-transform 0.15s;
    transition: opacity 0.15s, transform 0.15s;
    transition: opacity 0.15s, transform 0.15s, -webkit-transform 0.15s;
}

.mp-home-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); opacity: 0.9; }

/* ── Version ── */
.mp-version {
    text-align: center;
    font-size: 11px !important;
    color: #b0c4ce !important;
    margin-top: 8px !important;
    padding-bottom: 8px;
}

/* ═══════════════════════════════════════
   EDIT PROFILE — Premium UI
   MasterClick
═══════════════════════════════════════ */

.ep-root {
    min-height: 100vh;
    background: #f0f4f8;
    padding-bottom: 80px;
}

/* ── Top bar ── */
.ep-topbar {
    background: #fff;
    display: flex;
    align-items: center;
    /* Match phc-bar padding exactly: 10px top/bottom, 12px sides */
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 200;
    gap: 10px;
    box-sizing: border-box;
    min-height: 58px;   /* phc-bar(10+8) + phc-inner(6+36+8) = 68px; topbar is flat so 58px matches visual weight */
}

/* Back icon inside ep-topbar — styled as phc-back button */
.ep-topbar > .MuiSvgIcon-root:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
    padding: 6px;
    color: #134013 !important;
    font-size: 20px !important;
    transition: box-shadow 0.18s ease, background 0.18s ease;
}

.ep-topbar > .MuiSvgIcon-root:first-child:active {
    background: #f5fdf5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

.ep-topbar-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0E3A53 !important;
    flex: 1 1;
    margin: 0 !important;
}

/* ── Profile photo strip ── */
.ep-profile-strip {
    background: linear-gradient(145deg, #0E3A53 0%, #2182B1 100%);
    padding: 28px 20px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ep-strip-avatar-wrap {
    position: relative;
    cursor: pointer;
    margin-bottom: 4px;
}

.ep-strip-avatar {
    border: 3px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

.ep-strip-cam {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ep-strip-name {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: 0.2px;
}

.ep-strip-mobile {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
    margin: 0 !important;
    letter-spacing: 0.4px;
}

/* ── Section card ── */
.ep-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 14px rgba(14, 58, 83, 0.07);
    padding: 18px 16px 20px;
    margin-bottom: 12px;
}

.ep-card-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0E3A53 !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.ep-card-label svg {
    font-size: 16px !important;
    color: #2182B1;
}

/* ── Field ── */
.ep-field {
    margin-top: 16px;
}

.ep-field-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #7a9db5 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 7px !important;
}

/* ── Input wrapper (icon + input) ── */
.ep-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #f7fbfd;
    border: 1.5px solid #ddeaf2;
    border-radius: 14px;
    height: 50px;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.ep-input-wrap:focus-within {
    border-color: #2182B1;
    box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.11);
    background: #fff;
}

.ep-input-icon {
    font-size: 18px !important;
    color: #a0bfce !important;
    position: absolute;
    left: 14px;
    pointer-events: none;
    flex-shrink: 0;
}

.ep-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1a2e3b;
    font-family: inherit;
    padding: 0 14px;
}

.ep-input-icon-pad {
    padding-left: 42px !important;
}

.ep-input::-webkit-input-placeholder { color: #b8cdd8; }

.ep-input::placeholder { color: #b8cdd8; }

.ep-input-readonly {
    color: #7a9db5;
    cursor: not-allowed;
}

.ep-readonly-badge {
    font-size: 10px;
    font-weight: 700;
    color: #10b981;
    background: #ecfdf5;
    border-radius: 20px;
    padding: 2px 8px;
    margin-right: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* ── Select ── */
.ep-select {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1a2e3b;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 36px;
}

.ep-select option { color: #1a2e3b; }

/* chevron for select — injected via wrapper pseudo */
.ep-input-wrap::after {
    content: "";
    display: none;
}

/* ── Category / SubCategory tap row ── */
.ep-tap-row {
    display: flex;
    align-items: center;
    background: #f7fbfd;
    border: 1.5px solid #ddeaf2;
    border-radius: 14px;
    height: 56px;
    padding: 0 14px;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.ep-tap-row:active {
    border-color: #2182B1;
    background: #eef6fb;
}

.ep-cat-img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #e0f0f8;
}

.ep-cat-img-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #e8f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ep-tap-value {
    flex: 1 1;
    font-size: 14px;
    color: #1a2e3b;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-tap-placeholder {
    color: #b8cdd8;
}

/* ── Field error ── */
.ep-field-error {
    font-size: 11px !important;
    color: #e53935 !important;
    margin-top: 5px !important;
    padding-left: 4px;
}

/* ── Save bar ── */
.ep-save-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 -4px 20px rgba(14, 58, 83, 0.1);
    display: flex;
    gap: 10px;
    z-index: 100;
}

.ep-cancel-btn {
    flex: 1 1;
    height: 48px;
    border-radius: 14px !important;
    border: 1.5px solid #ddeaf2 !important;
    background: #fff !important;
    color: #7a9db5 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.ep-save-btn {
    flex: 2 1;
    height: 48px;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0E3A53, #2182B1) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    box-shadow: 0 4px 16px rgba(14, 58, 83, 0.28) !important;
    letter-spacing: 0.3px;
    transition: opacity 0.2s !important;
}

.ep-save-btn:disabled {
    opacity: 0.65 !important;
}

/* ── Success toast ── */
.ep-toast {
    position: fixed;
    bottom: 76px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    background: #10b981;
    color: #fff;
    padding: 11px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.38);
    z-index: 999;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-animation: ep-toast-in 0.3s ease;
            animation: ep-toast-in 0.3s ease;
}

@-webkit-keyframes ep-toast-in {
    from { opacity: 0; -webkit-transform: translateX(-50%) translateY(10px); transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }
}

@keyframes ep-toast-in {
    from { opacity: 0; -webkit-transform: translateX(-50%) translateY(10px); transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }
}

/* ── Hidden file input ── */
.ep-file-input {
    display: none;
}

/* ═══════════════════════════════════════
   SHARED PAGE STYLES — EditImages, EditInfo, EditSocial
   MasterClick
═══════════════════════════════════════ */

/* ── Root ── */
.pg-root {
    min-height: 100vh;
    background: #f0f4f8;
    padding-bottom: 90px;
}

/* ── Top bar ── */
.pg-topbar {
    background: #fff;
    display: flex;
    align-items: center;
    /* Match phc-bar padding exactly */
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 200;
    gap: 10px;
    box-sizing: border-box;
    min-height: 58px;
}

/* Back icon inside pg-topbar — styled as phc-back button */
.pg-topbar > .MuiSvgIcon-root:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
    padding: 6px;
    color: #134013 !important;
    font-size: 20px !important;
    transition: box-shadow 0.18s ease, background 0.18s ease;
}

.pg-topbar > .MuiSvgIcon-root:first-child:active {
    background: #f5fdf5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

.pg-topbar-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0E3A53 !important;
    flex: 1 1;
    margin: 0 !important;
}

/* ── Body padding ── */
.pg-body {
    padding: 14px 14px 100px;
}

/* ── Section card ── */
.pg-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 14px rgba(14, 58, 83, 0.07);
    padding: 18px 16px 20px;
    margin-bottom: 12px;
}

.pg-card-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0E3A53 !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center;
    gap: 7px;
}

.pg-card-title svg {
    font-size: 17px !important;
    color: #2182B1;
}

/* ── Field ── */
.pg-field {
    margin-bottom: 14px;
}

.pg-field:last-child {
    margin-bottom: 0;
}

.pg-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #7a9db5 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 7px !important;
    display: block;
}

/* ── Input wrapper ── */
.pg-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #f7fbfd;
    border: 1.5px solid #ddeaf2;
    border-radius: 14px;
    height: 50px;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.pg-input-wrap:focus-within {
    border-color: #2182B1;
    box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.11);
    background: #fff;
}

.pg-input-icon {
    font-size: 18px !important;
    color: #a0bfce !important;
    position: absolute;
    left: 14px;
    pointer-events: none;
    flex-shrink: 0;
    z-index: 1;
}

.pg-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1a2e3b;
    font-family: inherit;
    padding: 0 14px 0 42px;
}

.pg-input::-webkit-input-placeholder { color: #b8cdd8; }

.pg-input::placeholder { color: #b8cdd8; }

.pg-input.no-icon {
    padding-left: 14px;
}

/* ── Textarea ── */
.pg-textarea-wrap {
    background: #f7fbfd;
    border: 1.5px solid #ddeaf2;
    border-radius: 14px;
    padding: 12px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pg-textarea-wrap:focus-within {
    border-color: #2182B1;
    box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.11);
    background: #fff;
}

.pg-textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1a2e3b;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    line-height: 1.55;
}

.pg-textarea::-webkit-input-placeholder { color: #b8cdd8; }

.pg-textarea::placeholder { color: #b8cdd8; }

/* ── Social row ── */
.pg-social-row {
    display: flex;
    align-items: center;
    background: #f7fbfd;
    border: 1.5px solid #ddeaf2;
    border-radius: 14px;
    height: 50px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 10px;
}

.pg-social-row:focus-within {
    border-color: #2182B1;
    box-shadow: 0 0 0 3px rgba(33, 130, 177, 0.11);
    background: #fff;
}

.pg-social-icon-box {
    width: 46px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-right: 1.5px solid #ddeaf2;
}

.pg-social-input {
    flex: 1 1;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #1a2e3b;
    font-family: inherit;
    padding: 0 14px;
}

.pg-social-input::-webkit-input-placeholder { color: #b8cdd8; }

.pg-social-input::placeholder { color: #b8cdd8; }

/* ── Image upload slot ── */
.pg-img-slot {
    border-radius: 16px;
    border: 2px dashed #c5dce8;
    background: #f0f7fb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}

.pg-img-slot:hover { border-color: #2182B1; background: #e5f2f9; }
.pg-img-slot.filled { border: none; }

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

.pg-img-slot-hint {
    font-size: 11px !important;
    color: #7a9db5 !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
    text-align: center;
}

.pg-img-slot-icon {
    font-size: 28px !important;
    color: #a0bfce !important;
}

/* ── Slot overlay actions ── */
.pg-slot-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
}

.pg-slot-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    min-width: initial !important;
    border-radius: 8px !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.15) !important;
}

.pg-slot-btn svg { font-size: 14px !important; }

/* ── Banner slot (wide) ── */
.pg-banner-slot {
    width: 100%;
    height: 130px;
    border-radius: 16px;
    border: 2px dashed #c5dce8;
    background: #f0f7fb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 12px;
}

.pg-banner-slot:hover { border-color: #2182B1; background: #e5f2f9; }
.pg-banner-slot.filled { border: none; }
.pg-banner-slot img { width: 100%; height: 100%; object-fit: cover; }

/* ── Gallery grid ── */
.pg-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 8px;
    gap: 8px;
    margin-top: 4px;
}

.pg-gallery-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #f0f7fb;
    border: 2px dashed #c5dce8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.pg-gallery-item:hover { border-color: #2182B1; }
.pg-gallery-item.filled { border: none; }
.pg-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.pg-gallery-item-actions {
    position: absolute;
    top: 3px;
    right: 3px;
    display: flex;
    gap: 3px;
}

.pg-gallery-add {
    aspect-ratio: 1;
    border-radius: 12px;
    background: #f0f7fb;
    border: 2px dashed #c5dce8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.pg-gallery-add:hover { border-color: #2182B1; background: #e5f2f9; }
.pg-gallery-add svg { font-size: 22px !important; color: #a0bfce; }

/* ── Catalogue card ── */
.pg-cat-card {
    background: #f7fbfd;
    border-radius: 16px;
    border: 1.5px solid #ddeaf2;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pg-cat-thumb {
    width: 50px;
    height: 62px;
    border-radius: 10px;
    background: #e0f0f8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.pg-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pg-cat-thumb svg { font-size: 26px !important; color: #2182B1; }

.pg-cat-info { flex: 1 1; min-width: 0; }

.pg-cat-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a2e3b !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
}

.pg-cat-meta {
    font-size: 11px !important;
    color: #a0bfce !important;
    margin-top: 2px !important;
}

.pg-cat-actions { display: flex; gap: 6px; flex-shrink: 0; }

.pg-cat-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-width: initial !important;
    border-radius: 10px !important;
    padding: 0 !important;
}

.pg-cat-title-input {
    flex: 1 1;
    height: 34px;
    border: 1.5px solid #ddeaf2;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 13px;
    color: #1a2e3b;
    background: #fff;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
}

.pg-cat-title-input:focus { border-color: #2182B1; }

/* ── Add button ── */
.pg-add-btn {
    width: 100%;
    height: 50px;
    border-radius: 14px !important;
    border: 2px dashed #c5dce8 !important;
    background: #f7fbfd !important;
    color: #2182B1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    transition: all 0.2s !important;
    margin-top: 8px !important;
}

.pg-add-btn:hover {
    border-color: #2182B1 !important;
    background: #e5f2f9 !important;
}

/* ── Save bar ── */
.pg-save-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 -4px 20px rgba(14, 58, 83, 0.1);
    display: flex;
    gap: 10px;
    z-index: 100;
}

.pg-cancel-btn {
    flex: 1 1;
    height: 48px;
    border-radius: 14px !important;
    border: 1.5px solid #ddeaf2 !important;
    background: #fff !important;
    color: #7a9db5 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.pg-save-btn {
    flex: 2 1;
    height: 48px;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0E3A53, #2182B1) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    box-shadow: 0 4px 16px rgba(14, 58, 83, 0.28) !important;
    letter-spacing: 0.3px;
}

.pg-save-btn:disabled { opacity: 0.65 !important; }

/* ── Toast ── */
.pg-toast {
    position: fixed;
    bottom: 76px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    background: #10b981;
    color: #fff;
    padding: 11px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.38);
    z-index: 999;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-animation: pg-toast-in 0.3s ease;
            animation: pg-toast-in 0.3s ease;
}

@-webkit-keyframes pg-toast-in {
    from { opacity: 0; -webkit-transform: translateX(-50%) translateY(10px); transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }
}

@keyframes pg-toast-in {
    from { opacity: 0; -webkit-transform: translateX(-50%) translateY(10px); transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }
}

/* ── Lightbox ── */
.pg-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 20px;
}

.pg-lightbox img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px;
    object-fit: contain;
}

.pg-lightbox-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    min-width: initial !important;
}

/* ── Hidden file input ── */
.pg-file-input { display: none; }

/* ── Loading overlay ── */
.pg-uploading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 2;
}

/* ── Service rows (EditInfo) ── */
.pg-service-row {
    margin-bottom: 8px;
}

.pg-service-edit-row,
.pg-service-display-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f7fbfd;
    border: 1.5px solid #ddeaf2;
    border-radius: 14px;
    padding: 8px 10px;
    transition: border-color 0.2s;
}

.pg-service-edit-row:focus-within {
    border-color: #2182B1;
    background: #fff;
}

.pg-service-num {
    font-size: 12px;
    font-weight: 800;
    color: #a0bfce;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.pg-service-input {
    flex: 1 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1a2e3b;
    font-family: inherit;
    min-width: 0;
}

.pg-service-input::-webkit-input-placeholder { color: #b8cdd8; }

.pg-service-input::placeholder { color: #b8cdd8; }

.pg-service-text {
    flex: 1 1;
    font-size: 14px;
    color: #1a2e3b;
    font-family: inherit;
    min-width: 0;
    word-break: break-word;
}

.pg-svc-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 0 !important;
    min-width: initial !important;
    border-radius: 9px !important;
    padding: 0 !important;
    flex-shrink: 0;
}

/* ── EditImages — icon action buttons ── */
.ei-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.ei-icon-btn.ei-sm { width: 24px; height: 24px; border-radius: 6px; }
.ei-icon-btn:active { opacity: 0.75; }

.ei-btn-view { background: rgba(255,255,255,0.95); color: #2182B1; }
.ei-btn-edit { background: rgba(255,255,255,0.95); color: #f59e0b; }
.ei-btn-del  { background: rgba(255,255,255,0.95); color: #e53935; }

/* ── Single image slot (Cover Image) ── */
.ei-single-slot {
    width: 100%;
    height: 180px;
    border-radius: 16px;
    border: 2px dashed #c5dce8;
    background: #f0f7fb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}

.ei-single-slot:hover { border-color: #2182B1; background: #e5f2f9; }
.ei-single-slot.filled { border: none; cursor: default; }
.ei-single-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Catalogue header row ── */
.ei-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ei-cat-count {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #a0bfce !important;
    background: #f0f7fb;
    border-radius: 20px;
    padding: 2px 10px;
}

/* ── Bulk upload progress ── */
.ei-bulk-progress {
    margin: 10px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ei-bulk-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #2182B1 !important;
}

/* ── Add Catalogue Images button ── */
.ei-add-cat-btn {
    width: 100%;
    height: 56px;
    border-radius: 16px !important;
    border: 2px dashed #2182B1 !important;
    background: linear-gradient(135deg, #f0f7fb, #e5f2f9) !important;
    color: #2182B1 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
    letter-spacing: 0.2px;
    transition: all 0.2s !important;
    box-shadow: 0 2px 10px rgba(33,130,177,0.10) !important;
}

.ei-add-cat-btn:hover {
    background: linear-gradient(135deg, #e5f2f9, #d0eaf6) !important;
    box-shadow: 0 4px 16px rgba(33,130,177,0.18) !important;
}

.ei-add-cat-btn:disabled { opacity: 0.55 !important; }

/* ── Lightbox navigation ── */
.ei-lb-nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background: rgba(255,255,255,0.18);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}

.ei-lb-nav:hover { background: rgba(255,255,255,0.32); }
.ei-lb-prev { left: 12px; }
.ei-lb-next { right: 12px; }

.ei-lb-counter {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    -webkit-transform: translateX(-50%) !important;
            transform: translateX(-50%) !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: rgba(0,0,0,0.35);
    padding: 4px 14px;
    border-radius: 20px;
}

.ei-lb-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.ei-lb-close:hover { background: rgba(255,255,255,0.28); }

/* ── Info Banner ── */
.ei-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, #e8f4fd, #d6edf8);
    border: 1.5px solid #b8d9ee;
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.ei-info-icon {
    font-size: 20px !important;
    color: #2182B1 !important;
    flex-shrink: 0;
    margin-top: 1px;
}

.ei-info-text {
    font-size: 12.5px !important;
    color: #1a4a6b !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
}

/* ── Catalogue image grid (new layout) ── */
.ei-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    gap: 10px;
    margin-top: 12px;
}

.ei-cat-cell {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(14, 58, 83, 0.09);
}

.ei-cat-img-wrap {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    background: #f0f7fb;
}

.ei-cat-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.ei-cat-img-wrap:active img { -webkit-transform: scale(0.97); transform: scale(0.97); }

.ei-cat-cell-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 6px 4px;
    background: #f7fbfd;
    border-top: 1px solid #edf4f8;
}

.ei-cat-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}

.ei-cat-action-btn.ei-btn-edit {
    background: #fff8e6;
    color: #f59e0b;
}

.ei-cat-action-btn.ei-btn-del {
    background: #fff0f0;
    color: #e53935;
}

.ei-cat-action-btn:active { opacity: 0.7; }

/* ── Section header (title + counter) ── */
.ei-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

/* ── Live counter chip ── */
.ei-counter-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}

.ei-counter-uploaded {
    font-size: 11px;
    font-weight: 700;
    color: #2182B1;
    background: #e8f4fd;
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}

.ei-counter-remaining {
    font-size: 10px;
    font-weight: 600;
    color: #a0bfce;
    padding-right: 4px;
    white-space: nowrap;
}

/* ── Pending badge on image ── */
.ei-pending-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(241, 153, 11, 0.92);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    pointer-events: none;
    z-index: 3;
}

/* ── Pending cell highlight ── */
.ei-cell-pending .ei-cat-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #f59e0b;
    border-radius: inherit;
    pointer-events: none;
}

/* ── Pending dot in topbar ── */
.ei-pending-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.25);
}

/* ── Small add button (below wide slot) ── */
.ei-add-section-btn {
    width: 100%;
    height: 42px;
    border-radius: 12px !important;
    border: 1.5px dashed #c5dce8 !important;
    background: #f7fbfd !important;
    color: #2182B1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
    transition: all 0.2s !important;
}

.ei-add-section-btn:hover {
    border-color: #2182B1 !important;
    background: #e5f2f9 !important;
}

/* ── Mobile: 2-column image grid (max-width 600px) ── */
@media (max-width: 600px) {
    .ei-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 8px;
    }

    .ei-cat-cell {
        border-radius: 10px;
    }

    .ei-cat-cell-actions {
        gap: 4px;
        padding: 5px 4px;
    }

    .ei-cat-action-btn {
        width: 32px;
        height: 28px;
        border-radius: 6px;
    }
}

.ReactCrop{position:relative;display:inline-block;cursor:crosshair;overflow:hidden;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{-webkit-box-sizing:border-box;box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{-ms-touch-action:none;touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{-ms-touch-action:none;touch-action:none}.ReactCrop__crop-selection{position:absolute;top:0;left:0;-webkit-transform:translateZ(0);transform:translateZ(0);cursor:move;-webkit-box-shadow:0 0 0 9999em #00000080;box-shadow:0 0 0 9999em #00000080}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){-webkit-animation:marching-ants 1s;animation:marching-ants 1s;background-image:-webkit-gradient(linear,left top, right top,color-stop(50%, #fff),color-stop(50%, #444)),-webkit-gradient(linear,left top, right top,color-stop(50%, #fff),color-stop(50%, #444)),-webkit-gradient(linear,left top, left bottom,color-stop(50%, #fff),color-stop(50%, #444)),-webkit-gradient(linear,left top, left bottom,color-stop(50%, #fff),color-stop(50%, #444));background-image:-o-linear-gradient(left,#fff 50%,#444 50%),-o-linear-gradient(left,#fff 50%,#444 50%),-o-linear-gradient(top,#fff 50%,#444 50%),-o-linear-gradient(top,#fff 50%,#444 50%);background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}.ReactCrop__crop-selection:focus{outline:none;border-color:#00f;border-style:solid}.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333%;left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666%;left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333%;top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666%;top:66.6666666667%}.ReactCrop__drag-handle{position:absolute}.ReactCrop__drag-handle:after{position:absolute;content:"";display:block;width:10px;height:10px;background-color:#0003;border:1px solid rgba(255,255,255,.7);outline:1px solid transparent}.ReactCrop__drag-handle:focus:after{border-color:#00f;background:#2dbfff}.ReactCrop .ord-nw{top:0;left:0;margin-top:-5px;margin-left:-5px;cursor:nw-resize}.ReactCrop .ord-nw:after{top:0;left:0}.ReactCrop .ord-n{top:0;left:50%;margin-top:-5px;margin-left:-5px;cursor:n-resize}.ReactCrop .ord-n:after{top:0}.ReactCrop .ord-ne{top:0;right:0;margin-top:-5px;margin-right:-5px;cursor:ne-resize}.ReactCrop .ord-ne:after{top:0;right:0}.ReactCrop .ord-e{top:50%;right:0;margin-top:-5px;margin-right:-5px;cursor:e-resize}.ReactCrop .ord-e:after{right:0}.ReactCrop .ord-se{bottom:0;right:0;margin-bottom:-5px;margin-right:-5px;cursor:se-resize}.ReactCrop .ord-se:after{bottom:0;right:0}.ReactCrop .ord-s{bottom:0;left:50%;margin-bottom:-5px;margin-left:-5px;cursor:s-resize}.ReactCrop .ord-s:after{bottom:0}.ReactCrop .ord-sw{bottom:0;left:0;margin-bottom:-5px;margin-left:-5px;cursor:sw-resize}.ReactCrop .ord-sw:after{bottom:0;left:0}.ReactCrop .ord-w{top:50%;left:0;margin-top:-5px;margin-left:-5px;cursor:w-resize}.ReactCrop .ord-w:after{left:0}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:6px;margin-top:-3px}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:6px;height:100%;margin-right:-3px}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:6px;margin-bottom:-3px}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:6px;height:100%;margin-left:-3px}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:24px;height:24px}}

.listing {
    width: 6px;
    height: 6px;
    border-radius: 10px;
    margin-right: 12px;
    background-color: black;
}
.Box-container{
    display: flex;
    align-items: baseline;
    font-size: 14px;
    font-weight: 500;
}
.typo_old{
    font-size: 16px !important;
    text-decoration: line-through;
}
.typo_container{
    display: flex;
    align-items: center;
    gap:10px
}

.typo_box_old{
    font-size: 16px !important;
    font-weight: 600 !important;
    display: flex;

}
.typo_box{
    font-size: 24px !important;
    font-weight: 600 !important;
    display: flex;
    color:rgba(33, 130, 177, 1) !important

}
.typo-new{
    font-size: 24px !important;
    font-weight: 600 !important;
    color:rgba(33, 130, 177, 1) !important

}
.inp-dropdown-business {
    outline: medium none invert;
    outline: initial;
    border: medium none currentColor;
    border: initial;
    width: 100%;
    height: 3rem;
    border-radius: 50px;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: -2px 0px 5px rgba(22, 107, 142, 0.25);
}

.next-btn {
    width: 50px;
    height: 50px;
    background: #0E3A53;
    box-shadow: 0px 4.5283px 9.0566px rgba(40, 78, 120, 0.1);
    border-radius: 14.4906px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.edit-service-btn {
    padding: 0 !important;
    min-width: 0 !important;
    width: 24px;
    height: 24px;
    background-color: rgba(50, 160, 175, 1) !important;
    color: white !important;
    margin-right: 10px !important;
    border-radius: 20px !important;
}

.reg-inp1 {
    outline: medium none invert;
    outline: initial;
    border: medium none currentColor;
    border: initial;
    width: 100%;
    height: 3rem;
    border-radius: 50px;
    padding: 1rem;
    box-shadow: -2px 0px 5px rgba(22, 107, 142, 0.25);
}

.delete-btn {
    position: absolute !important ;
    width: 24px;
    height: 24px;
    right: 30px;
    top: 19px;
    padding: 0px !important;
    min-width: 0px !important;
    height: 24px;
    width: 24px;
    background: rgba(237, 29, 36, 1) !important;
    color: white !important;
    border-radius: 20px !important;
}
.loc-inp{
    width: 100%;
    outline: medium none invert;
    outline: initial;
    border: solid 1px black ;
    height: 2rem;
    border-radius: 10px;
    padding: 1rem;
}
.news-head{
    width: 95%;
    height: 2rem;
    border: solid 1px #2182b1;
    border-radius: 8px;
    margin: .6rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;   
}

.news-button-class{
    border: 1px solid #2182b1;
    display: flex;
    align-items: center;
    justify-content: center; 
    border-radius: 8px;
    padding: 2.2px;
}
/* =================================================================
   NewsChannel.css - Premium Desktop Responsive Layout
================================================================= */

/* Main layout container */
.news-channel-container {
  min-height: 100vh;
  background: #f0f2f5;
  padding-bottom: 40px;
  box-sizing: border-box;
}

/* Sticky header styling */
.news-channel-header {
  height: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
}

.news-channel-header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Main body wrapper centered */
.news-channel-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
  box-sizing: border-box;
}

/* Title row */
.news-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 20px;
}

/* Redesigned title bar */
.news-head {
  flex: 1 1;
  height: 40px;
  border: 1px solid #bbdefb;
  background-color: #e3f2fd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d47a1;
  font-weight: 700;
  font-size: 16px;
  margin: 0 !important;
}

/* Share button */
.channel-button-class {
  border: solid 1px #90caf9;
  display: flex;
  align-items: center;
  justify-content: center; 
  border-radius: 8px;
  padding: 8px 16px;
  background: #fff;
  color: #0d47a1;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 40px;
  box-sizing: border-box;
}

.channel-button-class:hover {
  background: #e3f2fd;
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

/* Responsive grid for channels */
.news-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  width: 100%;
}

@media (min-width: 600px) {
  .news-channel-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
  }
}

@media (min-width: 960px) {
  .news-channel-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
  }
}

/* Individual card styling */
.news-channel-card {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  padding: 12px;
}

.news-channel-card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: rgba(13, 71, 161, 0.15);
}

.news-channel-logo {
  width: 85%;
  height: 85%;
  object-fit: contain;
  display: block;
}


/* Category Details CSS */

/* ═══════════════════════════════════════════════════════════════
   MOBILE / TABLET HEADER  (≤ 1023 px)
═══════════════════════════════════════════════════════════════ */

/* Hide desktop row on mobile/tablet */
@media (max-width: 1023px) {
  .cat-details-root .cd-desk-row { display: none !important; }

  /* ── 1. Header: light green (Layout 1) ── */
  .cat-details-root .phc-inner {
    background: #edf7ed;
    border-color: #c8e6c9;
  }

  /* ── 2. Hide the shared phc-title-row on mobile/tablet —
        the page title is shown as a dedicated row inside cd-mob-row ── */
  .cat-details-root .phc-title-row {
    display: none;
  }
}

/* Hide mobile row on desktop */
@media (min-width: 1024px) {
  .cat-details-root .cd-mob-row { display: none !important; }
}

/* ── Mobile row: two-line layout (title row + controls row) ── */
.cd-mob-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

/* Title line — centered above the controls */
.cd-mob-title {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #134013;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  line-height: 1.2;
  padding: 0 4px;
  box-sizing: border-box;
}

/* Controls line */
.cd-mob-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

/* ── Back button ── */
.cd-mob-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 8px 0 6px;
  background: #fff;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  color: #d1d5db;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
  transition: box-shadow 0.18s ease, background 0.18s ease;
}

.cd-mob-back:active {
  background: #edf7ed;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

/* Chevron SVG */
.cd-mob-arrow {
  width: 8px;
  height: 13px;
  flex-shrink: 0;
  color: #d1d5db;
  stroke: #d1d5db;
}

/* Back label — truncated */
.cd-mob-back-label {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: #d1d5db;
}

/* ── Search: white input + dark-blue button (matches desktop style) ── */
.cd-mob-search {
  display: flex;
  align-items: center;
  flex: 1 1;
  min-width: 0;
  height: 34px;
}

.cd-mob-search-input {
  flex: 1 1;
  min-width: 0;
  height: 34px;
  border: 1px solid #e0e0e0;
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 0 8px;
  font-size: 12px;
  outline: none;
  background: #fff;
  color: #333;
  font-family: inherit;
  box-sizing: border-box;
}

.cd-mob-search-input::-webkit-input-placeholder {
  color: #bbb;
}

.cd-mob-search-input::placeholder {
  color: #bbb;
}

.cd-mob-search-btn {
  height: 34px;
  padding: 0 10px;
  background: #1565C0;
  color: #fff;
  border: none;
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.18s ease;
}

.cd-mob-search-btn:active {
  background: #0d47a1;
}

/* ── Layout toggle + Share alignment ── */
.cd-mob-controls .lt-toggle {
  flex-shrink: 0;
  align-self: center;
}

.cd-mob-controls .phc-share-btn {
  flex-shrink: 0;
  align-self: center;
}

/* ── Layout 1 only: thin light grey underline below the page title ── */
:not(body[data-layout2="true"]) .cat-details-root .phc-page-title,
:not(body[data-layout2="true"]) .cat-details-root .cd-mob-title {
  text-decoration: underline;
  text-decoration-color: #d1d5db;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── Layout 1 only: title larger + bold on Desktop (≥ 1024px) ── */
@media (min-width: 1024px) {
  :not(body[data-layout2="true"]) .cat-details-root .phc-title {
    font-size: 18px;
    font-weight: 700;
  }
}

/* ── Layout 1 only: title larger + bold on Tablet (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  :not(body[data-layout2="true"]) .cat-details-root .cd-mob-title {
    font-size: 17px;
    font-weight: 700;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE BODY
═══════════════════════════════════════════════════════════════ */

.cat-details-root {
  height: 100vh;
  overflow-y: scroll;
  background-color: #fff;
}

.cat-details-header {
  padding: 1rem 1rem 0.5rem 1rem;
  background-color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.cat-details-header-inner {
  background-color: #edf7ed;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  border: 1px solid #c8e6c9;
}

.cat-details-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cat-details-search-row {
  margin-top: 0.6rem;
}

.cat-details-body {
  margin-bottom: 5rem;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP OVERRIDES (≥ 1024 px)
═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Remove the stacked title row — title lives in phc-title (absolute) inside the row */
  .cat-details-root .phc-title-row {
    display: none;
  }

  /* Override the column layout from page-header-controls.css:
     single flat row so back | title | search all sit on one line */
  .cat-details-root .phc-inner {
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    min-height: 64px;
  }

  .cat-details-header {
    padding: 0;
  }

  .cat-details-header-inner {
    background-color: #edf7ed;
    border-radius: 0;
    border: none;
    border-bottom: 3px solid #2e7d32;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
  }

  .cat-details-toprow {
    flex: 1 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    justify-content: flex-start;
  }

  .cat-details-toprow > div:first-child { flex-shrink: 0; }
  .cat-details-toprow > div:first-child .MuiTypography-root:last-child { white-space: nowrap; }
  .cat-details-toprow > div:nth-child(2) { flex-shrink: 0; }
  .cat-details-share-btn { flex-shrink: 0; }

  .cat-details-search-row {
    width: 260px;
    margin-top: 0;
    flex-shrink: 0;
  }

  .cat-details-search-row .MuiOutlinedInput-root {
    background-color: #fff;
    border-radius: 6px;
  }

  .cat-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px;
    gap: 16px;
    padding: 16px;
    justify-items: center;
  }

  .cat-details-grid .MuiCard-root { width: 100%; margin-top: 0; }

  /* Remove the scaleX stretch that caused overflow */
  .cat-details-grid .MuiCardContent-root {
    -webkit-transform: none;
            transform: none;
  }

  /* Narrow Call + WhatsApp buttons by ~20% and prevent overflow */
  .cat-details-grid .btn-call,
  .cat-details-grid .btn-whatsapp {
    font-size: 9px !important;
    padding: 0 4px !important;
    min-width: 0 !important;
  }

  /* Shift the action row (buttons + badge + heart) slightly left */
  .cat-details-grid .MuiGrid-item:last-child {
    padding-right: 8px;
    box-sizing: border-box;
  }

  /* Gold (Premium) badge: 10% wider — 32px × 1.10 = 35px */
  .cat-details-grid .badge-gold {
    min-width: 35px !important;
    padding: 0 5px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CRYSTAL DARK BLUE THEME — Layout 1 (toggle OFF / left position)
   Scope: :not(body[data-layout2="true"]) .cat-details-root
   Same color palette as Layout 2. Layout structure unchanged.
   Applied on Desktop, Tablet, and Mobile.
═══════════════════════════════════════════════════════════════ */

/* ── Page root: deep navy background ── */
:not(body[data-layout2="true"]) .cat-details-root {
  background: #081522;
}

/* ── Sticky header bar ── */
:not(body[data-layout2="true"]) .cat-details-root .phc-bar {
  background: linear-gradient(135deg, #071828 0%, #0b2240 50%, #0d2a50 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow:
    0 2px 18px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(56, 189, 248, 0.22),
    inset 0 1px 0 rgba(56, 140, 255, 0.10) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-inner {
  background: transparent !important;
  border: none !important;
}

/* ── Desktop header: page title ── */
:not(body[data-layout2="true"]) .cat-details-root .phc-title,
:not(body[data-layout2="true"]) .cat-details-root .phc-page-title {
  color: #e8f4ff !important;
}

/* ── Desktop back button ── */
:not(body[data-layout2="true"]) .cat-details-root .phc-back {
  background: rgba(10, 30, 60, 0.85) !important;
  border: 1px solid rgba(80, 160, 255, 0.40) !important;
  color: #b8d8f8 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-back:hover {
  background: rgba(15, 45, 85, 0.90) !important;
  box-shadow: 0 3px 12px rgba(30, 100, 255, 0.30) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-back-icon,
:not(body[data-layout2="true"]) .cat-details-root .phc-back-label {
  color: #b8d8f8 !important;
}

/* ── Desktop search input ── */
:not(body[data-layout2="true"]) .cat-details-root .phc-search-input {
  background: rgba(8, 22, 42, 0.90) !important;
  border-color: rgba(80, 160, 255, 0.35) !important;
  color: #d6e4f2 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-input::-webkit-input-placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-input::placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-input:focus {
  border-color: rgba(56, 189, 248, 0.65) !important;
}

/* ── Desktop search button ── */
:not(body[data-layout2="true"]) .cat-details-root .phc-search-btn {
  background: linear-gradient(135deg, #1245b8 0%, #1a5cd4 100%) !important;
  box-shadow: 0 0 10px rgba(30, 100, 255, 0.40) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-btn:hover {
  background: linear-gradient(135deg, #1a5cd4 0%, #1e6ee0 100%) !important;
}

/* ── Share button ── */
:not(body[data-layout2="true"]) .cat-details-root .phc-share-btn {
  background: rgba(10, 30, 60, 0.85) !important;
  border: 1px solid rgba(80, 160, 255, 0.40) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-share-btn svg {
  color: #b8d8f8 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-share-btn:hover {
  background: rgba(15, 45, 85, 0.90) !important;
  box-shadow: 0 3px 12px rgba(30, 100, 255, 0.30) !important;
}

/* ── Mobile/tablet title ── */
:not(body[data-layout2="true"]) .cat-details-root .cd-mob-title {
  color: #b8d8f8 !important;
}

/* ── Mobile/tablet back button ── */
:not(body[data-layout2="true"]) .cat-details-root .cd-mob-back {
  background: rgba(10, 30, 60, 0.85) !important;
  border-color: rgba(80, 160, 255, 0.40) !important;
  color: #b8d8f8 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-back:active {
  background: rgba(15, 45, 85, 0.90) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-arrow {
  color: #b8d8f8 !important;
  stroke: #b8d8f8 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-back-label {
  color: #b8d8f8 !important;
}

/* ── Mobile/tablet search input ── */
:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-input {
  background: rgba(8, 22, 42, 0.90) !important;
  border-color: rgba(80, 160, 255, 0.35) !important;
  color: #d6e4f2 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-input::-webkit-input-placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-input::placeholder {
  color: rgba(150, 190, 230, 0.55) !important;
}

/* ── Mobile/tablet search button ── */
:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-btn {
  background: linear-gradient(135deg, #1245b8 0%, #1a5cd4 100%) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-btn:active {
  background: #0d47a1 !important;
}

/* ── Loading spinner ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCircularProgress-root {
  color: #38bdf8 !important;
}

/* ── "Loading more..." text ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiTypography-body2 {
  color: #7db8e8 !important;
}

/* ── Product cards: deep navy crystal ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root {
  background: linear-gradient(160deg, #071828 0%, #0b2238 55%, #0e2a48 100%) !important;
  border: 1px solid rgba(56, 160, 255, 0.22) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(56, 189, 248, 0.08),
    0 0 16px rgba(20, 80, 200, 0.14),
    inset 1px 0 0 rgba(56, 189, 248, 0.06),
    inset -1px 0 0 rgba(56, 189, 248, 0.04) !important;
  position: relative;
  overflow: hidden;
}

/* Crystal top-edge */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(56, 189, 248, 0.08) 0%,
    rgba(56, 189, 248, 0.45) 20%,
    rgba(125, 211, 252, 0.70) 50%,
    rgba(56, 189, 248, 0.45) 80%,
    rgba(56, 189, 248, 0.08) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Crystal left-edge corner glow */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 35%;
  background: linear-gradient(180deg,
    rgba(125, 211, 252, 0.60) 0%,
    rgba(56, 189, 248, 0.25) 55%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── Card content area ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCardContent-root {
  background: transparent !important;
}

/* ── Card image ── */
:not(body[data-layout2="true"]) .cat-details-root .product-card-img-wrap img {
  -webkit-filter: none !important;
          filter: none !important;
  opacity: 1 !important;
  object-fit: cover !important;
}

/* ── Location icon ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root img[width="7.98px"] {
  -webkit-filter: brightness(0) invert(1) opacity(0.88) !important;
          filter: brightness(0) invert(1) opacity(0.88) !important;
}

/* ── Business name ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiTypography-root[style*="fontWeight: \"600\""],
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiTypography-root[style*="font-weight: 600"] {
  color: #e8f4ff !important;
}

/* ── Location text ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiTypography-root[style*="fontSize: \"12px\""] {
  color: #E5E7EB !important;
}

/* ── Sub-category text ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiTypography-root[style*="fontSize: \"11px\""] {
  color: #8ab4d4 !important;
}

/* ── Sub-category tag icon ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiSvgIcon-root[data-testid="LocalOfferIcon"] {
  color: rgba(100, 180, 240, 0.65) !important;
}

/* ── Bookmark circle border ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiBox-root[style*="border: \"1px solid rgba(238, 238, 238, 1)\""],
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiBox-root[style*="border: 1px solid rgba(238, 238, 238, 1)"] {
  border-color: rgba(80, 140, 220, 0.35) !important;
  background: rgba(5, 15, 32, 0.55) !important;
}

/* ── Favourite icon (unfilled) ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiCheckbox-root svg[data-testid="FavoriteBorderIcon"] {
  color: rgba(160, 200, 255, 0.60) !important;
}

/* ── Call button ── */
:not(body[data-layout2="true"]) .cat-details-root .btn-call {
  background: linear-gradient(135deg, #1245b8 0%, #1a5cd4 100%) !important;
  border: 1px solid rgba(80, 160, 255, 0.50) !important;
  box-shadow: 0 0 8px rgba(30, 100, 255, 0.35) !important;
  color: #e8f4ff !important;
}

:not(body[data-layout2="true"]) .cat-details-root .btn-call:active {
  -webkit-filter: brightness(0.88) !important;
          filter: brightness(0.88) !important;
}

/* ── WhatsApp button ── */
:not(body[data-layout2="true"]) .cat-details-root .btn-whatsapp {
  background: linear-gradient(135deg, #1a7a3a 0%, #22a050 100%) !important;
  border: 1px solid rgba(56, 200, 100, 0.45) !important;
  box-shadow: 0 0 8px rgba(34, 160, 80, 0.30) !important;
  color: #e8fff0 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .btn-whatsapp:active {
  -webkit-filter: brightness(0.88) !important;
          filter: brightness(0.88) !important;
}

/* ── Standard badge ── */
:not(body[data-layout2="true"]) .cat-details-root .badge-standard {
  background: linear-gradient(135deg, #1a6b2a, #22a050) !important;
  box-shadow: 0 0 6px rgba(34, 160, 80, 0.35) !important;
}

/* ── Gold / Premium badge ── */
:not(body[data-layout2="true"]) .cat-details-root .badge-gold {
  background: linear-gradient(135deg, #b06010, #d4820a) !important;
  box-shadow: 0 0 6px rgba(200, 130, 20, 0.40) !important;
}

/* ── Divider line inside cards ── */
:not(body[data-layout2="true"]) .cat-details-root .MuiDivider-root {
  border-color: rgba(56, 140, 255, 0.20) !important;
}

/* ── Empty state text (BookmarkNotFound) ── */
:not(body[data-layout2="true"]) .cat-details-root .cat-details-body > .MuiBox-root .MuiTypography-root {
  color: #7db8e8 !important;
}

/* ═══════════════════════════════════════════════════════════════   LIGHT THEME OVERRIDES — Layout 1 (toggle OFF / left position)
   Scope: :not(body[data-layout2="true"]) .cat-details-root
   Applied on Desktop, Tablet, and Mobile.
   Overrides the prior dark theme for this page.
═══════════════════════════════════════════════════════════════════════ */

:not(body[data-layout2="true"]) .cat-details-root {
  background: #F5F9FF !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-bar {
  background: linear-gradient(180deg, #DCEEFF 0%, #CFE5FF 100%) !important;
  border-bottom: 1px solid #B6D8F8 !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-inner {
  background: transparent !important;
  border: none !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-title,
:not(body[data-layout2="true"]) .cat-details-root .phc-page-title {
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-back {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-back:hover {
  background: #e2e8f0 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-back-icon,
:not(body[data-layout2="true"]) .cat-details-root .phc-back-label {
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-input::-webkit-input-placeholder {
  color: #64748b !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-input::placeholder {
  color: #64748b !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-input:focus {
  border-color: #7c3aed !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-btn {
  background: #eef2f5 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-search-btn:hover {
  background: #e2e8f0 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-share-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-share-btn svg {
  color: #2563eb !important;
}

:not(body[data-layout2="true"]) .cat-details-root .phc-share-btn:hover {
  background: #e2e8f0 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-title {
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-back {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-back:active {
  background: #e2e8f0 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-arrow {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-back-label {
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-input::-webkit-input-placeholder {
  color: #64748b !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-input::placeholder {
  color: #64748b !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-btn {
  background: #eef2f5 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cd-mob-search-btn:active {
  background: #dbe2eb !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCircularProgress-root {
  color: #2563eb !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiTypography-body2 {
  color: #475569 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
  position: relative;
  overflow: hidden;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root::before,
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root::after {
  display: none !important;
  content: none !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCardContent-root {
  background: transparent !important;
}

:not(body[data-layout2="true"]) .cat-details-root .product-card-img-wrap img {
  -webkit-filter: none !important;
          filter: none !important;
  opacity: 1 !important;
  object-fit: cover !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root img[width="7.98px"] {
  -webkit-filter: brightness(0) invert(1) opacity(0.88) !important;
          filter: brightness(0) invert(1) opacity(0.88) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiTypography-root[style*="fontWeight: \"600\""],
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiTypography-root[style*="font-weight: 600"] {
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiTypography-root[style*="fontSize: \"12px\""] {
  color: #64748b !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiTypography-root[style*="fontSize: \"11px\""] {
  color: #475569 !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiSvgIcon-root[data-testid="LocalOfferIcon"] {
  color: rgba(37, 99, 235, 0.65) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiBox-root[style*="border: \"1px solid rgba(238, 238, 238, 1)\""],
:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiBox-root[style*="border: 1px solid rgba(238, 238, 238, 1)"] {
  border-color: rgba(148, 163, 184, 0.35) !important;
  background: rgba(255, 255, 255, 0.80) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiCard-root .MuiCheckbox-root svg[data-testid="FavoriteBorderIcon"] {
  color: rgba(100, 116, 139, 0.60) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .btn-call {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.50) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

:not(body[data-layout2="true"]) .cat-details-root .btn-call:active {
  -webkit-filter: brightness(0.92) !important;
          filter: brightness(0.92) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .btn-whatsapp {
  background: linear-gradient(135deg, #1e3a8a 0%, #334155 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: none !important;
  color: #f8fafc !important;
}

:not(body[data-layout2="true"]) .cat-details-root .btn-whatsapp:active {
  -webkit-filter: brightness(0.92) !important;
          filter: brightness(0.92) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .badge-standard {
  background: #e2e8f0 !important;
  box-shadow: none !important;
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .badge-gold {
  background: #fde68a !important;
  box-shadow: none !important;
  color: #0f172a !important;
}

:not(body[data-layout2="true"]) .cat-details-root .MuiDivider-root {
  border-color: rgba(148, 163, 184, 0.40) !important;
}

:not(body[data-layout2="true"]) .cat-details-root .cat-details-body > .MuiBox-root .MuiTypography-root {
  color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════   CRYSTAL DARK BLUE THEME — Layout 2 (toggle ON / right position)
   Scope: body[data-layout2="true"] .cat-details-root
   Applied on Desktop, Tablet, and Mobile.
   Does NOT affect Layout 1 or any other page.
═══════════════════════════════════════════════════════════════ */

/* ── Page root: deep navy background ── */
body[data-layout2="true"] .cat-details-root {
  background: #081522;
  background-color: #081522 !important;
}

/* ── Sticky header bar ── */
body[data-layout2="true"] .cat-details-root .phc-bar {
  background: linear-gradient(135deg, #071828 0%, #0b2240 50%, #0d2a50 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow:
    0 2px 18px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(56, 189, 248, 0.22),
    inset 0 1px 0 rgba(56, 140, 255, 0.10) !important;
}

body[data-layout2="true"] .cat-details-root .phc-inner {
  background: transparent !important;
  border: none !important;
}

/* ── Desktop header: page title ── */
body[data-layout2="true"] .cat-details-root .phc-title,
body[data-layout2="true"] .cat-details-root .phc-page-title {
  color: #e8f4ff !important;
}

/* ── Desktop back button ── */
body[data-layout2="true"] .cat-details-root .phc-back {
  background: rgba(10, 30, 60, 0.85) !important;
  border: 1px solid rgba(80, 160, 255, 0.40) !important;
  color: #b8d8f8 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

body[data-layout2="true"] .cat-details-root .phc-back:hover {
  background: rgba(15, 45, 85, 0.90) !important;
  box-shadow: 0 3px 12px rgba(30, 100, 255, 0.30) !important;
}

body[data-layout2="true"] .cat-details-root .phc-back-icon,
body[data-layout2="true"] .cat-details-root .phc-back-label {
  color: #b8d8f8 !important;
}

/* ── Desktop search input ── */
body[data-layout2="true"] .cat-details-root .phc-search-input {
  background: #ffffff !important;
  border-color: rgba(80, 160, 255, 0.35) !important;
  color: #0f172a !important;
}

body[data-layout2="true"] .cat-details-root .phc-search-input::-webkit-input-placeholder {
  color: rgba(100, 116, 139, 0.55) !important;
}

body[data-layout2="true"] .cat-details-root .phc-search-input::placeholder {
  color: rgba(100, 116, 139, 0.55) !important;
}

body[data-layout2="true"] .cat-details-root .phc-search-input:focus {
  border-color: rgba(56, 189, 248, 0.65) !important;
}

/* ── Desktop search button ── */
body[data-layout2="true"] .cat-details-root .phc-search-btn {
  background: linear-gradient(135deg, #1245b8 0%, #1a5cd4 100%) !important;
  box-shadow: 0 0 10px rgba(30, 100, 255, 0.40) !important;
}

body[data-layout2="true"] .cat-details-root .phc-search-btn:hover {
  background: linear-gradient(135deg, #1a5cd4 0%, #1e6ee0 100%) !important;
}

/* ── Share button ── */
body[data-layout2="true"] .cat-details-root .phc-share-btn {
  background: rgba(10, 30, 60, 0.85) !important;
  border: 1px solid rgba(80, 160, 255, 0.40) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

body[data-layout2="true"] .cat-details-root .phc-share-btn svg {
  color: #b8d8f8 !important;
}

body[data-layout2="true"] .cat-details-root .phc-share-btn:hover {
  background: rgba(15, 45, 85, 0.90) !important;
  box-shadow: 0 3px 12px rgba(30, 100, 255, 0.30) !important;
}

/* ── Mobile header inner elements ── */
body[data-layout2="true"] .cat-details-root .cd-mob-title {
  color: #b8d8f8 !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-back {
  background: rgba(10, 30, 60, 0.85) !important;
  border-color: rgba(80, 160, 255, 0.40) !important;
  color: #b8d8f8 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-back:active {
  background: rgba(15, 45, 85, 0.90) !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-arrow {
  color: #b8d8f8 !important;
  stroke: #b8d8f8 !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-back-label {
  color: #b8d8f8 !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-search-input {
  background: #ffffff !important;
  border-color: rgba(80, 160, 255, 0.35) !important;
  color: #0f172a !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-search-input::-webkit-input-placeholder {
  color: rgba(100, 116, 139, 0.55) !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-search-input::placeholder {
  color: rgba(100, 116, 139, 0.55) !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-search-btn {
  background: linear-gradient(135deg, #1245b8 0%, #1a5cd4 100%) !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-search-btn:active {
  background: #0d47a1 !important;
}

/* ── Loading spinner ── */
body[data-layout2="true"] .cat-details-root .MuiCircularProgress-root {
  color: #38bdf8 !important;
}

/* ── "Loading more..." text ── */
body[data-layout2="true"] .cat-details-root .MuiTypography-body2 {
  color: #7db8e8 !important;
}

/* ── Product cards: deep navy crystal, 5% narrower, centred ── */
body[data-layout2="true"] .cat-details-root .MuiCard-root {
  width: 95% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: linear-gradient(160deg, #071828 0%, #0b2238 55%, #0e2a48 100%) !important;
  border: 1px solid rgba(56, 160, 255, 0.22) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(56, 189, 248, 0.08),
    0 0 16px rgba(20, 80, 200, 0.14),
    inset 1px 0 0 rgba(56, 189, 248, 0.06),
    inset -1px 0 0 rgba(56, 189, 248, 0.04) !important;
  position: relative;
  overflow: hidden;
}

/* Crystal top-edge: full width, peaks at centre */
body[data-layout2="true"] .cat-details-root .MuiCard-root::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(56, 189, 248, 0.08) 0%,
    rgba(56, 189, 248, 0.45) 20%,
    rgba(125, 211, 252, 0.70) 50%,
    rgba(56, 189, 248, 0.45) 80%,
    rgba(56, 189, 248, 0.08) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Crystal left-edge corner glow — top 35% only */
body[data-layout2="true"] .cat-details-root .MuiCard-root::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 35%;
  background: linear-gradient(180deg,
    rgba(125, 211, 252, 0.60) 0%,
    rgba(56, 189, 248, 0.25) 55%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── Card content area ── */
body[data-layout2="true"] .cat-details-root .MuiCardContent-root {
  background: transparent !important;
}

/* ── Card image: restore fully — no filter, no distortion ── */
body[data-layout2="true"] .cat-details-root .product-card-img-wrap img {
  -webkit-filter: none !important;
          filter: none !important;
  opacity: 1 !important;
  object-fit: cover !important;
}

/* ── Location icon: match #E5E7EB soft white ── */
body[data-layout2="true"] .cat-details-root .MuiCard-root img[width="7.98px"] {
  -webkit-filter: brightness(0) invert(1) opacity(0.88) !important;
          filter: brightness(0) invert(1) opacity(0.88) !important;
}

/* ── Business name: +20% font size (12px → 14.4px) ── */
body[data-layout2="true"] .cat-details-root .MuiCard-root .MuiTypography-root[style*="fontWeight: \"600\""],
body[data-layout2="true"] .cat-details-root .MuiCard-root .MuiTypography-root[style*="font-weight: 600"] {
  color: #e8f4ff !important;
  font-size: 14.4px !important;
  line-height: 17px !important;
}

/* ── Location text: soft white for readability ── */
body[data-layout2="true"] .cat-details-root .MuiCard-root .MuiTypography-root[style*="fontSize: \"12px\""] {
  color: #E5E7EB !important;
}

/* ── Sub-category text ── */
body[data-layout2="true"] .cat-details-root .MuiCard-root .MuiTypography-root[style*="fontSize: \"11px\""] {
  color: #8ab4d4 !important;
}

/* ── Sub-category tag icon ── */
body[data-layout2="true"] .cat-details-root .MuiCard-root .MuiSvgIcon-root[data-testid="LocalOfferIcon"] {
  color: rgba(100, 180, 240, 0.65) !important;
}

/* ── Bookmark circle border ── */
body[data-layout2="true"] .cat-details-root .MuiCard-root .MuiBox-root[style*="border: \"1px solid rgba(238, 238, 238, 1)\""],
body[data-layout2="true"] .cat-details-root .MuiCard-root .MuiBox-root[style*="border: 1px solid rgba(238, 238, 238, 1)"] {
  border-color: rgba(80, 140, 220, 0.35) !important;
  background: rgba(5, 15, 32, 0.55) !important;
}

/* ── Favourite icon (unfilled) ── */
body[data-layout2="true"] .cat-details-root .MuiCard-root .MuiCheckbox-root svg[data-testid="FavoriteBorderIcon"] {
  color: rgba(160, 200, 255, 0.60) !important;
}

/* ── Call button: crystal blue ── */
body[data-layout2="true"] .cat-details-root .btn-call {
  background: linear-gradient(135deg, #1245b8 0%, #1a5cd4 100%) !important;
  border: 1px solid rgba(80, 160, 255, 0.50) !important;
  box-shadow: 0 0 8px rgba(30, 100, 255, 0.35) !important;
  color: #e8f4ff !important;
}

body[data-layout2="true"] .cat-details-root .btn-call:active {
  -webkit-filter: brightness(0.88) !important;
          filter: brightness(0.88) !important;
}

/* ── WhatsApp button: crystal green (stays distinguishable) ── */
body[data-layout2="true"] .cat-details-root .btn-whatsapp {
  background: linear-gradient(135deg, #1a7a3a 0%, #22a050 100%) !important;
  border: 1px solid rgba(56, 200, 100, 0.45) !important;
  box-shadow: 0 0 8px rgba(34, 160, 80, 0.30) !important;
  color: #e8fff0 !important;
}

body[data-layout2="true"] .cat-details-root .btn-whatsapp:active {
  -webkit-filter: brightness(0.88) !important;
          filter: brightness(0.88) !important;
}

/* ── Standard badge ── */
body[data-layout2="true"] .cat-details-root .badge-standard {
  background: linear-gradient(135deg, #1a6b2a, #22a050) !important;
  box-shadow: 0 0 6px rgba(34, 160, 80, 0.35) !important;
}

/* ── Gold / Premium badge ── */
body[data-layout2="true"] .cat-details-root .badge-gold {
  background: linear-gradient(135deg, #b06010, #d4820a) !important;
  box-shadow: 0 0 6px rgba(200, 130, 20, 0.40) !important;
}

/* ── Divider line inside cards ── */
body[data-layout2="true"] .cat-details-root .MuiDivider-root {
  border-color: rgba(56, 140, 255, 0.20) !important;
}

/* ── Empty state text (BookmarkNotFound) ── */
body[data-layout2="true"] .cat-details-root .cat-details-body > .MuiBox-root .MuiTypography-root {
  color: #7db8e8 !important;
}

/* ── Header search + back-button: mobile/tablet ── */
body[data-layout2="true"] .cat-details-root .phc-search-input {
  width: 120px !important;
}

body[data-layout2="true"] .cat-details-root .phc-back-label {
  max-width: 180px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-search-input {
  flex: 0 0 90px !important;
  min-width: 0 !important;
  width: 90px !important;
}

body[data-layout2="true"] .cat-details-root .cd-mob-back-label {
  max-width: 140px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* ── Header search + back-button: desktop ── */
@media (min-width: 1024px) {
  body[data-layout2="true"] .cat-details-root .phc-search-input {
    width: 150px !important;
  }
  body[data-layout2="true"] .cat-details-root .phc-back-label {
    max-width: 280px !important;
  }
}

body[data-layout1="true"] #parent-div .psc-header {
  background-color: #e8f5e9 !important;
  box-shadow: none !important;
}

body[data-layout1="true"] #parent-div .list-Card,
body[data-layout1="true"] #parent-div .MuiCard-root,
body[data-layout1="true"] #parent-div .product-card,
body[data-layout1="true"] #parent-div .list-card,
body[data-layout1="true"] #parent-div .cat-card {
  box-shadow: none !important;
}

/* =================================================================
   ServiceLink.css - Desktop Responsive Layout
================================================================= */

/* Main layout container */
.service-link-container {
  min-height: 100vh;
  background: #f0f2f5;
  padding-bottom: 40px;
  box-sizing: border-box;
}

/* Sticky header styling */
.service-link-header {
  height: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
}

.service-link-header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Main body wrapper centered */
.service-link-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
  box-sizing: border-box;
}

/* Grid layout for service link cards */
.service-link-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 14px;
  gap: 14px;
  width: 100%;
  margin-top: 15px;
}

@media (min-width: 600px) {
  .service-link-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (min-width: 960px) {
  .service-link-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Individual card styling */
.service-main {
  height: 76px;
  background: white;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 12px 16px;
  gap: 14px;
  transition: all 0.25s ease;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.service-main:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
  border-color: rgba(33, 130, 177, 0.15);
}

.service-secondary {
  -webkit-transform: rotate(29deg);
          transform: rotate(29deg);
  background: #a2a2ac;
  position: absolute;
  height: 61px;
  left: 40px;
  top: -9px;
  -webkit-filter: blur(2px);
          filter: blur(2px);
  width: 3px;
}

/* Title bar */
.typo {
  width: 100%;
  height: 40px;
  border: 1px solid #c8e6c9;
  background-color: #edf7ed;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  color: #134013;
}

/* Share button */
.service-button-class {
  border: solid 1px #7eb87e;
  display: flex;
  align-items: center;
  justify-content: center; 
  border-radius: 8px;
  padding: 8px 16px;
  background: #fff;
  color: #134013;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.service-button-class:hover {
  background: #edf7ed;
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

/* =================================================================
   ArivumAarogyavum.css - Desktop Responsive Layout
================================================================= */

.arivum-container {
  min-height: 100vh;
  background: #f0f2f5;
  padding-bottom: 80px;
}

/* Header bar styling */
.arivum-header {
  height: 60px;
  background-color: #edf7ed;
  border-bottom: 2px solid #c8e6c9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.arivum-header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Content wrapper centered */
.arivum-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* Subcategories responsive grid */
.arivum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

@media (min-width: 600px) {
  .arivum-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

@media (min-width: 960px) {
  .arivum-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }
}

/* Products responsive grid */
.arivum-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

@media (min-width: 600px) {
  .arivum-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

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

/* Premium Card style */
.arivum-item-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  display: flex;
  flex-direction: column;
  padding: 8px;
  box-sizing: border-box;
}

.arivum-item-card:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.arivum-image-wrapper {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16/9;
  width: 100%;
}

.arivum-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.arivum-image-shadow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.arivum-label-wrapper {
  padding: 8px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
}

.arivum-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center;
  line-height: 1.3 !important;
  color: #333;
  font-family: "Malayalam", sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   InfluencersPage.css
   Premium Dark Royal Blue · Crystal Glass · Neon Glow · STEP Badges
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Google Font import (system fallback if unavailable) ── */

/* ══════════════════════════════════════════════════════════════════════
   ROOT  —  Deep Navy → Royal Blue → Electric Blue  (left-to-right sweep)
   Layered: base diagonal gradient + 6 radial light sources + crystal mesh
══════════════════════════════════════════════════════════════════════ */
.ip-root {
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: relative;
  isolation: isolate;

  /* ── Layer 1: base diagonal sweep  navy-left → royal-blue-right ── */
  background:
    /* Layer 2 – top-left corner ambient navy glow */
    radial-gradient(ellipse 70% 45% at 0% 0%,
      rgba(8, 28, 90, 0.90) 0%,
      transparent 65%),
    /* Layer 3 – top-centre electric-blue crown */
    radial-gradient(ellipse 85% 40% at 50% 0%,
      rgba(20, 90, 220, 0.55) 0%,
      transparent 62%),
    /* Layer 4 – right-side crystal-blue light source */
    radial-gradient(ellipse 55% 70% at 100% 30%,
      rgba(30, 130, 255, 0.42) 0%,
      transparent 60%),
    /* Layer 5 – bottom-right teal accent */
    radial-gradient(ellipse 50% 40% at 95% 95%,
      rgba(0, 180, 240, 0.28) 0%,
      transparent 58%),
    /* Layer 6 – bottom-left deep purple shadow */
    radial-gradient(ellipse 45% 35% at 5% 90%,
      rgba(40, 10, 120, 0.45) 0%,
      transparent 60%),
    /* Layer 7 – centre mid-depth blue fill */
    radial-gradient(ellipse 60% 50% at 55% 55%,
      rgba(10, 50, 160, 0.30) 0%,
      transparent 70%),
    /* Layer 1 – base: left dark-navy → right royal-blue diagonal */
    linear-gradient(
      115deg,
      #020818 0%,
      #040d28 18%,
      #061540 32%,
      #0a2260 48%,
      #0d2e80 62%,
      #1040a8 76%,
      #1550c0 88%,
      #1a5fd0 100%
    );
}

/* ── Pseudo-element: crystal mesh / glass reflection overlay ── */
.ip-root::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Diagonal crystal-glass highlight bands */
  background:
    linear-gradient(
      128deg,
      transparent 0%,
      rgba(255,255,255,0.018) 28%,
      transparent 30%,
      transparent 54%,
      rgba(255,255,255,0.012) 56%,
      transparent 58%,
      transparent 80%,
      rgba(255,255,255,0.008) 82%,
      transparent 84%
    );
}

/* ── Pseudo-element: soft inner-glow ring around content ── */
.ip-root::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 0 120px rgba(10, 60, 180, 0.22),
              inset 0 0 60px  rgba(0, 100, 220, 0.12);
}

.ip-page {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: 96px;
}

/* ══════════════════════════════════════════════════════════════════════
   BACK BUTTON
══════════════════════════════════════════════════════════════════════ */
.ip-back-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 12px rgba(30,144,255,0.25);
  transition: background 0.2s, box-shadow 0.2s;
}
.ip-back-btn:active {
  background: rgba(255,255,255,0.16);
  box-shadow: 0 0 20px rgba(30,144,255,0.45);
}
.ip-back-btn-light {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #2182B1;
  background: rgba(33,130,177,0.10);
}

/* ══════════════════════════════════════════════════════════════════════
   HERO SECTION  —  premium crystal-glass panel
══════════════════════════════════════════════════════════════════════ */
.ip-hero {
  position: relative;
  margin: 0 10px 14px;
  border-radius: 20px;
  overflow: hidden;
  padding: 10px 10px 8px;

  background:
    radial-gradient(ellipse 65% 85% at 100% 50%,
      rgba(25, 94, 217, 0.32) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 95% 5%,
      rgba(50, 140, 255, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 0% 100%,
      rgba(8, 20, 80, 0.65) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(11, 47, 99, 0.38) 0%, transparent 70%),
    linear-gradient(
      118deg,
      #08182f 0%,
      #0b2f63 30%,
      #0e3a82 55%,
      #1550b8 78%,
      #195ed9 100%
    );

  /* Softer, more elegant outer glow — no thick double-ring */
  box-shadow:
    0 0 0 1px rgba(100, 180, 255, 0.18),
    0 20px 50px rgba(2, 8, 28, 0.70),
    0 6px 18px rgba(0, 0, 0, 0.40),
    0 0 40px rgba(25, 94, 217, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}

/* ── Ambient light orbs inside hero ── */
.ip-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* Top-right: bright electric-blue spotlight */
.ip-orb-a {
  width: 200px; height: 200px;
  top: -80px; right: -60px;
  background: radial-gradient(circle,
    rgba(30, 150, 255, 0.55) 0%,
    rgba(20, 100, 220, 0.25) 45%,
    transparent 70%);
  -webkit-filter: blur(55px);
          filter: blur(55px);
  -webkit-animation: ip-orb-pulse-a 6s ease-in-out infinite;
          animation: ip-orb-pulse-a 6s ease-in-out infinite;
}
/* Bottom-left: deep purple-blue shadow glow */
.ip-orb-b {
  width: 140px; height: 140px;
  bottom: -50px; left: -40px;
  background: radial-gradient(circle,
    rgba(80, 30, 200, 0.40) 0%,
    rgba(40, 10, 140, 0.18) 50%,
    transparent 70%);
  -webkit-filter: blur(50px);
          filter: blur(50px);
  -webkit-animation: ip-orb-pulse-b 8s ease-in-out infinite;
          animation: ip-orb-pulse-b 8s ease-in-out infinite;
}
/* Centre: soft teal-blue mid-light */
.ip-orb-c {
  width: 100px; height: 100px;
  top: 35%; left: 28%;
  background: radial-gradient(circle,
    rgba(0, 200, 240, 0.22) 0%,
    transparent 68%);
  -webkit-filter: blur(38px);
          filter: blur(38px);
  -webkit-animation: ip-orb-pulse-c 7s ease-in-out infinite;
          animation: ip-orb-pulse-c 7s ease-in-out infinite;
}
/* Top-left: faint white crystal sparkle */
.ip-orb-d {
  width: 100px; height: 100px;
  top: 8%; left: 8%;
  background: radial-gradient(circle,
    rgba(200, 230, 255, 0.12) 0%,
    transparent 70%);
  -webkit-filter: blur(22px);
          filter: blur(22px);
}
/* Bottom-right: extra crystal-blue accent */
.ip-orb-e {
  width: 120px; height: 120px;
  bottom: -20px; right: 10%;
  background: radial-gradient(circle,
    rgba(20, 160, 255, 0.20) 0%,
    transparent 68%);
  -webkit-filter: blur(32px);
          filter: blur(32px);
  animation: ip-orb-pulse-a 9s ease-in-out infinite reverse;
}

@-webkit-keyframes ip-orb-pulse-a {
  0%, 100% { opacity: 1;   -webkit-transform: scale(1);   transform: scale(1);    }
  50%       { opacity: 0.70; -webkit-transform: scale(1.12); transform: scale(1.12); }
}

@keyframes ip-orb-pulse-a {
  0%, 100% { opacity: 1;   -webkit-transform: scale(1);   transform: scale(1);    }
  50%       { opacity: 0.70; -webkit-transform: scale(1.12); transform: scale(1.12); }
}
@-webkit-keyframes ip-orb-pulse-b {
  0%, 100% { opacity: 1;   -webkit-transform: scale(1);   transform: scale(1);    }
  50%       { opacity: 0.65; -webkit-transform: scale(1.08); transform: scale(1.08); }
}
@keyframes ip-orb-pulse-b {
  0%, 100% { opacity: 1;   -webkit-transform: scale(1);   transform: scale(1);    }
  50%       { opacity: 0.65; -webkit-transform: scale(1.08); transform: scale(1.08); }
}
@-webkit-keyframes ip-orb-pulse-c {
  0%, 100% { opacity: 0.80; -webkit-transform: scale(1); transform: scale(1);    }
  50%       { opacity: 1;    -webkit-transform: scale(1.15);    transform: scale(1.15); }
}
@keyframes ip-orb-pulse-c {
  0%, 100% { opacity: 0.80; -webkit-transform: scale(1); transform: scale(1);    }
  50%       { opacity: 1;    -webkit-transform: scale(1.15);    transform: scale(1.15); }
}

/* ── Glass card inside hero ── */
.ip-hero-card {
  position: relative;
  z-index: 2;

  background:
    radial-gradient(ellipse 80% 60% at 100% 0%,
      rgba(25, 94, 217, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 100%,
      rgba(4, 14, 50, 0.38) 0%, transparent 65%),
    linear-gradient(
      118deg,
      rgba(6,  18,  58, 0.72) 0%,
      rgba(10, 32,  96, 0.60) 35%,
      rgba(16, 52, 138, 0.48) 65%,
      rgba(22, 72, 175, 0.38) 100%
    );

  /* Softer asymmetric border — elegant, not embossed */
  border-top:    1px solid rgba(160, 215, 255, 0.30);
  border-left:   1px solid rgba(120, 185, 255, 0.18);
  border-right:  1px solid rgba(30,  100, 200, 0.08);
  border-bottom: 1px solid rgba(15,   70, 160, 0.06);

  border-radius: 16px;
  padding: 10px 10px 8px;

  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);

  /* Soft inner highlight only on top — no heavy bevel */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 1px 0  0 rgba(255,255,255,0.06),
    0 0 28px rgba(25, 94, 217, 0.16),
    0 8px 24px rgba(0,0,0,0.28),
    0 2px 6px rgba(0,0,0,0.14);
}

.ip-hero-sheen {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.10) 0%,
    rgba(180,220,255,0.04) 45%,
    rgba(255,255,255,0.00) 100%
  );
  border-radius: 16px 16px 60% 60% / 16px 16px 20px 20px;
  pointer-events: none;
}

/* Hero title row — title left, nav icons right */
.ip-hero-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.ip-hero-titles {
  flex: 1 1;
  min-width: 0;
}

/* Brand row — globe icon + title side by side */
.ip-hero-brand {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Nav buttons cluster — top-right of hero */
.ip-hero-nav-btns {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* Individual nav button — crystal glass square */
.ip-nav-btn {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.14) 0%,
    rgba(20, 80, 200, 0.22) 100%
  );
  border-top:  1px solid rgba(160, 210, 255, 0.38);
  border-left: 1px solid rgba(120, 190, 255, 0.24);
  border-right:  1px solid rgba(20, 80, 180, 0.14);
  border-bottom: 1px solid rgba(10, 60, 160, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 0 14px rgba(30, 144, 255, 0.35),
    0 3px 8px rgba(0,0,0,0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: box-shadow 0.16s ease, -webkit-transform 0.16s ease;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  transition: transform 0.16s ease, box-shadow 0.16s ease, -webkit-transform 0.16s ease;
}
.ip-nav-btn:active {
  -webkit-transform: scale(0.88);
          transform: scale(0.88);
  box-shadow: 0 0 20px rgba(30,144,255,0.55), 0 2px 6px rgba(0,0,0,0.35);
}
.ip-nav-btn-glow {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: radial-gradient(circle at 35% 30%,
    rgba(80, 180, 255, 0.35) 0%,
    transparent 70%);
  pointer-events: none;
}

/* Network icon — crystal glass tile (smaller, inline with title) */
.ip-hero-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.14) 0%,
    rgba(30, 100, 220, 0.18) 100%
  );
  border-top:  1px solid rgba(180, 220, 255, 0.40);
  border-left: 1px solid rgba(140, 200, 255, 0.28);
  border-right:  1px solid rgba(20, 80, 180, 0.18);
  border-bottom: 1px solid rgba(10, 60, 160, 0.14);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 0 16px rgba(30, 144, 255, 0.45),
    0 0 6px rgba(30, 144, 255, 0.25),
    0 3px 8px rgba(0,0,0,0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ip-hero-icon-glow {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(80, 180, 255, 0.45) 0%,
      rgba(30, 120, 255, 0.15) 50%,
      transparent 75%);
}

/* Title */
.ip-hero-title {
  color: #fff;
  font-size: 1.42rem;
  font-weight: 900;
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.03em;
}
.ip-hero-title-neon {
  background: linear-gradient(90deg, #60c8ff 0%, #a78bfa 55%, #60c8ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-animation: ip-neon-shift 4s linear infinite;
          animation: ip-neon-shift 4s linear infinite;
  -webkit-filter: drop-shadow(0 0 8px rgba(96,200,255,0.55));
          filter: drop-shadow(0 0 8px rgba(96,200,255,0.55));
}
@-webkit-keyframes ip-neon-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes ip-neon-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Subtitle */
.ip-hero-sub {
  color: rgba(200,225,255,0.55);
  font-size: 0.70rem;
  line-height: 1.48;
  margin: 0 0 8px;
  font-weight: 400;
}

/* ── Stats 2×2 grid ── */
.ip-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  gap: 5px;
}

.psc {
  position: relative;
  /* Soft glassmorphism — lighter, more transparent */
  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.07) 0%,
      rgba(30, 80, 180, 0.06) 60%,
      rgba(255,255,255,0.03) 100%
    );
  /* Soft directional border — bright top, subtle rest */
  border-top:    1px solid rgba(180, 220, 255, 0.22);
  border-left:   1px solid rgba(140, 195, 255, 0.14);
  border-right:  1px solid rgba(30,  80,  180, 0.07);
  border-bottom: 1px solid rgba(10,  40,  120, 0.05);
  border-radius: 11px;
  padding: 7px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 1px 0  0 rgba(255,255,255,0.05),
    0 2px 12px rgba(0,0,0,0.18),
    0 0 16px rgba(25,94,217,0.08);
  opacity: 0;
  -webkit-transform: translateY(12px) scale(0.97);
          transform: translateY(12px) scale(0.97);
  transition: opacity 0.50s ease, -webkit-transform 0.50s ease;
  transition: opacity 0.50s ease, transform 0.50s ease;
  transition: opacity 0.50s ease, transform 0.50s ease, -webkit-transform 0.50s ease;
}
.psc.psc-visible {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
}

/* Glow ring behind icon */
.psc-glow-ring {
  position: absolute;
  top: -14px; left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, #38bdf8 0%, transparent 70%);
  background: radial-gradient(circle, var(--glow, #38bdf8) 0%, transparent 70%);
  opacity: 0.18;
  -webkit-filter: blur(9px);
          filter: blur(9px);
  pointer-events: none;
}

.psc-icon {
  display: flex;
  margin-bottom: 1px;
  -webkit-filter: drop-shadow(0 0 5px currentColor);
          filter: drop-shadow(0 0 5px currentColor);
}
.psc-value {
  color: #fff;
  font-weight: 900;
  font-size: 1.10rem;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 10px rgba(255,255,255,0.28);
}
.psc-label {
  color: rgba(200,225,255,0.52);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

/* Tagline strip — crystal glass pill */
.ip-tagline {
  position: relative;
  z-index: 2;
  margin-top: 7px;
  background: linear-gradient(
    118deg,
    rgba(10, 30, 90, 0.55) 0%,
    rgba(16, 50, 130, 0.45) 50%,
    rgba(22, 70, 165, 0.38) 100%
  );
  border-top:    1px solid rgba(100, 180, 255, 0.28);
  border-left:   1px solid rgba(80,  160, 255, 0.18);
  border-right:  1px solid rgba(30,  100, 200, 0.12);
  border-bottom: 1px solid rgba(20,   80, 180, 0.10);
  border-radius: 9px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: rgba(200,225,255,0.62);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 14px rgba(20, 100, 220, 0.12);
}
.ip-tagline-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #60d0ff 0%, #1e90ff 100%);
  box-shadow: 0 0 6px #38bdf8, 0 0 12px rgba(56,189,248,0.45);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════════════════════════════════════ */
.ip-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 14px;
}
.ip-section-line {
  flex: 1 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,144,255,0.30), transparent);
}
.ip-section-label {
  color: rgba(96,200,255,0.55);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   CARDS LIST
══════════════════════════════════════════════════════════════════════ */
.ip-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px;
}

/* ── Card shell ── */
.pc {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  min-height: 148px;
  /* Polished acrylic glass — soft layered background */
  background:
    radial-gradient(ellipse 70% 55% at 0% 0%,
      rgba(25, 94, 217, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 100% 100%,
      rgba(4, 14, 50, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 35% 35% at 100% 0%,
      rgba(80, 160, 255, 0.06) 0%, transparent 60%),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.065) 0%,
      rgba(18, 55, 150, 0.070) 50%,
      rgba(4, 14, 50, 0.050) 100%
    );
  /* Elegant asymmetric crystal border — thin, directional */
  border-top:    1px solid rgba(200, 228, 255, 0.28);
  border-left:   1px solid rgba(150, 200, 255, 0.16);
  border-right:  1px solid rgba(30,  80,  180, 0.07);
  border-bottom: 1px solid rgba(8,   30,  100, 0.05);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow:
    /* soft top-left crystal reflection */
    inset 0  1px 0 rgba(255,255,255,0.14),
    inset 1px 0  0 rgba(200,225,255,0.08),
    /* gentle bottom-right shadow */
    inset -1px 0  0 rgba(0,0,0,0.05),
    inset 0 -1px  0 rgba(0,0,0,0.14),
    /* ambient outer glow — soft, not heavy */
    0 8px 32px rgba(0,0,0,0.36),
    0 2px 8px rgba(0,0,0,0.22),
    0 0 20px rgba(25,94,217,0.08),
    /* subtle top-edge light bleed */
    0 -1px 6px rgba(160,210,255,0.07);
  opacity: 0;
  -webkit-transform: translateY(18px);
          transform: translateY(18px);
  transition: opacity 0.48s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease, -webkit-transform 0.48s cubic-bezier(0.22,1,0.36,1);
  transition: opacity 0.48s cubic-bezier(0.22,1,0.36,1), transform 0.48s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease;
  transition: opacity 0.48s cubic-bezier(0.22,1,0.36,1), transform 0.48s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease, -webkit-transform 0.48s cubic-bezier(0.22,1,0.36,1);
}
.pc.pc-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.pc:active {
  -webkit-transform: scale(0.984);
          transform: scale(0.984);
  box-shadow: 0 3px 16px rgba(0,0,0,0.35);
}

/* Crystal top-edge sheen — soft diagonal reflection */
.pc-sheen {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(
    155deg,
    rgba(255,255,255,0.09) 0%,
    rgba(200,228,255,0.04) 40%,
    rgba(255,255,255,0.00) 100%
  );
  border-radius: 20px 20px 60% 60% / 20px 20px 24px 24px;
  pointer-events: none;
  z-index: 5;
}

/* ════════ LEFT — square photo ════════ */
.pc-photo-wrap {
  flex-shrink: 0;
  width: 156px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 0 10px 10px;
  position: relative;
}

/* Soft bloom glow behind photo */
.pc-photo-bloom {
  position: absolute;
  width: 150px; height: 120px;
  border-radius: 50%;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  opacity: 0.60;
  pointer-events: none;
  z-index: 0;
}

/* Square frame with glowing border */
.pc-photo-frame {
  position: relative;
  z-index: 1;
  width: 137px;
  height: 110px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #08182f 0%, #0b2f63 100%);
}

.pc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: -webkit-transform 0.40s ease;
  transition: transform 0.40s ease;
  transition: transform 0.40s ease, -webkit-transform 0.40s ease;
}
.pc:hover .pc-photo {
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}

.pc-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d2a50 0%, #1a3d70 100%);
}

/* Inner glow overlay on photo */
.pc-photo-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 15px;
}

/* Verified badge on photo corner */
.pc-verified {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e90ff, #0047c8);
  border: 2px solid rgba(255,255,255,0.30);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}

/* ════════ CENTER — info ════════ */
.pc-info {
  flex: 1 1;
  min-width: 0;
  padding: 11px 8px 11px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

/* Name */
.pc-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1px;
  justify-content: space-between;
}
.pc-name {
  color: #e8f4ff;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta rows */
.pc-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.64rem;
  font-weight: 600;
}
.pc-meta-cat { color: #c4b5fd; }
.pc-meta-loc { color: #6ee7b7; }

/* Subtitle / profession */
.pc-subtitle {
  color: rgba(148,200,255,0.72);
  font-size: 0.60rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 1px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description */
.pc-desc {
  color: rgba(185,215,250,0.58);
  font-size: 0.67rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom row: contact button + inline socials */
.pc-bottom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.pc-inline-socials {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pc-inline-socials .psoc {
  width: 24px; height: 24px;
  border-radius: 7px;
}
.pc-inline-socials .psoc-gloss {
  border-radius: 6px 6px 50% 50% / 6px 6px 10px 10px;
}

/* Buttons */
.pc-btns {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 9px;
  font-size: 0.60rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: none;
  letter-spacing: 0.03em;
  transition: box-shadow 0.18s ease, -webkit-transform 0.18s ease;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  transition: transform 0.18s ease, box-shadow 0.18s ease, -webkit-transform 0.18s ease;
  white-space: nowrap;
  font-family: inherit;
}
.pc-btn:active { -webkit-transform: scale(0.90); transform: scale(0.90); }

.pc-btn-primary {
  background: linear-gradient(135deg, #1e90ff 0%, #0047c8 100%);
  color: #fff;
  box-shadow: 0 0 12px rgba(30,144,255,0.50), 0 3px 8px rgba(0,0,0,0.30);
}
.pc-btn-primary:hover {
  box-shadow: 0 0 20px rgba(30,144,255,0.70), 0 4px 12px rgba(0,0,0,0.35);
}
.pc-btn-ghost {
  background: rgba(255,255,255,0.07);
  color: rgba(200,225,255,0.78);
  border: 1px solid rgba(255,255,255,0.13);
}

/* ════════ RIGHT — STEP badge only ════════ */
.pc-right {
  flex-shrink: 0;
  width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border-left: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.14);
}

/* ══════════════════════════════════════════════════════════════════════
   INFLUENCER PAGE — Mobile-only overrides  (max-width: 767px)
══════════════════════════════════════════════════════════════════════ */

/* ── Mobile background animations ── */
@-webkit-keyframes ip-bg-drift {
  0%   { opacity: 0.82; -webkit-transform: translateX(0)    translateY(0); transform: translateX(0)    translateY(0); }
  30%  { opacity: 0.92; -webkit-transform: translateX(5px)  translateY(-4px); transform: translateX(5px)  translateY(-4px); }
  65%  { opacity: 0.86; -webkit-transform: translateX(-4px) translateY(5px); transform: translateX(-4px) translateY(5px); }
  100% { opacity: 0.82; -webkit-transform: translateX(0)    translateY(0); transform: translateX(0)    translateY(0); }
}
@keyframes ip-bg-drift {
  0%   { opacity: 0.82; -webkit-transform: translateX(0)    translateY(0); transform: translateX(0)    translateY(0); }
  30%  { opacity: 0.92; -webkit-transform: translateX(5px)  translateY(-4px); transform: translateX(5px)  translateY(-4px); }
  65%  { opacity: 0.86; -webkit-transform: translateX(-4px) translateY(5px); transform: translateX(-4px) translateY(5px); }
  100% { opacity: 0.82; -webkit-transform: translateX(0)    translateY(0); transform: translateX(0)    translateY(0); }
}
@-webkit-keyframes ip-light-sweep {
  0%   { -webkit-transform: translateX(-130%) skewX(-16deg); transform: translateX(-130%) skewX(-16deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { -webkit-transform: translateX(230%)  skewX(-16deg); transform: translateX(230%)  skewX(-16deg); opacity: 0; }
}
@keyframes ip-light-sweep {
  0%   { -webkit-transform: translateX(-130%) skewX(-16deg); transform: translateX(-130%) skewX(-16deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { -webkit-transform: translateX(230%)  skewX(-16deg); transform: translateX(230%)  skewX(-16deg); opacity: 0; }
}
@-webkit-keyframes ip-edge-pulse-left {
  0%,100% { opacity: 0.55; -webkit-transform: scaleY(1); transform: scaleY(1); }
  50%      { opacity: 0.85; -webkit-transform: scaleY(1.06); transform: scaleY(1.06); }
}
@keyframes ip-edge-pulse-left {
  0%,100% { opacity: 0.55; -webkit-transform: scaleY(1); transform: scaleY(1); }
  50%      { opacity: 0.85; -webkit-transform: scaleY(1.06); transform: scaleY(1.06); }
}
@-webkit-keyframes ip-edge-pulse-right {
  0%,100% { opacity: 0.45; -webkit-transform: scaleY(1); transform: scaleY(1); }
  50%      { opacity: 0.72; -webkit-transform: scaleY(1.08); transform: scaleY(1.08); }
}
@keyframes ip-edge-pulse-right {
  0%,100% { opacity: 0.45; -webkit-transform: scaleY(1); transform: scaleY(1); }
  50%      { opacity: 0.72; -webkit-transform: scaleY(1.08); transform: scaleY(1.08); }
}
@-webkit-keyframes ip-card-shimmer {
  0%   { -webkit-transform: translateX(-160%) skewX(-18deg); transform: translateX(-160%) skewX(-18deg); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { -webkit-transform: translateX(260%)  skewX(-18deg); transform: translateX(260%)  skewX(-18deg); opacity: 0; }
}
@keyframes ip-card-shimmer {
  0%   { -webkit-transform: translateX(-160%) skewX(-18deg); transform: translateX(-160%) skewX(-18deg); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { -webkit-transform: translateX(260%)  skewX(-18deg); transform: translateX(260%)  skewX(-18deg); opacity: 0; }
}
@-webkit-keyframes ip-btn-glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(30,100,255,0.45), 0 0 0 1px rgba(80,160,255,0.30), 0 3px 10px rgba(0,0,0,0.40), inset 0 1px 0 rgba(180,220,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.20); }
  50%      { box-shadow: 0 0 18px rgba(30,100,255,0.65), 0 0 0 1px rgba(100,180,255,0.45), 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(200,235,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.22); }
}
@keyframes ip-btn-glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(30,100,255,0.45), 0 0 0 1px rgba(80,160,255,0.30), 0 3px 10px rgba(0,0,0,0.40), inset 0 1px 0 rgba(180,220,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.20); }
  50%      { box-shadow: 0 0 18px rgba(30,100,255,0.65), 0 0 0 1px rgba(100,180,255,0.45), 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(200,235,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.22); }
}

@media (max-width: 767px) {

  /* ── Animated background: ambient drift on crystal mesh overlay ── */
  .ip-root::before {
    -webkit-animation: ip-bg-drift 20s ease-in-out infinite;
            animation: ip-bg-drift 20s ease-in-out infinite;
    will-change: transform, opacity;
  }

  /* ── Slow light sweep across page background ── */
  .ip-root::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* Left-edge ambient glow */
    background:
      linear-gradient(90deg,
        rgba(30, 100, 255, 0.06) 0%,
        rgba(30, 100, 255, 0.03) 12%,
        transparent 28%
      ),
      /* Right-edge crystal reflection */
      linear-gradient(270deg,
        rgba(0, 180, 255, 0.05) 0%,
        rgba(0, 180, 255, 0.02) 10%,
        transparent 25%
      ),
      /* Top-edge crown glow */
      linear-gradient(180deg,
        rgba(20, 80, 220, 0.08) 0%,
        transparent 20%
      );
    -webkit-animation: ip-edge-pulse-left 12s ease-in-out infinite;
            animation: ip-edge-pulse-left 12s ease-in-out infinite;
    will-change: opacity, transform;
  }

  /* ── Card: taller to accommodate subtitle + more description ── */
  .pc {
    min-height: 148px;
  }

  /* ── Card: crystal shimmer sweep ── */
  .pc::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 36%;
    height: 100%;
    background: linear-gradient(
      108deg,
      transparent 0%,
      rgba(255,255,255,0.00) 35%,
      rgba(180,225,255,0.09) 50%,
      rgba(255,255,255,0.00) 65%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 6;
    -webkit-animation: ip-card-shimmer 14s ease-in-out infinite;
            animation: ip-card-shimmer 14s ease-in-out infinite;
    will-change: transform, opacity;
  }
  .pc:nth-child(even)::after  { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; }
  .pc:nth-child(3n)::after    { -webkit-animation-delay: 7s; animation-delay: 7s; }

  /* ── Hero outer shell: deep premium navy, 90% dark ── */
  .ip-hero {
    background:
      /* subtle right-edge crystal-blue reflection — only 10% brightness */
      radial-gradient(ellipse 40% 70% at 100% 40%,
        rgba(30, 90, 200, 0.12) 0%, transparent 60%),
      /* faint top-centre crown — barely visible */
      radial-gradient(ellipse 70% 35% at 50% 0%,
        rgba(15, 50, 140, 0.18) 0%, transparent 55%),
      /* deep navy base — 90% of the panel */
      linear-gradient(
        122deg,
        #010510 0%,
        #020a1c 20%,
        #030d28 38%,
        #050f32 55%,
        #071540 70%,
        #081848 85%,
        #091a52 100%
      );
    /* Premium crystal frame: thin light-blue glowing outline */
    box-shadow:
      /* outer thin light-blue glow line */
      0 0 0 1px rgba(80, 160, 255, 0.28),
      /* second subtle ring for depth */
      0 0 0 2px rgba(20, 70, 180, 0.10),
      /* deep drop shadow */
      0 24px 56px rgba(0, 1, 8, 0.88),
      0 8px 20px rgba(0, 0, 0, 0.60),
      /* very faint ambient blue glow */
      0 0 40px rgba(10, 50, 160, 0.10),
      /* inner top highlight */
      inset 0 1px 0 rgba(120, 190, 255, 0.18),
      /* inner bottom depth */
      inset 0 -1px 0 rgba(0, 0, 0, 0.40),
      /* left edge crystal reflection */
      inset 1px 0 0 rgba(100, 170, 255, 0.08),
      /* right edge subtle depth */
      inset -1px 0 0 rgba(0, 0, 0, 0.20);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
  }

  /* Crystal shimmer band across hero outer shell */
  .ip-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      138deg,
      transparent 0%,
      rgba(255,255,255,0.022) 22%,
      transparent 24%,
      transparent 60%,
      rgba(255,255,255,0.012) 62%,
      transparent 64%
    );
    border-radius: 20px;
  }

  /* Thin cyan top-edge accent line on hero */
  .ip-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(80, 160, 255, 0.35) 25%,
      rgba(140, 210, 255, 0.55) 50%,
      rgba(80, 160, 255, 0.35) 75%,
      transparent);
    pointer-events: none;
    z-index: 5;
  }

  /* ── Hero glass card: very dark navy, 90% dark ── */
  .ip-hero-card {
    background:
      /* top-right faint crystal reflection */
      radial-gradient(ellipse 55% 40% at 100% 0%,
        rgba(20, 70, 180, 0.08) 0%, transparent 55%),
      /* bottom-left deep shadow */
      radial-gradient(ellipse 50% 45% at 0% 100%,
        rgba(1, 3, 14, 0.70) 0%, transparent 60%),
      /* deep navy base */
      linear-gradient(
        122deg,
        rgba(2,  6,  22, 0.96) 0%,
        rgba(3,  9,  32, 0.94) 25%,
        rgba(5, 14,  48, 0.90) 55%,
        rgba(7, 20,  65, 0.86) 80%,
        rgba(9, 26,  80, 0.82) 100%
      );
    /* Asymmetric crystal border: bright top-left, subtle rest */
    border-top:    1px solid rgba(100, 180, 255, 0.32);
    border-left:   1px solid rgba(70,  150, 255, 0.20);
    border-right:  1px solid rgba(10,   40, 140, 0.10);
    border-bottom: 1px solid rgba(4,    12,  50, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(32px) saturate(1.4);
    -webkit-backdrop-filter: blur(32px) saturate(1.4);
    box-shadow:
      /* bright top crystal highlight */
      inset 0 1px 0 rgba(140, 200, 255, 0.22),
      /* left edge crystal reflection */
      inset 1px 0 0 rgba(100, 170, 255, 0.10),
      /* right edge subtle depth */
      inset -1px 0 0 rgba(0, 0, 0, 0.12),
      /* bottom depth */
      inset 0 -1px 0 rgba(0, 0, 0, 0.30),
      /* soft ambient glow */
      0 0 24px rgba(6, 30, 120, 0.18),
      0 8px 28px rgba(0, 0, 0, 0.45),
      0 2px 8px rgba(0, 0, 0, 0.28);
    overflow: hidden;
  }

  /* Top-left corner white sparkle on glass card */
  .ip-hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 32px; height: 32px;
    background: radial-gradient(circle at 0% 0%,
      rgba(255,255,255,0.12) 0%,
      transparent 70%);
    border-radius: 16px 0 0 0;
    pointer-events: none;
    z-index: 8;
  }

  /* Glossy top sheen: soft reflection across upper portion */
  .ip-hero-sheen {
    height: 42%;
    background: linear-gradient(
      158deg,
      rgba(255,255,255,0.10) 0%,
      rgba(120, 190, 255, 0.04) 40%,
      rgba(255,255,255,0.00) 100%
    );
    border-radius: 15px 15px 60% 60% / 15px 15px 20px 20px;
  }

  /* ── STEP badge: +40% taller (81px → 113px), same width ── */
  .step-badge {
    min-height: 176px;
    width: 28px;
    border-radius: 12px;
  }

  /* Richer premium gradients per palette index — override inline bg via filter */
  .step-badge {
    -webkit-filter:
      drop-shadow(0 0 8px rgba(0,0,0,0.35))
      saturate(1.35)
      brightness(1.08);
            filter:
      drop-shadow(0 0 8px rgba(0,0,0,0.35))
      saturate(1.35)
      brightness(1.08);
  }

  /* Taller sheen to match new height */
  .step-badge-sheen {
    height: 48%;
    border-radius: 11px 11px 50% 50% / 11px 11px 18px 18px;
    background: linear-gradient(
      170deg,
      rgba(255,255,255,0.50) 0%,
      rgba(255,255,255,0.18) 38%,
      rgba(255,255,255,0.06) 65%,
      rgba(255,255,255,0.00) 100%
    );
  }

  /* Side-edge crystal lighting */
  .step-badge-inner-glow {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.00) 22%,
        rgba(255,255,255,0.00) 78%,
        rgba(255,255,255,0.12) 100%
      ),
      linear-gradient(180deg,
        rgba(255,255,255,0.16) 0%,
        transparent 50%
      );
  }

  /* STEP label: slightly larger for taller badge */
  .step-badge-label {
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    margin-bottom: 3px;
  }

  /* Number: larger for taller badge */
  .step-badge-num {
    font-size: 1.32rem;
    text-shadow:
      0 0 16px rgba(255,255,255,0.70),
      0 0 7px  rgba(255,255,255,0.40),
      0 1px 5px rgba(0,0,0,0.50);
  }

  /* Soft outer glow ring below number */
  .step-badge::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 18px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    pointer-events: none;
    z-index: 1;
  }

  /* ── Subtitle ── */
  .pc-subtitle {
    font-size: 0.59rem;
    color: rgba(148,200,255,0.75);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.28;
    margin: 0 0 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Description: 3-line clamp, better line-height ── */
  .pc-desc {
    -webkit-line-clamp: 3;
    line-height: 1.55;
    font-size: 0.66rem;
    color: rgba(185,215,250,0.62);
  }

  /* ── Contact button: premium crystal dark-navy → royal-blue ── */
  .pc-btn-primary {
    background: linear-gradient(
      138deg,
      #020c2e 0%,
      #041540 18%,
      #071e5a 35%,
      #0d2e88 55%,
      #1245b8 72%,
      #1a5cd4 88%,
      #1e6ee0 100%
    );
    color: #fff;
    /* Crystal border: thin cyan stroke + inner highlight */
    border: 1.5px solid rgba(80, 160, 255, 0.50);
    border-top-color: rgba(140, 210, 255, 0.65);
    border-left-color: rgba(100, 185, 255, 0.55);
    /* Outer glow + inner crystal highlights */
    box-shadow:
      0 0 12px rgba(30, 100, 255, 0.50),
      0 0 0 1px rgba(60, 140, 255, 0.18),
      0 3px 10px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(180, 220, 255, 0.28),
      inset 1px 0 0 rgba(140, 200, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    -webkit-animation: ip-btn-glow-pulse 4s ease-in-out infinite;
            animation: ip-btn-glow-pulse 4s ease-in-out infinite;
    will-change: box-shadow;
    position: relative;
    overflow: hidden;
  }
  /* Gloss sheen on contact button */
  .pc-btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.22) 0%,
      rgba(180,220,255,0.08) 55%,
      transparent 100%
    );
    border-radius: 8px 8px 50% 50% / 8px 8px 10px 10px;
    pointer-events: none;
    z-index: 2;
  }
  .pc-btn-primary:active {
    -webkit-transform: scale(0.90);
            transform: scale(0.90);
    box-shadow: 0 0 20px rgba(30,100,255,0.70), 0 2px 6px rgba(0,0,0,0.45);
    transition-duration: 0.10s;
  }

  /* ── Social buttons: crystal border upgrade ── */
  .psoc {
    border: 1.5px solid rgba(255,255,255,0.22);
    border-top-color: rgba(255,255,255,0.38);
    border-left-color: rgba(255,255,255,0.30);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.06),
      0 2px 6px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -1px 0 rgba(0,0,0,0.16);
  }

  /* ── Nav buttons: crystal border upgrade ── */
  .ip-nav-btn {
    border: 1.5px solid rgba(100, 180, 255, 0.42);
    border-top-color: rgba(160, 220, 255, 0.58);
    border-left-color: rgba(120, 195, 255, 0.48);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.32),
      inset 0 -1px 0 rgba(0,0,0,0.20),
      0 0 16px rgba(30, 144, 255, 0.40),
      0 0 0 1px rgba(40, 120, 255, 0.14),
      0 3px 8px rgba(0,0,0,0.30);
  }

  /* ── Social buttons: richer brand colors ── */

  /* WhatsApp — deep green + crystal border */
  .psoc-wa {
    background: linear-gradient(145deg, #075e54 0%, #128c7e 55%, #25d366 100%);
    color: #ffffff;
    border: 1.5px solid rgba(37,211,102,0.55);
    border-top-color: rgba(100,240,160,0.70);
    border-left-color: rgba(60,220,130,0.60);
    box-shadow:
      0 0 10px rgba(37,211,102,0.50),
      0 0 0 1px rgba(37,211,102,0.12),
      0 2px 6px rgba(0,0,0,0.38),
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.20);
  }
  .psoc-wa:hover {
    box-shadow: 0 0 18px rgba(37,211,102,0.72), 0 3px 8px rgba(0,0,0,0.42);
    -webkit-filter: brightness(1.12);
            filter: brightness(1.12);
  }

  /* Instagram — deep purple-pink + crystal border */
  .psoc-ig {
    background: linear-gradient(145deg, #833ab4 0%, #c13584 45%, #e1306c 75%, #fd1d1d 100%);
    color: #ffffff;
    border: 1.5px solid rgba(225,48,108,0.55);
    border-top-color: rgba(255,120,180,0.70);
    border-left-color: rgba(240,80,150,0.60);
    box-shadow:
      0 0 10px rgba(225,48,108,0.50),
      0 0 0 1px rgba(225,48,108,0.12),
      0 2px 6px rgba(0,0,0,0.38),
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.20);
  }
  .psoc-ig:hover {
    box-shadow: 0 0 18px rgba(225,48,108,0.72), 0 3px 8px rgba(0,0,0,0.42);
    -webkit-filter: brightness(1.12);
            filter: brightness(1.12);
  }

  /* YouTube — deep red + crystal border */
  .psoc-yt {
    background: linear-gradient(145deg, #8b0000 0%, #c00000 45%, #ff0000 100%);
    color: #ffffff;
    border: 1.5px solid rgba(255,0,0,0.55);
    border-top-color: rgba(255,100,100,0.70);
    border-left-color: rgba(255,60,60,0.60);
    box-shadow:
      0 0 10px rgba(255,0,0,0.50),
      0 0 0 1px rgba(255,0,0,0.12),
      0 2px 6px rgba(0,0,0,0.38),
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.20);
  }
  .psoc-yt:hover {
    box-shadow: 0 0 18px rgba(255,0,0,0.72), 0 3px 8px rgba(0,0,0,0.42);
    -webkit-filter: brightness(1.12);
            filter: brightness(1.12);
  }

  /* Facebook — deep royal blue + crystal border */
  .psoc-fb {
    background: linear-gradient(145deg, #0d3b8e 0%, #1565c0 45%, #1877f2 100%);
    color: #ffffff;
    border: 1.5px solid rgba(24,119,242,0.55);
    border-top-color: rgba(100,180,255,0.70);
    border-left-color: rgba(60,155,255,0.60);
    box-shadow:
      0 0 10px rgba(24,119,242,0.50),
      0 0 0 1px rgba(24,119,242,0.12),
      0 2px 6px rgba(0,0,0,0.38),
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -1px 0 rgba(0,0,0,0.20);
  }
  .psoc-fb:hover {
    box-shadow: 0 0 18px rgba(24,119,242,0.72), 0 3px 8px rgba(0,0,0,0.42);
    -webkit-filter: brightness(1.12);
            filter: brightness(1.12);
  }

  /* Shared active tap for all social buttons */
  .psoc:active {
    -webkit-transform: scale(0.82);
            transform: scale(0.82);
    -webkit-filter: brightness(0.88);
            filter: brightness(0.88);
  }

  /* Gloss overlay: brighter on mobile for crystal effect */
  .psoc-gloss {
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.36) 0%,
      rgba(255,255,255,0.08) 55%,
      rgba(255,255,255,0.00) 100%
    );
  }

  /* ── Hero card: animated shimmer sweep ── */
  .ip-hero-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 38%;
    height: 100%;
    background: linear-gradient(
      108deg,
      transparent 0%,
      rgba(255,255,255,0.00) 38%,
      rgba(200,235,255,0.08) 50%,
      rgba(255,255,255,0.00) 62%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 10;
    -webkit-animation: ip-light-sweep 11s ease-in-out infinite;
            animation: ip-light-sweep 11s ease-in-out infinite;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
    will-change: transform, opacity;
  }

  /* ── Accessibility: respect reduced-motion ── */
  @media (prefers-reduced-motion: reduce) {
    .ip-root::before,
    .ip-root::after,
    .pc::after,
    .ip-hero-card::after,
    .pc-btn-primary {
      -webkit-animation: none !important;
              animation: none !important;
    }
  }

}

/* Social button — crystal glass rounded square */
.psoc {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  transition: box-shadow 0.18s ease, -webkit-transform 0.18s ease;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  transition: transform 0.18s ease, box-shadow 0.18s ease, -webkit-transform 0.18s ease;
}
.psoc:active { -webkit-transform: scale(0.84); transform: scale(0.84); }

/* Gloss overlay on social btn */
.psoc-gloss {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
  border-radius: 8px 8px 50% 50% / 8px 8px 12px 12px;
  pointer-events: none;
}

.psoc-wa {
  background: rgba(37,211,102,0.18);
  color: #4ade80;
  box-shadow: 0 0 10px rgba(37,211,102,0.35), inset 0 0 6px rgba(37,211,102,0.15);
}
.psoc-wa:hover { box-shadow: 0 0 18px rgba(37,211,102,0.60); }

.psoc-ig {
  background: rgba(225,48,108,0.18);
  color: #f472b6;
  box-shadow: 0 0 10px rgba(225,48,108,0.35), inset 0 0 6px rgba(225,48,108,0.15);
}
.psoc-ig:hover { box-shadow: 0 0 18px rgba(225,48,108,0.60); }

.psoc-yt {
  background: rgba(255,0,0,0.16);
  color: #f87171;
  box-shadow: 0 0 10px rgba(255,0,0,0.30), inset 0 0 6px rgba(255,0,0,0.12);
}
.psoc-yt:hover { box-shadow: 0 0 18px rgba(255,0,0,0.55); }

.psoc-fb {
  background: rgba(24,119,242,0.18);
  color: #60a5fa;
  box-shadow: 0 0 10px rgba(24,119,242,0.35), inset 0 0 6px rgba(24,119,242,0.15);
}
.psoc-fb:hover { box-shadow: 0 0 18px rgba(24,119,242,0.60); }

/* ════════ STEP badge — vertical crystal pill ════════ */
.step-badge {
  position: relative;
  width: 28px;
  min-height: 84px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  /* Outer glow uses inline palette color via box-shadow — enhanced below */
  -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,0.30));
          filter: drop-shadow(0 0 6px rgba(0,0,0,0.30));
}

/* Crystal top sheen — softer, more elegant */
.step-badge-sheen {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(
    170deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.12) 40%,
    rgba(255,255,255,0.00) 100%
  );
  border-radius: 9px 9px 50% 50% / 9px 9px 14px 14px;
  pointer-events: none;
  z-index: 2;
}

/* Inner glow ring — illuminated button effect */
.step-badge-inner-glow {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  pointer-events: none;
  z-index: 1;
  /* Subtle inner highlight on top-left */
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.14) 0%,
    transparent 55%
  );
}

.step-badge-label {
  position: relative;
  z-index: 3;
  color: rgba(255,255,255,0.88);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.50);
}
.step-badge-num {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 1.10rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 10px rgba(255,255,255,0.55), 0 1px 4px rgba(0,0,0,0.45);
}

/* ══════════════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════════════ */
.ip-empty {
  text-align: center;
  color: rgba(200,225,255,0.35);
  font-size: 0.84rem;
  margin-top: 56px;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════
   LOADER
══════════════════════════════════════════════════════════════════════ */
.ip-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
  gap: 14px;
}
.ip-loader {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(30,144,255,0.15);
  border-top-color: #1e90ff;
  box-shadow: 0 0 16px rgba(30,144,255,0.40);
  -webkit-animation: ip-spin 0.85s linear infinite;
          animation: ip-spin 0.85s linear infinite;
}
@-webkit-keyframes ip-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes ip-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

.ip-loader-text {
  color: rgba(200,225,255,0.55);
  font-size: 0.80rem;
  font-weight: 500;
}
.ip-loader-text-dark {
  color: #666;
  font-size: 0.80rem;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT  —  min-width: 1024px
   Mobile styles are completely untouched above.
   All overrides below apply ONLY on desktop.
══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Page wrapper ── */
  .ip-page {
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 60px;
  }

  /* ── Hero: compact, full-width panel ── */
  .ip-hero {
    margin: 24px 24px 20px;
    padding: 16px 20px 14px;
    border-radius: 24px;
  }

  .ip-hero-card {
    padding: 16px 20px 14px;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  /* Left side: brand + subtitle stacked */
  .ip-hero-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 0;
    flex-shrink: 0;
    width: 280px;
  }

  .ip-hero-titles {
    flex: initial;
    width: 100%;
  }

  .ip-hero-brand {
    align-items: center;
    gap: 10px;
  }

  .ip-hero-title {
    font-size: 1.55rem;
  }

  .ip-hero-sub {
    font-size: 0.72rem;
    margin: 6px 0 0;
    line-height: 1.5;
    max-width: 260px;
  }

  /* Nav buttons stay top-right — reposition inside flex row */
  .ip-hero-nav-btns {
    position: absolute;
    top: 14px;
    right: 20px;
    gap: 6px;
  }

  /* Stats: single horizontal row, fills remaining space */
  .ip-stats-grid {
    flex: 1 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    gap: 10px;
  }

  .psc {
    padding: 12px 10px 10px;
    border-radius: 14px;
    gap: 4px;
  }

  .psc-value {
    font-size: 1.35rem;
  }

  .psc-label {
    font-size: 0.58rem;
  }

  /* Tagline strip */
  .ip-tagline {
    margin: 10px 0 0;
    padding: 6px 16px;
    font-size: 0.70rem;
  }

  /* ── Section header ── */
  .ip-section-head {
    padding: 0 24px;
    margin-bottom: 16px;
  }

  /* ── Cards: responsive grid ── */
  .ip-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
    padding: 0 24px;
    align-items: start;
  }

  /* ── Desktop card: horizontal row layout (photo left, info right) ── */
  .pc {
    flex-direction: row;
    align-items: stretch;
    min-height: 120px;
    max-width: none;
    width: 100%;
    border-radius: 20px;
  }

  /* Photo: left-aligned, fixed width */
  .pc-photo-wrap {
    width: 156px;
    padding: 10px 0 10px 10px;
    justify-content: flex-start;
    flex-shrink: 0;
  }

  .pc-photo-bloom {
    width: 150px;
    height: 120px;
  }

  .pc-photo-frame {
    width: 137px;
    height: 110px;
    border-radius: 18px;
  }

  .pc-verified {
    bottom: 10px;
    left: 10px;
  }

  /* Info: fills remaining width */
  .pc-info {
    padding: 11px 8px 11px 10px;
    justify-content: center;
    gap: 3px;
  }

  .pc-name {
    font-size: 0.96rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pc-desc {
    -webkit-line-clamp: 2;
    font-size: 0.68rem;
  }

  .pc-bottom-row {
    margin-top: 6px;
    gap: 6px;
  }

  .pc-inline-socials .psoc {
    width: 26px;
    height: 26px;
  }

  /* Right column: STEP badge — vertical, right side */
  .pc-right {
    width: 42px;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0;
    border-left: 1px solid rgba(255,255,255,0.07);
    border-top: none;
    background: rgba(0,0,0,0.14);
  }

  .step-badge {
    width: 28px;
    min-height: 84px;
    flex-direction: column;
    border-radius: 10px;
    gap: 1px;
    padding: 0;
  }

  .step-badge-sheen {
    height: 50%;
    border-radius: 9px 9px 50% 50% / 9px 9px 12px 12px;
  }

  .step-badge-label {
    font-size: 0.48rem;
    letter-spacing: 0.14em;
  }

  .step-badge-num {
    font-size: 1.10rem;
  }
}

/* ── Medium desktop: 2 columns ── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ip-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Large desktop: 3 columns ── */
@media (min-width: 1280px) and (max-width: 1599px) {
  .ip-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Extra-large desktop: 4 columns ── */
@media (min-width: 1600px) {
  .ip-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Tablet: 2 columns ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .ip-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    gap: 16px;
    padding: 0 16px;
  }

  .pc {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    min-height: initial;
    max-width: 100%;
  }

  .pc-photo-wrap {
    width: 100%;
    padding: 12px 12px 0;
    justify-content: center;
  }

  .pc-photo-frame {
    width: 100px;
    height: 100px;
  }

  .pc-photo-bloom {
    width: 110px;
    height: 110px;
  }

  .pc-info {
    padding: 10px 12px 10px;
  }

  .pc-right {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0 12px 10px;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.10);
  }

  .step-badge {
    width: 52px;
    min-height: 32px;
    flex-direction: row;
    border-radius: 10px;
    gap: 4px;
    padding: 0 8px;
  }

  .step-badge-label { font-size: 0.44rem; }
  .step-badge-num   { font-size: 0.90rem; }

  .ip-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION HERO  —  premium multi-blue crystal glass
══════════════════════════════════════════════════════════════════════ */
.rec-hero {
  position: relative;
  margin: 0 10px 14px;
  border-radius: 22px;
  overflow: hidden;
  padding: 12px 12px 10px;

  /* Deep navy → royal blue → electric blue sweep */
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%,   rgba(56,189,248,0.18)  0%, transparent 55%),
    radial-gradient(ellipse 65% 85% at 100% 55%,  rgba(25,94,217,0.38)   0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 95% 5%,    rgba(50,140,255,0.24)  0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 0%  100%,  rgba(4,12,60,0.80)     0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 10% 10%,   rgba(14,60,160,0.45)   0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 50%,   rgba(8,32,90,0.42)     0%, transparent 70%),
    linear-gradient(122deg,
      #040e24 0%,
      #071840 18%,
      #0a2560 34%,
      #0d3278 50%,
      #1245a8 66%,
      #1655c8 80%,
      #1a62dc 100%
    );

  /* Multi-layer crystal border glow */
  box-shadow:
    0 0 0 1px rgba(120,200,255,0.22),
    0 0 0 2px rgba(30,100,220,0.10),
    0 24px 56px rgba(1,5,20,0.75),
    0 8px 22px rgba(0,0,0,0.45),
    0 0 50px rgba(20,80,220,0.18),
    0 0 90px rgba(10,50,180,0.10),
    inset 0 1px 0 rgba(200,235,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    inset 1px 0 0 rgba(160,210,255,0.08);
}

/* Crystal mesh overlay on hero */
.rec-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    132deg,
    transparent 0%,
    rgba(255,255,255,0.022) 30%,
    transparent 32%,
    transparent 58%,
    rgba(255,255,255,0.014) 60%,
    transparent 62%
  );
  border-radius: 22px;
}

/* Hero glass card — deeper layered glass */
.rec-hero .ip-hero-card {
  background:
    radial-gradient(ellipse 90% 55% at 100% 0%,   rgba(56,189,248,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 0%  100%,  rgba(4,14,50,0.45)    0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%,   rgba(10,40,120,0.18)  0%, transparent 70%),
    linear-gradient(
      122deg,
      rgba(8,  22,  70, 0.78) 0%,
      rgba(12, 38, 108, 0.65) 35%,
      rgba(18, 58, 148, 0.52) 65%,
      rgba(24, 78, 185, 0.40) 100%
    );
  border-top:    1px solid rgba(180,228,255,0.36);
  border-left:   1px solid rgba(130,195,255,0.22);
  border-right:  1px solid rgba(30, 100,200,0.10);
  border-bottom: 1px solid rgba(12,  60,160,0.08);
  border-radius: 18px;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.20),
    inset 1px 0  0 rgba(200,230,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 0 32px rgba(20,90,220,0.20),
    0 10px 28px rgba(0,0,0,0.32),
    0 2px 8px rgba(0,0,0,0.18);
}

/* Hero title — white with stronger letter-spacing */
.rec-hero .ip-hero-title {
  font-size: 1.50rem;
  letter-spacing: -0.035em;
  text-shadow: 0 0 24px rgba(56,189,248,0.30), 0 2px 8px rgba(0,0,0,0.50);
}

/* Neon title span — cyan → violet → cyan sweep */
.rec-hero .ip-hero-title-neon {
  background: linear-gradient(90deg, #7dd3fc 0%, #38bdf8 30%, #818cf8 65%, #7dd3fc 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-animation: ip-neon-shift 4.5s linear infinite;
          animation: ip-neon-shift 4.5s linear infinite;
  -webkit-filter: drop-shadow(0 0 10px rgba(56,189,248,0.65));
          filter: drop-shadow(0 0 10px rgba(56,189,248,0.65));
}

/* Subtitle — slightly brighter */
.rec-hero .ip-hero-sub {
  color: rgba(190,220,255,0.62);
  font-size: 0.69rem;
  line-height: 1.52;
  margin: 0 0 10px;
}

/* Shield emblem */
.rec-shield-wrap {
  position: relative;
  width: 76px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rec-shield-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(56,189,248,0.60) 0%,
      rgba(30,100,220,0.28) 45%,
      transparent 72%);
  -webkit-filter: blur(16px);
          filter: blur(16px);
  pointer-events: none;
  -webkit-animation: ip-orb-pulse-a 5s ease-in-out infinite;
          animation: ip-orb-pulse-a 5s ease-in-out infinite;
}
.rec-shield-svg {
  width: 72px;
  height: 82px;
  position: relative;
  z-index: 1;
  -webkit-filter:
    drop-shadow(0 0 14px rgba(30,144,255,0.80))
    drop-shadow(0 0 6px  rgba(79,195,247,0.60))
    drop-shadow(0 4px 12px rgba(0,0,0,0.55));
          filter:
    drop-shadow(0 0 14px rgba(30,144,255,0.80))
    drop-shadow(0 0 6px  rgba(79,195,247,0.60))
    drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}

/* Stats row — 5 crystal cards, horizontal scroll on very small screens */
.rec-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  gap: 5px;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rec-stats-row::-webkit-scrollbar { display: none; }

/* Each stat card — deeper crystal glass with unique edge glow */
.rec-stats-row .psc {
  min-width: 56px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(255,255,255,0.10) 0%, transparent 65%),
    linear-gradient(
      160deg,
      rgba(255,255,255,0.09) 0%,
      rgba(20, 70, 180,0.08) 55%,
      rgba(4,  14,  50,0.06) 100%
    );
  border-top:    1px solid rgba(200,235,255,0.30);
  border-left:   1px solid rgba(150,205,255,0.18);
  border-right:  1px solid rgba(20, 70, 180,0.08);
  border-bottom: 1px solid rgba(8,  30, 100,0.06);
  border-radius: 13px;
  padding: 8px 5px 7px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 1px 0  0 rgba(200,230,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.24),
    0 0 18px rgba(30,144,255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 1px 0  0 rgba(200,230,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.24),
    0 0 18px rgba(var(--glow-rgb, 30,144,255), 0.12);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}

/* White crystal sheen on top of each stat card */
.rec-stats-row .psc::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44%;
  background: linear-gradient(
    165deg,
    rgba(255,255,255,0.14) 0%,
    rgba(200,230,255,0.05) 45%,
    transparent 100%
  );
  border-radius: 12px 12px 60% 60% / 12px 12px 18px 18px;
  pointer-events: none;
}

.rec-stats-row .psc-value {
  font-size: 1.14rem;
  text-shadow: 0 0 14px rgba(255,255,255,0.35), 0 1px 4px rgba(0,0,0,0.50);
}
.rec-stats-row .psc-label {
  font-size: 0.50rem;
  letter-spacing: 0.05em;
  color: rgba(190,220,255,0.58);
}
.rec-stats-row .psc-icon {
  -webkit-filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 2px currentColor);
          filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 2px currentColor);
}

/* Tagline — slightly brighter on recognition page */
.rec-hero .ip-tagline {
  background: linear-gradient(
    118deg,
    rgba(8,22,72,0.60) 0%,
    rgba(14,44,120,0.50) 50%,
    rgba(20,64,158,0.42) 100%
  );
  border-top:    1px solid rgba(120,195,255,0.32);
  border-left:   1px solid rgba(90, 170,255,0.20);
  border-right:  1px solid rgba(30, 100,200,0.14);
  border-bottom: 1px solid rgba(20,  80,180,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 18px rgba(20,100,220,0.16);
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION — FINAL POLISH  (CSS-only, no JSX changes)
   95% deep navy · 4% royal blue · 1% cyan/white reflections
══════════════════════════════════════════════════════════════════════ */

/* ── Page root: even darker navy base ── */
.ip-root {
  background:
    radial-gradient(ellipse 70% 45% at 0% 0%,   rgba(4,12,50,0.95)  0%, transparent 65%),
    radial-gradient(ellipse 85% 40% at 50% 0%,  rgba(8,28,90,0.60)  0%, transparent 62%),
    radial-gradient(ellipse 55% 70% at 100% 30%, rgba(12,45,130,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 95% 95%,  rgba(0,60,120,0.18) 0%, transparent 58%),
    radial-gradient(ellipse 45% 35% at 5% 90%,   rgba(2,6,28,0.70)   0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 55% 55%,  rgba(5,18,60,0.35)  0%, transparent 70%),
    linear-gradient(118deg,
      #010510 0%,
      #020a1e 15%,
      #030e2a 28%,
      #050f30 40%,
      #071a45 55%,
      #081f57 70%,
      #0a2468 84%,
      #0c2a78 100%
    );
}

/* ── Hero outer shell: deeper, richer ── */
.rec-hero {
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%,   rgba(20,70,180,0.22)  0%, transparent 55%),
    radial-gradient(ellipse 55% 80% at 100% 60%,  rgba(10,40,130,0.30)  0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 0%  100%,  rgba(2,6,24,0.85)     0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 10% 10%,   rgba(6,20,70,0.55)    0%, transparent 65%),
    radial-gradient(ellipse 65% 55% at 50% 50%,   rgba(4,14,50,0.50)    0%, transparent 70%),
    linear-gradient(125deg,
      #010510 0%,
      #030c28 20%,
      #050f35 38%,
      #071845 55%,
      #091e58 70%,
      #0c2570 85%,
      #0e2c82 100%
    );
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.12),
    0 0 0 2px rgba(10,50,160,0.08),
    0 28px 60px rgba(0,2,10,0.85),
    0 8px 24px rgba(0,0,0,0.55),
    0 0 60px rgba(8,40,160,0.12),
    inset 0 1px 0 rgba(180,225,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    inset 1px 0 0 rgba(100,180,255,0.06);
}

/* ── Hero glass card: darker, deeper glass ── */
.rec-hero .ip-hero-card {
  background:
    radial-gradient(ellipse 80% 45% at 100% 0%,  rgba(30,100,220,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 0%  100%, rgba(2,6,22,0.55)     0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 50%,  rgba(4,14,48,0.25)    0%, transparent 70%),
    linear-gradient(125deg,
      rgba(3,  8,  28, 0.90) 0%,
      rgba(5, 14,  48, 0.82) 30%,
      rgba(8, 24,  78, 0.72) 60%,
      rgba(12, 36, 108, 0.60) 100%
    );
  border-top:    1px solid rgba(140,210,255,0.28);
  border-left:   1px solid rgba(90, 175,255,0.16);
  border-right:  1px solid rgba(10,  50,160,0.08);
  border-bottom: 1px solid rgba(4,   18, 70,0.06);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.16),
    inset 1px 0  0 rgba(160,215,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 0 28px rgba(8,40,160,0.14),
    0 12px 32px rgba(0,0,0,0.40),
    0 2px 8px rgba(0,0,0,0.22);
}

/* ── Hero sheen: tighter, more subtle ── */
.rec-hero .ip-hero-sheen {
  height: 40%;
  background: linear-gradient(
    158deg,
    rgba(255,255,255,0.08) 0%,
    rgba(140,205,255,0.03) 40%,
    transparent 100%
  );
}

/* ── Hero title ── */
.rec-hero .ip-hero-title {
  font-size: 1.68rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.14;
  color: #f4f9ff;
  text-shadow:
    0 0 24px rgba(56,189,248,0.20),
    0 2px 12px rgba(0,0,0,0.70);
}
.rec-hero .ip-hero-title-neon {
  background: linear-gradient(90deg, #93c5fd 0%, #38bdf8 28%, #7dd3fc 55%, #818cf8 80%, #93c5fd 100%);
  background-size: 240% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-animation: ip-neon-shift 5s linear infinite;
          animation: ip-neon-shift 5s linear infinite;
  -webkit-filter: drop-shadow(0 0 10px rgba(56,189,248,0.55));
          filter: drop-shadow(0 0 10px rgba(56,189,248,0.55));
}
.rec-hero .ip-hero-sub {
  color: rgba(195,222,255,0.68);
  font-size: 0.74rem;
  line-height: 1.58;
  margin: 0 0 12px;
}

/* ── Shield: stronger glow ── */
.rec-shield-wrap { width: 100px; height: 90px; }
.rec-shield-svg {
  width: 100px; height: 90px;
  -webkit-filter:
    drop-shadow(0 0 20px rgba(20,120,255,0.95))
    drop-shadow(0 0 10px rgba(56,189,248,0.75))
    drop-shadow(0 8px 20px rgba(0,0,0,0.70));
          filter:
    drop-shadow(0 0 20px rgba(20,120,255,0.95))
    drop-shadow(0 0 10px rgba(56,189,248,0.75))
    drop-shadow(0 8px 20px rgba(0,0,0,0.70));
}
.rec-shield-glow {
  inset: -20px;
  background: radial-gradient(circle,
    rgba(56,189,248,0.55) 0%,
    rgba(14,70,200,0.22) 45%,
    transparent 72%);
  -webkit-filter: blur(22px);
          filter: blur(22px);
}

/* ── Tagline: darker ── */
.rec-hero .ip-tagline {
  background: linear-gradient(118deg,
    rgba(2,6,22,0.80) 0%,
    rgba(5,14,50,0.72) 50%,
    rgba(8,22,72,0.65) 100%);
  border-top:    1px solid rgba(80,160,255,0.22);
  border-left:   1px solid rgba(60,140,255,0.14);
  border-right:  1px solid rgba(10,50,160,0.08);
  border-bottom: 1px solid rgba(4,18,70,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 16px rgba(6,30,130,0.12);
}

/* ── Stats row: darker crystal cards ── */
.rec-stats-row .psc {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,
      rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%,
      rgba(2,6,22,0.60) 0%, transparent 65%),
    linear-gradient(165deg,
      rgba(3,8,28,0.92)  0%,
      rgba(5,14,48,0.86) 40%,
      rgba(8,24,78,0.78) 75%,
      rgba(10,32,96,0.70) 100%
    );
  border-top:    1px solid rgba(160,215,255,0.26);
  border-left:   1px solid rgba(110,185,255,0.15);
  border-right:  1px solid rgba(8,  40,140,0.07);
  border-bottom: 1px solid rgba(3,  12, 50,0.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 1px 0  0 rgba(180,220,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 6px 20px rgba(0,0,0,0.40),
    0 0 16px rgba(6,30,130,0.10);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
}
.rec-stats-row .psc::after {
  background: linear-gradient(162deg,
    rgba(255,255,255,0.12) 0%,
    rgba(160,210,255,0.04) 42%,
    transparent 100%);
}
.rec-stats-row .psc-value {
  font-size: 1.16rem;
  color: #f0f8ff;
  text-shadow: 0 0 16px rgba(255,255,255,0.30), 0 1px 5px rgba(0,0,0,0.60);
}
.rec-stats-row .psc-label {
  color: rgba(170,210,255,0.55);
  font-size: 0.49rem;
}
.rec-stats-row .psc-icon {
  -webkit-filter: drop-shadow(0 0 7px currentColor) drop-shadow(0 0 3px currentColor);
          filter: drop-shadow(0 0 7px currentColor) drop-shadow(0 0 3px currentColor);
}
.rec-stats-row .psc-glow-ring {
  opacity: 0.22;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

/* ── Section header: darker ── */
.ip-page .ip-section-head {
  background: linear-gradient(118deg,
    rgba(2,6,20,0.94) 0%,
    rgba(4,12,40,0.88) 50%,
    rgba(6,18,60,0.82) 100%);
  border-top:    1px solid rgba(80,160,255,0.22);
  border-left:   1px solid rgba(55,135,255,0.13);
  border-right:  1px solid rgba(8, 40,160,0.07);
  border-bottom: 1px solid rgba(3, 12, 50,0.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 20px rgba(0,0,0,0.40),
    0 0 20px rgba(6,30,130,0.08);
}
.ip-page .ip-section-label {
  color: rgba(100,195,252,0.68);
  text-shadow: 0 0 8px rgba(56,189,248,0.30);
}

/* ── Item cards: darker navy, stronger depth ── */
.rec-item-card {
  background:
    radial-gradient(ellipse 100% 38% at 50% 0%,
      rgba(255,255,255,0.06) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 100% 100%,
      rgba(1,4,16,0.75) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 0% 100%,
      rgba(2,6,22,0.70) 0%, transparent 60%),
    linear-gradient(168deg,
      #020818 0%,
      #040e28 22%,
      #071a45 48%,
      #081f57 72%,
      #0a2568 100%
    );
  border-top:    1.5px solid rgba(140,205,255,0.26);
  border-left:   1.5px solid rgba(90, 175,255,0.15);
  border-right:  1px   solid rgba(8,  35,130,0.08);
  border-bottom: 1px   solid rgba(3,  10, 45,0.06);
  box-shadow:
    inset 0  1.5px 0 rgba(255,255,255,0.14),
    inset 1.5px 0  0 rgba(160,215,255,0.07),
    inset -1px 0  0 rgba(0,0,0,0.12),
    inset 0  -1px 0 rgba(0,0,0,0.26),
    0 12px 40px rgba(0,0,0,0.60),
    0 4px 14px rgba(0,0,0,0.40),
    0 0 30px rgba(6,30,160,0.12),
    0 0 65px rgba(3,15,80,0.07);
}
.rec-item-card::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(56,189,248,0.40) 30%,
    rgba(125,211,252,0.55) 50%,
    rgba(56,189,248,0.40) 70%,
    transparent);
}
.rec-item-photo-wrap {
  background: linear-gradient(168deg, #010510 0%, #040e28 50%, #071a45 100%);
}
.rec-item-photo-placeholder {
  background: linear-gradient(168deg, #010510 0%, #040e28 50%, #071a45 100%);
}
.rec-item-photo-ring {
  box-shadow:
    inset 0  2px 0 rgba(255,255,255,0.18),
    inset 2px 0  0 rgba(180,220,255,0.09),
    inset -1px 0  0 rgba(0,0,0,0.14),
    inset 0 -1px  0 rgba(0,0,0,0.20);
  background: linear-gradient(155deg,
    rgba(255,255,255,0.08) 0%,
    rgba(140,200,255,0.03) 30%,
    transparent 50%);
}
.rec-item-body {
  border-top: 1px solid rgba(56,140,255,0.10);
  background: linear-gradient(180deg, rgba(4,12,40,0.40) 0%, transparent 100%);
}
.rec-item-name {
  color: #f0f8ff;
  text-shadow: 0 0 10px rgba(56,189,248,0.16), 0 1px 6px rgba(0,0,0,0.65);
}
.rec-item-desc  { color: rgba(175,212,255,0.62); }
.rec-item-phone { color: #7dd3fc; text-shadow: 0 0 7px rgba(56,189,248,0.28); }

/* ── Recognition badges: darker crystal ── */
.rec-badge-sheen {
  background: linear-gradient(168deg,
    rgba(255,255,255,0.40) 0%,
    rgba(255,255,255,0.10) 42%,
    transparent 100%);
}
.rec-badge-inner {
  background: linear-gradient(148deg, rgba(255,255,255,0.14) 0%, transparent 52%);
}
.rec-badge-num {
  text-shadow: 0 0 14px rgba(255,255,255,0.65), 0 1px 6px rgba(0,0,0,0.55);
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION BADGE — crystal shield pill, top-right of each card
══════════════════════════════════════════════════════════════════════ */
.rec-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 36px;
  min-height: 58px;
  border-radius: 10px 10px 10px 10px;
  /* shield-like bottom point via clip-path */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
          clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: visible;
  -webkit-filter: drop-shadow(0 0 8px rgba(0,0,0,0.40));
          filter: drop-shadow(0 0 8px rgba(0,0,0,0.40));
}

/* Crystal top sheen */
.rec-badge-sheen {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(
    168deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.12) 42%,
    transparent 100%
  );
  border-radius: 9px 9px 50% 50% / 9px 9px 14px 14px;
  pointer-events: none;
  z-index: 2;
}

/* Inner glow */
.rec-badge-inner {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(148deg, rgba(255,255,255,0.16) 0%, transparent 55%);
}

.rec-badge-label {
  position: relative;
  z-index: 3;
  color: rgba(255,255,255,0.92);
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.rec-badge-num {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 12px rgba(255,255,255,0.60), 0 1px 5px rgba(0,0,0,0.50);
}
.rec-badge-star {
  position: relative;
  z-index: 3;
  color: rgba(255,255,255,0.85);
  font-size: 0.60rem;
  line-height: 1;
  -webkit-filter: drop-shadow(0 0 4px rgba(255,255,255,0.55));
          filter: drop-shadow(0 0 4px rgba(255,255,255,0.55));
}

/* ══════════════════════════════════════════════════════════════════════
   SHIELD — wider SVG, brighter glow
══════════════════════════════════════════════════════════════════════ */
.rec-shield-wrap {
  width: 100px;
  height: 90px;
}
.rec-shield-svg {
  width: 100px;
  height: 90px;
  -webkit-filter:
    drop-shadow(0 0 18px rgba(30,144,255,0.90))
    drop-shadow(0 0 8px  rgba(56,189,248,0.70))
    drop-shadow(0 6px 16px rgba(0,0,0,0.60));
          filter:
    drop-shadow(0 0 18px rgba(30,144,255,0.90))
    drop-shadow(0 0 8px  rgba(56,189,248,0.70))
    drop-shadow(0 6px 16px rgba(0,0,0,0.60));
}
.rec-shield-glow {
  inset: -18px;
  background: radial-gradient(circle,
    rgba(56,189,248,0.65) 0%,
    rgba(20,90,220,0.28) 45%,
    transparent 72%);
  -webkit-filter: blur(20px);
          filter: blur(20px);
}

/* ══════════════════════════════════════════════════════════════════════
   ITEM CARD — crystal lighting refinements
══════════════════════════════════════════════════════════════════════ */
.rec-item-card {
  /* Stronger outer glow on hover */
  transition: box-shadow 0.22s ease,
              -webkit-transform 0.22s cubic-bezier(0.22,1,0.36,1);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.22s ease;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.22s ease,
              -webkit-transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.rec-item-card:hover {
  box-shadow:
    inset 0  1.5px 0 rgba(255,255,255,0.20),
    inset 1.5px 0  0 rgba(200,230,255,0.12),
    inset -1px 0  0 rgba(0,0,0,0.10),
    inset 0  -1px 0 rgba(0,0,0,0.24),
    0 14px 44px rgba(0,0,0,0.60),
    0 4px 14px rgba(0,0,0,0.38),
    0 0 36px rgba(14,60,200,0.22),
    0 0 70px rgba(6,30,130,0.12);
}

/* Cyan edge accent line at very top of card */
.rec-item-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(56,189,248,0.55) 30%,
    rgba(125,211,252,0.70) 50%,
    rgba(56,189,248,0.55) 70%,
    transparent);
  border-radius: 0 0 4px 4px;
  z-index: 5;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION — Compact layout & spacing refinements
══════════════════════════════════════════════════════════════════════ */

/* Hero outer shell: tighter padding */
.rec-hero {
  padding: 7px 8px 6px;
  margin: 0 8px 10px;
}

/* Hero glass card: less internal padding */
.rec-hero .ip-hero-card {
  padding: 8px 9px 7px;
}

/* Title row: tighter gap */
.rec-hero .ip-hero-title-row {
  margin-bottom: 3px;
  gap: 6px;
}

/* Shield: slightly smaller to save vertical space */
.rec-hero .rec-shield-wrap { width: 80px; height: 72px; }
.rec-hero .rec-shield-svg  { width: 80px; height: 72px; }

/* Nav buttons: tighter */
.rec-hero .ip-hero-nav-btns { gap: 4px; margin-top: 2px !important; }

/* Subtitle: tighter bottom margin */
.rec-hero .ip-hero-sub {
  margin-bottom: 7px !important;
}

/* Stats row: pull up closer to subtitle */
.rec-stats-row {
  margin-top: 6px;
  gap: 4px;
}

/* Stat cards: less padding */
.rec-stats-row .psc {
  padding: 6px 4px 5px;
  border-radius: 11px;
  min-width: 52px;
}
.rec-stats-row .psc-value { font-size: 1.05rem; }
.rec-stats-row .psc-label { font-size: 0.46rem; }

/* Tagline: tighter */
.rec-hero .ip-tagline {
  margin-top: 5px;
  padding: 4px 10px;
  font-size: 0.60rem;
}

/* Section header: less margin above */
.ip-page .ip-section-head {
  margin: 0 8px 10px;
  padding: 8px 12px;
}

/* Cards grid: tighter top padding */
.ip-page > .MuiBox-root {
  padding-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION — Premium CSS Micro-Animations
   GPU-friendly · mobile-safe · prefers-reduced-motion aware
══════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */

/* Slow ambient background light drift */
@-webkit-keyframes rec-bg-drift {
  0%   { opacity: 0.80; -webkit-transform: translateX(0)    translateY(0); transform: translateX(0)    translateY(0); }
  33%  { opacity: 0.90; -webkit-transform: translateX(6px)  translateY(-4px); transform: translateX(6px)  translateY(-4px); }
  66%  { opacity: 0.85; -webkit-transform: translateX(-4px) translateY(6px); transform: translateX(-4px) translateY(6px); }
  100% { opacity: 0.80; -webkit-transform: translateX(0)    translateY(0); transform: translateX(0)    translateY(0); }
}
@keyframes rec-bg-drift {
  0%   { opacity: 0.80; -webkit-transform: translateX(0)    translateY(0); transform: translateX(0)    translateY(0); }
  33%  { opacity: 0.90; -webkit-transform: translateX(6px)  translateY(-4px); transform: translateX(6px)  translateY(-4px); }
  66%  { opacity: 0.85; -webkit-transform: translateX(-4px) translateY(6px); transform: translateX(-4px) translateY(6px); }
  100% { opacity: 0.80; -webkit-transform: translateX(0)    translateY(0); transform: translateX(0)    translateY(0); }
}

/* Hero breathing glow */
@-webkit-keyframes rec-hero-breathe {
  0%,100% { opacity: 1;    -webkit-transform: scale(1);    transform: scale(1); }
  50%      { opacity: 0.72; -webkit-transform: scale(1.04); transform: scale(1.04); }
}
@keyframes rec-hero-breathe {
  0%,100% { opacity: 1;    -webkit-transform: scale(1);    transform: scale(1); }
  50%      { opacity: 0.72; -webkit-transform: scale(1.04); transform: scale(1.04); }
}

/* Crystal shimmer sweep across hero */
@-webkit-keyframes rec-shimmer {
  0%   { -webkit-transform: translateX(-120%) skewX(-18deg); transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { -webkit-transform: translateX(220%)  skewX(-18deg); transform: translateX(220%)  skewX(-18deg); opacity: 0; }
}
@keyframes rec-shimmer {
  0%   { -webkit-transform: translateX(-120%) skewX(-18deg); transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { -webkit-transform: translateX(220%)  skewX(-18deg); transform: translateX(220%)  skewX(-18deg); opacity: 0; }
}

/* Shield float */
@-webkit-keyframes rec-shield-float {
  0%,100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  50%      { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
}
@keyframes rec-shield-float {
  0%,100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  50%      { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
}

/* Shield light sweep */
@-webkit-keyframes rec-shield-sweep {
  0%   { opacity: 0; -webkit-transform: translateX(-80%) rotate(-20deg); transform: translateX(-80%) rotate(-20deg); }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { opacity: 0; -webkit-transform: translateX(180%) rotate(-20deg); transform: translateX(180%) rotate(-20deg); }
}
@keyframes rec-shield-sweep {
  0%   { opacity: 0; -webkit-transform: translateX(-80%) rotate(-20deg); transform: translateX(-80%) rotate(-20deg); }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { opacity: 0; -webkit-transform: translateX(180%) rotate(-20deg); transform: translateX(180%) rotate(-20deg); }
}

/* Stat card glass reflection */
@-webkit-keyframes rec-stat-reflect {
  0%   { -webkit-transform: translateX(-150%) skewX(-22deg); transform: translateX(-150%) skewX(-22deg); opacity: 0; }
  6%   { opacity: 0.45; }
  94%  { opacity: 0.45; }
  100% { -webkit-transform: translateX(250%)  skewX(-22deg); transform: translateX(250%)  skewX(-22deg); opacity: 0; }
}
@keyframes rec-stat-reflect {
  0%   { -webkit-transform: translateX(-150%) skewX(-22deg); transform: translateX(-150%) skewX(-22deg); opacity: 0; }
  6%   { opacity: 0.45; }
  94%  { opacity: 0.45; }
  100% { -webkit-transform: translateX(250%)  skewX(-22deg); transform: translateX(250%)  skewX(-22deg); opacity: 0; }
}

/* Item card slow float */
@-webkit-keyframes rec-card-float {
  0%,100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  50%      { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
}
@keyframes rec-card-float {
  0%,100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  50%      { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
}

/* Item card crystal reflection sweep */
@-webkit-keyframes rec-card-reflect {
  0%   { -webkit-transform: translateX(-160%) skewX(-20deg); transform: translateX(-160%) skewX(-20deg); opacity: 0; }
  5%   { opacity: 0.30; }
  95%  { opacity: 0.30; }
  100% { -webkit-transform: translateX(260%)  skewX(-20deg); transform: translateX(260%)  skewX(-20deg); opacity: 0; }
}
@keyframes rec-card-reflect {
  0%   { -webkit-transform: translateX(-160%) skewX(-20deg); transform: translateX(-160%) skewX(-20deg); opacity: 0; }
  5%   { opacity: 0.30; }
  95%  { opacity: 0.30; }
  100% { -webkit-transform: translateX(260%)  skewX(-20deg); transform: translateX(260%)  skewX(-20deg); opacity: 0; }
}

/* ── Page root: ambient light drift on ::before overlay ── */
.ip-root::before {
  -webkit-animation: rec-bg-drift 18s ease-in-out infinite;
          animation: rec-bg-drift 18s ease-in-out infinite;
  will-change: transform, opacity;
}

/* ── Hero: breathing glow on the orb-a ── */
.rec-hero .ip-orb-a {
  -webkit-animation: rec-hero-breathe 7s ease-in-out infinite;
          animation: rec-hero-breathe 7s ease-in-out infinite;
  will-change: transform, opacity;
}
.rec-hero .ip-orb-b {
  animation: rec-hero-breathe 9s ease-in-out infinite reverse;
  will-change: transform, opacity;
}

/* ── Hero: crystal shimmer pseudo-element ── */
.rec-hero .ip-hero-card {
  overflow: hidden;
}
.rec-hero .ip-hero-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.06) 40%,
    rgba(200,235,255,0.10) 50%,
    rgba(255,255,255,0.06) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  -webkit-animation: rec-shimmer 10s ease-in-out infinite;
          animation: rec-shimmer 10s ease-in-out infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  will-change: transform, opacity;
}

/* ── Shield: float + sweep ── */
.rec-shield-wrap {
  -webkit-animation: rec-shield-float 5s ease-in-out infinite;
          animation: rec-shield-float 5s ease-in-out infinite;
  will-change: transform;
}
.rec-shield-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,0.00) 30%,
    rgba(200,240,255,0.55) 50%,
    rgba(255,255,255,0.00) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
  -webkit-animation: rec-shield-sweep 9s ease-in-out infinite;
          animation: rec-shield-sweep 9s ease-in-out infinite;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  will-change: transform, opacity;
}

/* ── Stat cards: glass reflection + hover lift ── */
.rec-stats-row .psc {
  overflow: hidden;
  transition: box-shadow 0.28s ease,
              -webkit-transform 0.28s cubic-bezier(0.22,1,0.36,1);
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.28s ease;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.28s ease,
              -webkit-transform 0.28s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.rec-stats-row .psc::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(200,235,255,0.18) 50%,
    rgba(255,255,255,0.00) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 6;
  -webkit-animation: rec-stat-reflect 8s ease-in-out infinite;
          animation: rec-stat-reflect 8s ease-in-out infinite;
  will-change: transform, opacity;
}
/* stagger each card's reflection */
.rec-stats-row .psc:nth-child(1)::before { -webkit-animation-delay: 0s; animation-delay: 0s; }
.rec-stats-row .psc:nth-child(2)::before { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.rec-stats-row .psc:nth-child(3)::before { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; }
.rec-stats-row .psc:nth-child(4)::before { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; }
.rec-stats-row .psc:nth-child(5)::before { -webkit-animation-delay: 4.8s; animation-delay: 4.8s; }

.rec-stats-row .psc:hover {
  -webkit-transform: translateY(-5px) scale(1.03);
          transform: translateY(-5px) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 1px 0  0 rgba(200,230,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.26),
    0 10px 28px rgba(0,0,0,0.50),
    0 0 24px rgba(56,189,248,0.22),
    0 0 50px rgba(14,60,200,0.16);
}

/* ── Nav buttons: scale + glow ── */
.ip-nav-btn {
  transition: box-shadow 0.26s ease,
              -webkit-transform 0.26s cubic-bezier(0.22,1,0.36,1);
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.26s ease;
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.26s ease,
              -webkit-transform 0.26s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.ip-nav-btn:hover {
  -webkit-transform: scale(1.10);
          transform: scale(1.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 20px rgba(56,189,248,0.50),
    0 4px 12px rgba(0,0,0,0.35);
}
.ip-nav-btn:active {
  -webkit-transform: scale(0.88);
          transform: scale(0.88);
  transition-duration: 0.12s;
}

/* ── Recognition item cards: float + reflection ── */
.rec-item-card {
  -webkit-animation: rec-card-float 7s ease-in-out infinite;
          animation: rec-card-float 7s ease-in-out infinite;
  will-change: transform;
  overflow: hidden;
}
/* stagger float per card position */
.rec-item-card:nth-child(even) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.rec-item-card:nth-child(3n) {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}

/* Crystal reflection sweep on item cards */
.rec-item-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(180,225,255,0.12) 50%,
    rgba(255,255,255,0.00) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 6;
  -webkit-animation: rec-card-reflect 12s ease-in-out infinite;
          animation: rec-card-reflect 12s ease-in-out infinite;
  will-change: transform, opacity;
}
.rec-item-card:nth-child(even)::after  { -webkit-animation-delay: 3s; animation-delay: 3s; }
.rec-item-card:nth-child(3n)::after    { -webkit-animation-delay: 6s; animation-delay: 6s; }

.rec-item-card:hover {
  -webkit-transform: translateY(-4px) scale(1.01);
          transform: translateY(-4px) scale(1.01);
  transition: box-shadow 0.30s ease,
              -webkit-transform 0.30s cubic-bezier(0.22,1,0.36,1);
  transition: transform 0.30s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.30s ease;
  transition: transform 0.30s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.30s ease,
              -webkit-transform 0.30s cubic-bezier(0.22,1,0.36,1);
  box-shadow:
    inset 0  1.5px 0 rgba(255,255,255,0.20),
    inset 1.5px 0  0 rgba(180,220,255,0.10),
    inset -1px 0  0 rgba(0,0,0,0.14),
    inset 0  -1px 0 rgba(0,0,0,0.28),
    0 16px 48px rgba(0,0,0,0.65),
    0 4px 16px rgba(0,0,0,0.42),
    0 0 36px rgba(14,60,200,0.20),
    0 0 70px rgba(6,30,130,0.12);
}
.rec-item-card:active {
  -webkit-transform: scale(0.96);
          transform: scale(0.96);
  transition-duration: 0.12s;
}

/* ── Accessibility: respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .ip-root::before,
  .rec-hero .ip-orb-a,
  .rec-hero .ip-orb-b,
  .rec-hero .ip-hero-card::after,
  .rec-shield-wrap,
  .rec-shield-wrap::after,
  .rec-stats-row .psc::before,
  .rec-item-card,
  .rec-item-card::after {
    -webkit-animation: none !important;
            animation: none !important;
  }
  .rec-stats-row .psc:hover,
  .rec-item-card:hover,
  .ip-nav-btn:hover {
    -webkit-transform: none !important;
            transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION — Profile Card Final Polish
   Widescreen image · crystal frame · divider · premium typography
══════════════════════════════════════════════════════════════════════ */

/* ── Card shell: taller, darker navy ── */
.rec-item-card {
  background:
    radial-gradient(ellipse 100% 35% at 50% 0%,
      rgba(255,255,255,0.055) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 100%,
      rgba(1,3,14,0.80) 0%, transparent 65%),
    radial-gradient(ellipse 45% 38% at 0% 100%,
      rgba(1,4,18,0.75) 0%, transparent 60%),
    linear-gradient(170deg,
      #010610 0%,
      #030c22 18%,
      #050f30 36%,
      #071a45 56%,
      #081e54 74%,
      #0a2462 100%
    );
  border-top:    1.5px solid rgba(130,200,255,0.24);
  border-left:   1.5px solid rgba(80, 165,255,0.14);
  border-right:  1px   solid rgba(6,  28,110,0.08);
  border-bottom: 1px   solid rgba(2,   8, 38,0.06);
  border-radius: 20px;
  box-shadow:
    inset 0  1.5px 0 rgba(255,255,255,0.13),
    inset 1.5px 0  0 rgba(140,205,255,0.07),
    inset -1px 0  0 rgba(0,0,0,0.14),
    inset 0  -1px 0 rgba(0,0,0,0.28),
    0 14px 44px rgba(0,0,0,0.62),
    0 4px 16px rgba(0,0,0,0.42),
    0 0 32px rgba(6,28,150,0.13),
    0 0 70px rgba(2,12,70,0.08);
}

/* Thin cyan top-edge accent line */
.rec-item-card::before {
  left: 18%; right: 18%;
  background: linear-gradient(90deg,
    transparent,
    rgba(56,189,248,0.35) 28%,
    rgba(125,211,252,0.55) 50%,
    rgba(56,189,248,0.35) 72%,
    transparent);
}

/* ── Photo area: widescreen 16:9-ish ratio (not square) ── */
.rec-item-photo-wrap {
  width: 100%;
  padding-top: 70%;          /* ~16:9 widescreen feel, 20% shorter than before */
  border-radius: 18px 18px 0 0;
  background: linear-gradient(170deg, #010610 0%, #030c22 45%, #071a45 100%);
}

/* ── Crystal glass frame around photo ── */
.rec-item-photo-ring {
  border-radius: 18px 18px 0 0;
  box-shadow:
    /* bright top-left crystal edge */
    inset 0  2.5px 0 rgba(255,255,255,0.20),
    inset 2.5px 0  0 rgba(180,225,255,0.12),
    /* subtle right/bottom depth */
    inset -1.5px 0  0 rgba(0,0,0,0.16),
    inset 0 -1.5px  0 rgba(0,0,0,0.22),
    /* outer frame glow — very subtle */
    0 0 0 1px rgba(56,189,248,0.08);
  background: linear-gradient(
    152deg,
    rgba(255,255,255,0.09) 0%,
    rgba(140,205,255,0.04) 28%,
    transparent 48%
  );
}

/* ── Info body: more breathing room ── */
.rec-item-body {
  padding: 12px 11px 13px;
  gap: 5px;
  border-top: 1px solid rgba(56,140,255,0.10);
  background: linear-gradient(180deg, rgba(3,10,38,0.45) 0%, transparent 100%);
}

/* ── Name: brighter, slightly larger ── */
.rec-item-name {
  color: #f2f8ff;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 0 12px rgba(56,189,248,0.18), 0 1px 6px rgba(0,0,0,0.65);
  margin-bottom: 2px;
}

/* ── Crystal divider between name and description ── */
.rec-item-body::before {
  content: '';
  display: block;
  width: 70%;
  height: 1px;
  margin: 2px auto 4px;
  background: linear-gradient(90deg,
    transparent,
    rgba(56,189,248,0.28) 25%,
    rgba(125,211,252,0.42) 50%,
    rgba(56,189,248,0.28) 75%,
    transparent);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── Description: more readable ── */
.rec-item-desc {
  color: rgba(180,215,255,0.68);
  font-size: 0.65rem;
  line-height: 1.52;
  margin: 0 0 3px;
  -webkit-line-clamp: 3;
}

/* ── Phone: slightly larger, more spacing ── */
.rec-item-phone {
  font-size: 0.65rem;
  gap: 4px;
  margin-top: 1px;
  color: #7dd3fc;
  text-shadow: 0 0 8px rgba(56,189,248,0.28);
}

/* ── Social icons: a touch more space ── */
.rec-item-socials {
  gap: 6px;
  margin-top: 5px;
}

/* ── Crystal edge accents on hero panels ── */
/* Top cyan line on rec-hero */
.rec-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(56,189,248,0.30) 25%,
    rgba(125,211,252,0.50) 50%,
    rgba(56,189,248,0.30) 75%,
    transparent);
  border-radius: 0 0 3px 3px;
  pointer-events: none;
  z-index: 5;
}

/* White corner highlight — top-left of hero card */
.rec-hero .ip-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 28px;
  background: radial-gradient(circle at 0% 0%,
    rgba(255,255,255,0.14) 0%,
    transparent 70%);
  border-radius: 18px 0 0 0;
  pointer-events: none;
  z-index: 8;
}

/* ── Section header: crystal edge line ── */
.ip-page .ip-section-head::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(56,189,248,0.22) 30%,
    rgba(125,211,252,0.35) 50%,
    rgba(56,189,248,0.22) 70%,
    transparent);
  pointer-events: none;
}
.ip-page .ip-section-head {
  position: relative;
}

/* ── Placeholder: darker ── */
.rec-item-photo-placeholder {
  background: linear-gradient(170deg, #010610 0%, #030c22 45%, #071a45 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION — Photo panel height & badge alignment refinements
   CSS-only · no JSX changes
══════════════════════════════════════════════════════════════════════ */

/* ── Photo panel: widescreen, ~25% shorter, smooth rounded corners ── */
.rec-item-photo-wrap {
  padding-top: 52%;          /* reduced from 70% — ~25% shorter, modern widescreen */
  border-radius: 18px 18px 0 0;
  position: relative;
  overflow: hidden;
}

/* Ensure photo fills the padding-top container correctly */
.rec-item-photo,
.rec-item-photo-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Crystal frame ring: match new border-radius */
.rec-item-photo-ring {
  position: absolute;
  inset: 0;
  border-radius: 18px 18px 0 0;
  pointer-events: none;
  z-index: 3;
}

/* ── Badge: aligned flush with top of photo panel, equal inset ── */
.rec-badge {
  top: 7px;
  right: 7px;
  /* equal spacing from both edges */
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION — Profile card v2
   Embedded image panel · doubled card height · generous info area
   CSS-only · no JSX changes
══════════════════════════════════════════════════════════════════════ */

/* ── Card shell: add padding so photo doesn't touch edges ── */
.rec-item-card {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0;
  min-height: 0;
  min-height: initial;
  border-radius: 22px;
  overflow: visible;          /* allow badge to sit on the outer edge */
  position: relative;
}

/* Keep ::before top-edge accent line working with new padding */
.rec-item-card::before {
  left: 22%;
  right: 22%;
}

/* ── Embedded image panel: landscape, framed, not touching edges ── */
.rec-item-photo-wrap {
  width: 100%;
  padding-top: 58%;           /* landscape ~16:10 feel */
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  flex-shrink: 0;

  /* Crystal glass frame — white highlight top-left, depth bottom-right */
  box-shadow:
    /* white crystal top edge */
    0 0 0 1.5px rgba(200, 230, 255, 0.28),
    /* bright top-left corner highlight */
    inset 0  2px 0 rgba(255, 255, 255, 0.22),
    inset 2px 0  0 rgba(180, 225, 255, 0.14),
    /* subtle depth bottom-right */
    inset -1.5px 0  0 rgba(0, 0, 0, 0.20),
    inset 0 -1.5px  0 rgba(0, 0, 0, 0.28),
    /* outer blue ambient glow */
    0 4px 18px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(14, 60, 200, 0.18),
    0 0 40px rgba(6, 30, 130, 0.10);

  /* Darker navy background for the image area */
  background: linear-gradient(160deg, #010610 0%, #030c22 40%, #071a45 100%);
}

/* Photo fills the container */
.rec-item-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 15px;
}

/* Placeholder fills the container */
.rec-item-photo-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: linear-gradient(160deg, #010610 0%, #030c22 40%, #071a45 100%);
}

/* Crystal frame ring overlay — sits on top of photo */
.rec-item-photo-ring {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  pointer-events: none;
  z-index: 3;

  /* Glass reflection sheen — top-left corner */
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(160, 215, 255, 0.05) 25%,
    transparent 45%
  );

  box-shadow:
    inset 0  2px 0 rgba(255, 255, 255, 0.18),
    inset 2px 0  0 rgba(180, 225, 255, 0.10),
    inset -1px 0  0 rgba(0, 0, 0, 0.16),
    inset 0 -1px  0 rgba(0, 0, 0, 0.22);
}

/* ── Info body: taller, more generous spacing ── */
.rec-item-body {
  display: flex;
  flex-direction: column;
  padding: 14px 10px 16px;
  gap: 6px;
  flex: 1 1;
  min-height: 130px;          /* ensures body is tall enough for content */
  border-top: 1px solid rgba(56, 140, 255, 0.12);
  background: linear-gradient(180deg, rgba(3, 10, 38, 0.50) 0%, transparent 100%);
}

/* Crystal divider between name and description */
.rec-item-body::before {
  content: '';
  display: block;
  width: 65%;
  height: 1px;
  margin: 3px 0 5px;
  background: linear-gradient(90deg,
    rgba(56, 189, 248, 0.30) 0%,
    rgba(125, 211, 252, 0.50) 50%,
    rgba(56, 189, 248, 0.30) 100%);
  border-radius: 1px;
  flex-shrink: 0;
}

/* Name */
.rec-item-name {
  color: #f2f8ff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.20), 0 1px 6px rgba(0, 0, 0, 0.65);
  margin: 0;
}

/* Description: 4-line clamp, more readable */
.rec-item-desc {
  color: rgba(185, 218, 255, 0.72);
  font-size: 0.67rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Phone */
.rec-item-phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.67rem;
  font-weight: 600;
  color: #7dd3fc;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.30);
  margin-top: 2px;
}

/* Social icons row */
.rec-item-socials {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* ── Badge: sits at card's top-right, above the padding ── */
.rec-badge {
  top: 4px;
  right: 4px;
  z-index: 20;
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION — Desktop responsive grid
   Overrides MUI Grid item widths at each breakpoint.
   Mobile (<768px) is untouched — xs=6 (2 cols) stays as-is.
   All rules scoped to .ip-page to avoid touching InfluencersPage.
══════════════════════════════════════════════════════════════════════ */

/* ── Tablet 768–1023px: 2 cards per row (same as mobile xs=6, no change needed) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .ip-page .MuiGrid-item {
    width: 50% !important;
    max-width: 50% !important;
    flex-basis: 50% !important;
  }
}

/* ── Laptop 1024–1399px: 3 cards per row ── */
@media (min-width: 1024px) and (max-width: 1399px) {
  .ip-page .MuiGrid-container {
    max-width: 1360px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ip-page .MuiGrid-item {
    width: 33.3333% !important;
    max-width: 33.3333% !important;
    flex-basis: 33.3333% !important;
  }
}

/* ── Desktop ≥1400px: 4 cards per row ── */
@media (min-width: 1400px) {
  .ip-page {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
  .ip-page .MuiGrid-container {
    max-width: 1560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ip-page .MuiGrid-item {
    width: 25% !important;
    max-width: 25% !important;
    flex-basis: 25% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION — Profile card proportions v3
   Image height +10% · Info body height +50% · Description expanded
   CSS-only · no JSX changes
══════════════════════════════════════════════════════════════════════ */

/* Image panel: 58% → 64% (+10%) */
.rec-item-photo-wrap {
  padding-top: 64%;
}

/* Info body: min-height 130px → 195px (+50%), more padding, larger gap */
.rec-item-body {
  min-height: 195px;
  padding: 14px 12px 20px;
  gap: 8px;
}

/* Description: 4-line → 6-line clamp, improved line-height */
.rec-item-desc {
  -webkit-line-clamp: 6;
  line-height: 1.62;
  font-size: 0.68rem;
}

/* ══════════════════════════════════════════════════════════════════════
   INFLUENCER NETWORK — 2-card stats + category buttons
══════════════════════════════════════════════════════════════════════ */

/* Stats grid: 2 equal columns, centered */
.ip-stats-grid--two {
  grid-template-columns: 1fr 1fr;
  max-width: 320px;
  margin: 0 auto;
}

/* ── Category buttons row ── */
.ip-cat-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 5px;
  margin-top: 8px;
  width: 100%;
}

.ip-cat-btn {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 3px 5px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: 0.50rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(200, 228, 255, 0.82);
  line-height: 1.2;
  text-align: center;

  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.07) 0%,
      rgba(20, 70, 180, 0.08) 60%,
      rgba(255,255,255,0.03) 100%
    );
  border-top:    1px solid rgba(160, 215, 255, 0.24);
  border-left:   1px solid rgba(120, 190, 255, 0.15);
  border-right:  1px solid rgba(20,  70,  180, 0.08);
  border-bottom: 1px solid rgba(8,   30,  100, 0.06);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 1px 0  0 rgba(255,255,255,0.05),
    0 2px 8px rgba(0,0,0,0.22),
    0 0 12px rgba(20,80,200,0.08);

  transition: box-shadow 0.18s ease, background 0.18s ease, -webkit-transform 0.18s ease;

  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;

  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, -webkit-transform 0.18s ease;
  position: relative;
  overflow: hidden;
}

/* Top sheen on each button */
.ip-cat-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(180,220,255,0.03) 55%,
    transparent 100%
  );
  border-radius: 9px 9px 50% 50% / 9px 9px 10px 10px;
  pointer-events: none;
}

.ip-cat-btn:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.11) 0%,
      rgba(30, 90, 210, 0.14) 60%,
      rgba(255,255,255,0.05) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 4px 14px rgba(0,0,0,0.30),
    0 0 18px rgba(30,100,255,0.18);
}

.ip-cat-btn:active {
  -webkit-transform: scale(0.92);
          transform: scale(0.92);
  transition-duration: 0.10s;
}

/* Icon color: inherit the neon-blue theme */
.ip-cat-btn svg {
  color: #60c8ff;
  -webkit-filter: drop-shadow(0 0 4px rgba(96,200,255,0.50));
          filter: drop-shadow(0 0 4px rgba(96,200,255,0.50));
  flex-shrink: 0;
}

/* Desktop: keep buttons in a row but allow more padding */
@media (min-width: 1024px) {
  .ip-stats-grid--two {
    max-width: 420px;
  }
  .ip-cat-row {
    gap: 8px;
    margin-top: 10px;
  }
  .ip-cat-btn {
    padding: 8px 6px 7px;
    font-size: 0.55rem;
    border-radius: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   CATEGORY BADGE (right pill) + NAME ICON + COLORED FILTER BUTTONS
══════════════════════════════════════════════════════════════════════ */

/* ── pc-right overrides ── */
.pc-right {
  width: 38px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}

/* ── Category badge: same dimensions as STEP badge ── */
.cat-badge {
  position: relative;
  width: 28px;
  min-height: 60px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  flex-shrink: 0;
  -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,0.30));
          filter: drop-shadow(0 0 6px rgba(0,0,0,0.30));
}

.cat-badge-sheen {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(170deg,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.10) 42%,
    transparent 100%);
  border-radius: 9px 9px 50% 50% / 9px 9px 14px 14px;
  pointer-events: none;
  z-index: 2;
}

.cat-badge-inner-glow {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(145deg, rgba(255,255,255,0.18) 0%, transparent 55%);
}

.cat-badge-icon {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-filter: drop-shadow(0 0 5px currentColor);
          filter: drop-shadow(0 0 5px currentColor);
}

.cat-badge-label {
  position: relative;
  z-index: 3;
  color: rgba(255,255,255,0.95);
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  white-space: nowrap;
}

/* ── Small category icon badge before influencer name ── */
.pc-cat-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 6px 0 5px;
  border-radius: 7px;
  flex-shrink: 0;
  overflow: hidden;
  gap: 0;
  margin-left: auto;
}

.pc-cat-icon-sheen {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.32) 0%,
    transparent 100%);
  border-radius: 5px 5px 50% 50% / 5px 5px 8px 8px;
  pointer-events: none;
  z-index: 1;
}

.pc-cat-icon-inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pc-cat-icon-inner svg {
  -webkit-filter: drop-shadow(0 0 3px currentColor);
          filter: drop-shadow(0 0 3px currentColor);
  flex-shrink: 0;
}

.pc-cat-icon-label {
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.50);
  white-space: nowrap;
}

/* ── Hero filter buttons: use CSS custom properties for per-color theming ── */
.ip-cat-btn {
  border-top-color:    rgba(160,215,255,0.24);
  border-top-color:    var(--cat-border, rgba(160,215,255,0.24));
  border-left-color:   rgba(120,190,255,0.15);
  border-left-color:   var(--cat-border, rgba(120,190,255,0.15));
  border-right-color:  rgba(20,70,180,0.08);
  border-right-color:  var(--cat-border, rgba(20,70,180,0.08));
  border-bottom-color: rgba(8,30,100,0.06);
  border-bottom-color: var(--cat-border, rgba(8,30,100,0.06));
  color: rgba(200,228,255,0.82);
  color: var(--cat-color, rgba(200,228,255,0.82));
}

.ip-cat-btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 4px 14px rgba(0,0,0,0.30),
    0 0 18px rgba(30,100,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 4px 14px rgba(0,0,0,0.30),
    0 0 18px var(--cat-glow, rgba(30,100,255,0.18));
}

.ip-cat-btn span {
  color: rgba(200,228,255,0.82);
  color: var(--cat-color, rgba(200,228,255,0.82));
}

/* ── Mobile: match step-badge mobile height ── */
@media (max-width: 767px) {
  .pc-right {
    width: 38px;
    gap: 0;
    padding: 10px 0;
  }
  .cat-badge {
    min-height: 94px;
  }
  .cat-badge-sheen {
    height: 48%;
    border-radius: 11px 11px 50% 50% / 11px 11px 18px 18px;
    background: linear-gradient(170deg,
      rgba(255,255,255,0.48) 0%,
      rgba(255,255,255,0.16) 38%,
      transparent 100%);
  }
}

/* ── Desktop ── */
@media (min-width: 1024px) {
  .pc-right {
    width: 38px;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 10px 0;
    border-top: none;
    background: rgba(0,0,0,0.14);
  }
  .cat-badge {
    min-height: 60px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PREMIUM CRYSTAL / GLASS BREATHING ANIMATIONS
   Pure brightness breathing — no color change, no layout change.
   All animations are slow, smooth, and barely noticeable.
══════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */

/* Very subtle brightness breath — light → normal → slightly dim → normal */
@-webkit-keyframes crystal-breathe {
  0%,100% { -webkit-filter: brightness(1.00); filter: brightness(1.00); }
  40%      { -webkit-filter: brightness(1.07); filter: brightness(1.07); }
  70%      { -webkit-filter: brightness(0.96); filter: brightness(0.96); }
}
@keyframes crystal-breathe {
  0%,100% { -webkit-filter: brightness(1.00); filter: brightness(1.00); }
  40%      { -webkit-filter: brightness(1.07); filter: brightness(1.07); }
  70%      { -webkit-filter: brightness(0.96); filter: brightness(0.96); }
}

/* Slightly faster variant for nav buttons */
@-webkit-keyframes crystal-breathe-btn {
  0%,100% { -webkit-filter: brightness(1.00); filter: brightness(1.00); }
  45%      { -webkit-filter: brightness(1.10); filter: brightness(1.10); }
  75%      { -webkit-filter: brightness(0.95); filter: brightness(0.95); }
}
@keyframes crystal-breathe-btn {
  0%,100% { -webkit-filter: brightness(1.00); filter: brightness(1.00); }
  45%      { -webkit-filter: brightness(1.10); filter: brightness(1.10); }
  75%      { -webkit-filter: brightness(0.95); filter: brightness(0.95); }
}

/* Shimmer sweep — diagonal light band crossing the element */
@-webkit-keyframes crystal-shimmer {
  0%   { -webkit-transform: translateX(-140%) skewX(-18deg); transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { -webkit-transform: translateX(240%)  skewX(-18deg); transform: translateX(240%)  skewX(-18deg); opacity: 0; }
}
@keyframes crystal-shimmer {
  0%   { -webkit-transform: translateX(-140%) skewX(-18deg); transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { -webkit-transform: translateX(240%)  skewX(-18deg); transform: translateX(240%)  skewX(-18deg); opacity: 0; }
}

/* ── Stat cards (Total Influencers / Total Reach) ── */
.psc.psc-visible {
  -webkit-animation: crystal-breathe 7s ease-in-out infinite;
          animation: crystal-breathe 7s ease-in-out infinite;
  will-change: filter;
}
.psc.psc-visible:nth-child(2) {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

/* Shimmer sweep overlay on stat cards */
.psc.psc-visible::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255,255,255,0.00) 38%,
    rgba(220,240,255,0.13) 50%,
    rgba(255,255,255,0.00) 62%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
  -webkit-animation: crystal-shimmer 9s ease-in-out infinite;
          animation: crystal-shimmer 9s ease-in-out infinite;
  will-change: transform, opacity;
}
.psc.psc-visible:nth-child(2)::before {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

/* ── Category filter buttons (Business / Health / Travel / News / Entertainment) ── */
.ip-cat-btn {
  -webkit-animation: crystal-breathe 8s ease-in-out infinite;
          animation: crystal-breathe 8s ease-in-out infinite;
  will-change: filter;
}
.ip-cat-btn:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s;   }
.ip-cat-btn:nth-child(2) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
.ip-cat-btn:nth-child(3) { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; }
.ip-cat-btn:nth-child(4) { -webkit-animation-delay: 4.2s; animation-delay: 4.2s; }
.ip-cat-btn:nth-child(5) { -webkit-animation-delay: 5.6s; animation-delay: 5.6s; }

/* Shimmer sweep on category buttons */
.ip-cat-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255,255,255,0.00) 36%,
    rgba(220,240,255,0.14) 50%,
    rgba(255,255,255,0.00) 64%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
  -webkit-animation: crystal-shimmer 10s ease-in-out infinite;
          animation: crystal-shimmer 10s ease-in-out infinite;
  will-change: transform, opacity;
}
.ip-cat-btn:nth-child(1)::after { -webkit-animation-delay: 0s; animation-delay: 0s;   }
.ip-cat-btn:nth-child(2)::after { -webkit-animation-delay: 2s; animation-delay: 2s;   }
.ip-cat-btn:nth-child(3)::after { -webkit-animation-delay: 4s; animation-delay: 4s;   }
.ip-cat-btn:nth-child(4)::after { -webkit-animation-delay: 6s; animation-delay: 6s;   }
.ip-cat-btn:nth-child(5)::after { -webkit-animation-delay: 8s; animation-delay: 8s;   }

/* ── Category name badge (Health pill next to influencer name) ── */
.pc-cat-icon {
  -webkit-animation: crystal-breathe 9s ease-in-out infinite;
          animation: crystal-breathe 9s ease-in-out infinite;
  will-change: filter;
}

/* ── Nav buttons (Share / Home / Back) ── */
.ip-nav-btn {
  -webkit-animation: crystal-breathe-btn 6s ease-in-out infinite;
          animation: crystal-breathe-btn 6s ease-in-out infinite;
  will-change: filter;
}
.ip-nav-btn:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s;  }
.ip-nav-btn:nth-child(2) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
.ip-nav-btn:nth-child(3) { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; }

/* Shimmer on nav buttons */
.ip-nav-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(200,235,255,0.18) 50%,
    rgba(255,255,255,0.00) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  border-radius: 9px;
  -webkit-animation: crystal-shimmer 8s ease-in-out infinite;
          animation: crystal-shimmer 8s ease-in-out infinite;
  will-change: transform, opacity;
}
.ip-nav-btn:nth-child(1)::after { -webkit-animation-delay: 0s; animation-delay: 0s;   }
.ip-nav-btn:nth-child(2)::after { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; }
.ip-nav-btn:nth-child(3)::after { -webkit-animation-delay: 4.4s; animation-delay: 4.4s; }

/* ── Influencer cards ── */
.pc.pc-visible {
  -webkit-animation: crystal-breathe 11s ease-in-out infinite;
          animation: crystal-breathe 11s ease-in-out infinite;
  will-change: filter;
}
.pc.pc-visible:nth-child(even) { -webkit-animation-delay: 3s; animation-delay: 3s; }
.pc.pc-visible:nth-child(3n)   { -webkit-animation-delay: 6s; animation-delay: 6s; }

/* ── Tagline strip ── */
.ip-tagline {
  -webkit-animation: crystal-breathe 10s ease-in-out infinite;
          animation: crystal-breathe 10s ease-in-out infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  will-change: filter;
}

/* ── Contact button ── */
.pc-btn-primary {
  -webkit-animation: crystal-breathe-btn 5s ease-in-out infinite;
          animation: crystal-breathe-btn 5s ease-in-out infinite;
  will-change: filter;
}

/* ── Social icon buttons ── */
.psoc {
  -webkit-animation: crystal-breathe 7s ease-in-out infinite;
          animation: crystal-breathe 7s ease-in-out infinite;
  will-change: filter;
}
.psoc:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s;   }
.psoc:nth-child(2) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.psoc:nth-child(3) { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; }
.psoc:nth-child(4) { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; }

/* ── STEP badges ── */
.step-badge {
  -webkit-animation: crystal-breathe 8s ease-in-out infinite;
          animation: crystal-breathe 8s ease-in-out infinite;
  will-change: filter;
}

/* ── Hero icon wrap (globe icon tile) ── */
.ip-hero-icon-wrap {
  -webkit-animation: crystal-breathe 9s ease-in-out infinite;
          animation: crystal-breathe 9s ease-in-out infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  will-change: filter;
}

/* ── Accessibility: respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .psc.psc-visible,
  .psc.psc-visible::before,
  .ip-cat-btn,
  .ip-cat-btn::after,
  .pc-cat-icon,
  .ip-nav-btn,
  .ip-nav-btn::after,
  .pc.pc-visible,
  .ip-tagline,
  .pc-btn-primary,
  .psoc,
  .step-badge,
  .ip-hero-icon-wrap {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-filter: none !important;
            filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   INFLUENCER PHOTO STRIP CAROUSEL
   Seamless left-to-right scroll · small circular avatars · glass strip
══════════════════════════════════════════════════════════════════════ */

/* Outer wrapper — clips overflow, adds subtle glass background */
.ip-strip-wrap {
  width: 100%;
  overflow: hidden;
  margin: 0 0 10px;
  padding: 7px 0;
  background: linear-gradient(
    90deg,
    rgba(2, 8, 30, 0.70) 0%,
    rgba(8, 24, 70, 0.55) 50%,
    rgba(2, 8, 30, 0.70) 100%
  );
  border-top:    1px solid rgba(100, 180, 255, 0.12);
  border-bottom: 1px solid rgba(100, 180, 255, 0.12);
  position: relative;
}

/* Fade edges left and right */
.ip-strip-wrap::before,
.ip-strip-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
}
.ip-strip-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(2,8,30,0.85) 0%, transparent 100%);
}
.ip-strip-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(2,8,30,0.85) 0%, transparent 100%);
}

/* Scrolling track — uses translateX animation */
.ip-strip-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: -webkit-max-content;
  width: max-content;
  -webkit-animation: ip-strip-scroll 28s linear infinite;
          animation: ip-strip-scroll 28s linear infinite;
  will-change: transform;
}

/* Each avatar slot */
.ip-strip-item {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(100, 180, 255, 0.35);
  box-shadow:
    0 0 6px rgba(30, 100, 255, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.18);
  background: linear-gradient(135deg, #08182f 0%, #0b2f63 100%);
}

/* Avatar image */
.ip-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder when no image */
.ip-strip-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d2a50 0%, #1a3d70 100%);
}

/* Scroll keyframe — moves exactly half the track width (original set),
   since we duplicate items the loop is seamless */
@-webkit-keyframes ip-strip-scroll {
  0%   { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes ip-strip-scroll {
  0%   { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* Pause on hover for accessibility */
.ip-strip-wrap:hover .ip-strip-track {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ip-strip-track {
    -webkit-animation: none !important;
            animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION — Inline number badge beside person name
══════════════════════════════════════════════════════════════════════ */

/* Name row: name + badge side by side */
.rec-item-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
}

.rec-item-name-row .rec-item-name {
  margin: 0;
  flex: 1 1;
  min-width: 0;
}

/* Compact inline number badge — pointed bottom (shield shape) */
.rec-num-badge {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 30px;
  height: 38px;
  border-radius: 7px 7px 0 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
          clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  overflow: visible;
}

.rec-num-badge-sheen {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.10) 50%,
    transparent 100%);
  border-radius: 6px 6px 50% 50% / 6px 6px 8px 8px;
  pointer-events: none;
  z-index: 2;
}

.rec-num-badge-inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(145deg, rgba(255,255,255,0.18) 0%, transparent 55%);
}

.rec-num-badge-star {
  position: relative;
  z-index: 3;
  color: rgba(255,255,255,0.90);
  font-size: 0.44rem;
  line-height: 1;
  -webkit-filter: drop-shadow(0 0 3px rgba(255,255,255,0.60));
          filter: drop-shadow(0 0 3px rgba(255,255,255,0.60));
}

.rec-num-badge-num {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 8px rgba(255,255,255,0.60), 0 1px 3px rgba(0,0,0,0.50);
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION HERO — Five-star row below shield
══════════════════════════════════════════════════════════════════════ */
.rec-five-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 4px;
}

.rec-five-stars-star {
  color: #f59e0b;
  font-size: 0.72rem;
  line-height: 1;
  -webkit-filter:
    drop-shadow(0 0 4px rgba(245,158,11,0.80))
    drop-shadow(0 0 2px rgba(254,240,138,0.60));
          filter:
    drop-shadow(0 0 4px rgba(245,158,11,0.80))
    drop-shadow(0 0 2px rgba(254,240,138,0.60));
}

/* ══════════════════════════════════════════════════════════════════════
   RECOGNITION IMAGE STRIP CAROUSEL
   Square thumbnails · slight rounded corners · left-to-right scroll
══════════════════════════════════════════════════════════════════════ */

.rec-strip-wrap {
  width: 100%;
  overflow: hidden;
  margin: 0 0 10px;
  padding: 6px 0;
  background: linear-gradient(
    90deg,
    rgba(2, 8, 30, 0.70) 0%,
    rgba(8, 24, 70, 0.50) 50%,
    rgba(2, 8, 30, 0.70) 100%
  );
  border-top:    1px solid rgba(56, 189, 248, 0.10);
  border-bottom: 1px solid rgba(56, 189, 248, 0.10);
  position: relative;
}

/* Fade edges */
.rec-strip-wrap::before,
.rec-strip-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 2;
}
.rec-strip-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(2,8,30,0.90) 0%, transparent 100%);
}
.rec-strip-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(2,8,30,0.90) 0%, transparent 100%);
}

/* Scrolling track */
.rec-strip-track {
  display: flex;
  align-items: center;
  gap: 7px;
  width: -webkit-max-content;
  width: max-content;
  -webkit-animation: rec-strip-scroll 32s linear infinite;
          animation: rec-strip-scroll 32s linear infinite;
  will-change: transform;
}

/* Square thumbnail */
.rec-strip-item {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow:
    0 0 6px rgba(14, 60, 200, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.14);
  background: linear-gradient(135deg, #010610 0%, #040e28 100%);
}

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

.rec-strip-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #010610 0%, #071a45 100%);
}

/* Seamless loop — translate by exactly half (one full original set) */
@-webkit-keyframes rec-strip-scroll {
  0%   { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes rec-strip-scroll {
  0%   { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

.rec-strip-wrap:hover .rec-strip-track {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .rec-strip-track {
    -webkit-animation: none !important;
            animation: none !important;
  }
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* ═══════════════════════════════════════════════════════════════
   LAYOUT 2 — Global Light Green Header Theme
   Applied when body[data-layout2="true"] is set.
   Replaces all blue / white page headers with the same
   light green (#edf7ed) used on the Home Page.
   Does NOT affect Layout 1.
═══════════════════════════════════════════════════════════════ */

/* ── Shared token ── */
:root {
  --l2-bg:     #edf7ed;
  --l2-border: #c8e6c9;
  --l2-text:   #134013;
  --l2-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ─────────────────────────────────────────────────────────────
   All Categories (CategoryListView) — clv-topbar
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .clv-topbar {
  background: #edf7ed;
  background: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: var(--l2-shadow);
}

body[data-layout2="true"] .clv-back,
body[data-layout2="true"] .clv-section-title {
  color: #134013;
  color: var(--l2-text);
}

/* ─────────────────────────────────────────────────────────────
   News Channel — news-channel-header
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .news-channel-header {
  background-color: #edf7ed;
  background-color: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: var(--l2-shadow);
}

/* ─────────────────────────────────────────────────────────────
   Service Link — service-link-header
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .service-link-header {
  background-color: #edf7ed;
  background-color: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: var(--l2-shadow);
}

/* ─────────────────────────────────────────────────────────────
   Arivum Aarogyavum — arivum-header (already green, keep consistent)
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .arivum-header {
  background-color: #edf7ed;
  background-color: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: var(--l2-shadow);
}

/* ─────────────────────────────────────────────────────────────
   My Bookmarks — mbk-header (already green, keep consistent)
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .mbk-header {
  background: #edf7ed;
  background: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
}

/* ─────────────────────────────────────────────────────────────
   My Listing Dashboard — listing-header (already green, keep consistent)
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .listing-header {
  background-color: #edf7ed;
  background-color: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
  color: #134013;
  color: var(--l2-text);
}

/* ─────────────────────────────────────────────────────────────
   Customer Profile (MyProfile) — mp-header (already green, keep consistent)
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .mp-header {
  background: #edf7ed;
  background: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
}

/* ─────────────────────────────────────────────────────────────
   Business Profile / Edit Profile — ep-topbar (white → green)
   Replace blue gradient strip with green
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .ep-topbar {
  background: #edf7ed;
  background: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: var(--l2-shadow);
}

body[data-layout2="true"] .ep-topbar-title {
  color: #134013 !important;
  color: var(--l2-text) !important;
}

body[data-layout2="true"] .ep-profile-strip {
  background: #edf7ed;
  background: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
}

body[data-layout2="true"] .ep-strip-name {
  color: #134013 !important;
  color: var(--l2-text) !important;
}

body[data-layout2="true"] .ep-strip-mobile {
  color: #2e7d32 !important;
}

/* ─────────────────────────────────────────────────────────────
   Shared page top bars (EditImages, EditInfo, EditSocial) — pg-topbar
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .pg-topbar {
  background: #edf7ed;
  background: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: var(--l2-shadow);
}

body[data-layout2="true"] .pg-topbar-title {
  color: #134013 !important;
  color: var(--l2-text) !important;
}

/* ─────────────────────────────────────────────────────────────
   Product Details — product-details-header (already green, keep consistent)
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .product-details-header {
  background: #edf7ed;
  background: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
}

/* ─────────────────────────────────────────────────────────────
   Search Screen — inline white header override
   Targets the first child div of the SearchScreen root
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .search-screen-header {
  background-color: #edf7ed !important;
  background-color: var(--l2-bg) !important;
  border-bottom: 2px solid #c8e6c9 !important;
  border-bottom: 2px solid var(--l2-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--l2-shadow) !important;
}

/* ─────────────────────────────────────────────────────────────
   Public Service Center — inline white header override
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .psc-header {
  background-color: #edf7ed !important;
  background-color: var(--l2-bg) !important;
  border-bottom: 2px solid #c8e6c9 !important;
  border-bottom: 2px solid var(--l2-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--l2-shadow) !important;
}

/* ─────────────────────────────────────────────────────────────
   NewsPaper — inline header override
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .newspaper-header {
  background-color: #edf7ed !important;
  background-color: var(--l2-bg) !important;
  border-bottom: 2px solid #c8e6c9 !important;
  border-bottom: 2px solid var(--l2-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--l2-shadow) !important;
}

/* ─────────────────────────────────────────────────────────────
   Unified Page Header Controls (phc-) — Layout 2 green theme
   Excluded: .cat-details-root (has its own dark crystal theme)
───────────────────────────────────────────────────────────── */
body[data-layout2="true"] .phc-bar:not(.cat-details-root .phc-bar) {
  background: #edf7ed;
  background: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: var(--l2-shadow);
}

/* Scoped exclusion for cat-details-root — do not apply green to its phc-bar */
body[data-layout2="true"] :not(.cat-details-root) > .phc-bar {
  background: #edf7ed;
  background: var(--l2-bg);
  border-bottom: 2px solid #c8e6c9;
  border-bottom: 2px solid var(--l2-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: var(--l2-shadow);
}

body[data-layout2="true"] .phc-inner {
  background: transparent;
  border: none;
}

body[data-layout2="true"] .phc-title {
  color: #134013;
  color: var(--l2-text);
}

/* ═════════════════════════════════════════════════════════════════
   PRODUCT DETAILS — Layout 2 Desktop Premium Theme
   Scope: body[data-layout2="true"] + @media (min-width: 960px)
   Does NOT affect Layout 1 or mobile.
═════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {

  /* ── 1. Page canvas: very soft warm-white tint ── */
  body[data-layout2="true"] .product-details-root {
    background: #f7f9fb;
    padding: 28px 32px;
    gap: 28px;
  }

  /* ── 2. Left column: slideshow + mini carousel ── */
  body[data-layout2="true"] .pd-left-col {
    gap: 16px;
  }

  /* ── 3. Slideshow: premium framed card ── */
  body[data-layout2="true"] .product-carousel-section {
    border-radius: 16px;
    border: 1px solid #e0e6ed;
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.09),
      0 1px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  /* ── 4. Desktop mini carousel: premium container ── */
  body[data-layout2="true"] .pd-desk-mini-carousel-wrap {
    border-radius: 14px;
    border: 1px solid #e0e6ed;
    box-shadow:
      0 3px 14px rgba(0, 0, 0, 0.08),
      0 1px 3px rgba(0, 0, 0, 0.04);
    background: #ffffff;
    padding: 10px 0;
  }

  body[data-layout2="true"] .pd-desk-mini-thumb {
    border-radius: 10px;
    border: 1px solid #e8edf2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  /* ── 5. Right column: clean gap ── */
  body[data-layout2="true"] .product-details-main {
    gap: 0;
  }

  /* ── 6. Info panel: premium white card ── */
  body[data-layout2="true"] .product-content {
    border-radius: 17px !important;
    border: 1px solid #e0e6ed !important;
    box-shadow:
      0 6px 28px rgba(0, 0, 0, 0.08),
      0 1px 4px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
    padding: 26px 28px !important;
  }

  /* ── 7. Dividers inside info panel: lighter, more elegant ── */
  body[data-layout2="true"] .product-content hr {
    border: none;
    border-top: 1px solid #edf0f4;
    margin: 14px 0;
  }

  /* ── 8. Social media action buttons: refined square style ── */
  body[data-layout2="true"] .social-media {
    border-radius: 10px;
    box-shadow:
      0 3px 10px rgba(22, 107, 142, 0.18),
      0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #e8edf2;
    background: #ffffff;
    transition:
      box-shadow 260ms ease-out,
      border-color 260ms ease,
      -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition:
      transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 260ms ease-out,
      border-color 260ms ease;
    transition:
      transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 260ms ease-out,
      border-color 260ms ease,
      -webkit-transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  body[data-layout2="true"] .social-media:hover {
    -webkit-transform: translateY(-4px) scale(1.07);
            transform: translateY(-4px) scale(1.07);
    box-shadow:
      0 10px 24px rgba(22, 107, 142, 0.26),
      0 2px 6px rgba(0, 0, 0, 0.08);
    border-color: #c8dde8;
  }

  body[data-layout2="true"] .social-media:active {
    -webkit-transform: translateY(1px) scale(0.94);
            transform: translateY(1px) scale(0.94);
    box-shadow: 0 2px 6px rgba(22, 107, 142, 0.14);
  }

  /* ── 9. View / Fav / Share action buttons: elevated ── */
  body[data-layout2="true"] .pd-action-btn {
    border-radius: 10px;
    box-shadow:
      4px 4px 9px rgba(0, 0, 0, 0.11),
      -2px -2px 6px rgba(255, 255, 255, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border: 1px solid #dde3ea;
    background: linear-gradient(145deg, #ffffff, #eef1f5);
  }

  body[data-layout2="true"] .pd-action-btn--view:hover {
    box-shadow:
      0 7px 20px rgba(33, 130, 177, 0.30),
      -2px -2px 6px rgba(255, 255, 255, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    background: linear-gradient(145deg, #edf6ff, #daeef9);
    border-color: #b8d8ee;
  }

  body[data-layout2="true"] .pd-action-btn--fav:hover {
    box-shadow:
      0 7px 20px rgba(229, 57, 53, 0.26),
      -2px -2px 6px rgba(255, 255, 255, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    background: linear-gradient(145deg, #fff3f3, #fcdede);
    border-color: #f0c0c0;
  }

  body[data-layout2="true"] .pd-action-btn--share:hover {
    box-shadow:
      0 7px 20px rgba(46, 125, 50, 0.26),
      -2px -2px 6px rgba(255, 255, 255, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    background: linear-gradient(145deg, #f0faf0, #d9f0d9);
    border-color: #b0d8b0;
  }

  /* ── 10. Catalogue section: premium container ── */
  body[data-layout2="true"] .product-catalog-section {
    padding: 0 32px 32px;
  }

  body[data-layout2="true"] .product-catalog-section .MuiCard-root {
    border-radius: 16px !important;
    border: 1px solid #e0e6ed !important;
    box-shadow:
      0 6px 28px rgba(0, 0, 0, 0.08),
      0 1px 4px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
    overflow: hidden;
  }

  /* Catalogue image thumbnails: slightly more rounded ── */
  body[data-layout2="true"] .product-catalog-section .img-parent {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  }

  /* Catalogue section heading row spacing ── */
  body[data-layout2="true"] .product-catalog-section > div > div:first-child {
    padding: 0 4px 4px;
  }

}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER CONTROLS — Unified Design System
   Single source of truth for:
     .phc-bar          — sticky header wrapper
     .phc-inner        — green pill / inner container
     .phc-row          — flex row of controls
     .phc-back         — back button
     .phc-search-wrap  — search input + button joined
     .phc-search-input — search text field
     .phc-search-btn   — search submit button
     .phc-share-btn    — share icon button
     .phc-layout-toggle — layout switch
   Applies to BOTH Layout 1 and Layout 2, Desktop and Mobile.
═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --phc-h:          36px;   /* uniform control height */
  --phc-radius:     8px;    /* uniform border radius */
  --phc-shadow:     0 1px 4px rgba(0,0,0,0.12);
  --phc-shadow-hov: 0 3px 10px rgba(0,0,0,0.18);
  --phc-green:      #2e7d32;
  --phc-green-bg:   #edf7ed;
  --phc-green-bdr:  #c8e6c9;
  --phc-text:       #134013;
  --phc-blue:       #1565C0;
  --phc-blue-dark:  #0d47a1;
  --phc-transition: 0.18s ease;
}

/* ─────────────────────────────────────────────────────────────
   Sticky bar wrapper
───────────────────────────────────────────────────────────── */
.phc-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  padding: 10px 12px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────
   Green inner pill
───────────────────────────────────────────────────────────── */
.phc-inner {
  background: #edf7ed;
  background: var(--phc-green-bg);
  border: 1px solid #c8e6c9;
  border: 1px solid var(--phc-green-bdr);
  border-radius: 8px;
  border-radius: var(--phc-radius);
  padding: 6px 10px 8px;
  box-sizing: border-box;
  position: relative;
}

/* ─────────────────────────────────────────────────────────────
   Page title row — sits above the controls row
───────────────────────────────────────────────────────────── */
.phc-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 5px;
}

.phc-page-title {
  font-size: 15px;
  font-weight: 700;
  color: #134013;
  color: var(--phc-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
  line-height: 1.2;
}

/* ─────────────────────────────────────────────────────────────
   Controls row
───────────────────────────────────────────────────────────── */
.phc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;
  min-width: 0;
}

/* ─────────────────────────────────────────────────────────────
   Back button
───────────────────────────────────────────────────────────── */
/* Standard back button geometry — identical on every page:
   Left edge: 12px (phc-bar padding) + 10px (phc-inner padding) = 22px from viewport
   Height: 36px (--phc-h)
   Top: vertically centered within phc-inner
   This is the single source of truth. Profile pages mirror this in Profile.css / Pages.css. */
.phc-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  height: var(--phc-h);
  padding: 0 10px;
  background: #fff;
  border: 1px solid #c8e6c9;
  border: 1px solid var(--phc-green-bdr);
  border-radius: 8px;
  border-radius: var(--phc-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  box-shadow: var(--phc-shadow);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: box-shadow 0.18s ease, background 0.18s ease;
  transition: box-shadow var(--phc-transition), background var(--phc-transition);
  text-decoration: none;
  color: #134013;
  color: var(--phc-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
}

.phc-back:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  box-shadow: var(--phc-shadow-hov);
  background: #f5fdf5;
}

.phc-back:active {
  -webkit-transform: scale(0.97);
          transform: scale(0.97);
}

.phc-back-icon {
  font-size: 15px !important;
  color: #134013;
  color: var(--phc-text);
  flex-shrink: 0;
}

.phc-back-label {
  font-size: 12px;
  font-weight: 600;
  color: #134013;
  color: var(--phc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}

/* ─────────────────────────────────────────────────────────────
   Page title (centred, absolute)
───────────────────────────────────────────────────────────── */
.phc-title {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: 700;
  color: #134013;
  color: var(--phc-text);
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   Spacer — pushes right-side controls to the right
───────────────────────────────────────────────────────────── */
.phc-spacer {
  flex: 1 1;
  min-width: 0;
}

/* ─────────────────────────────────────────────────────────────
   Search: input + button joined (same as Home Page)
───────────────────────────────────────────────────────────── */
.phc-search-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 36px;
  height: var(--phc-h);
}

.phc-search-input {
  height: 36px;
  height: var(--phc-h);
  width: 180px;          /* ~10% narrower than Home Page's 200px */
  border: 1px solid #e0e0e0;
  border-right: none;
  border-radius: 8px 0 0 8px;
  border-radius: var(--phc-radius) 0 0 var(--phc-radius);
  padding: 0 10px;
  font-size: 13px;
  outline: none;
  background: #fff;
  color: #555;
  box-sizing: border-box;
  transition: border-color 0.18s ease;
  transition: border-color var(--phc-transition);
}

.phc-search-input:focus {
  border-color: #2e7d32;
  border-color: var(--phc-green);
}

.phc-search-btn {
  height: 36px;
  height: var(--phc-h);
  padding: 0 14px;
  background: #1565C0;
  background: var(--phc-blue);
  color: #fff;
  border: none;
  border-radius: 0 8px 8px 0;
  border-radius: 0 var(--phc-radius) var(--phc-radius) 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  box-shadow: var(--phc-shadow);
  transition: background 0.18s ease, box-shadow 0.18s ease;
  transition: background var(--phc-transition), box-shadow var(--phc-transition);
  box-sizing: border-box;
}

.phc-search-btn:hover {
  background: #0d47a1;
  background: var(--phc-blue-dark);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  box-shadow: var(--phc-shadow-hov);
}

.phc-search-btn:active {
  -webkit-transform: scale(0.97);
          transform: scale(0.97);
}

/* ─────────────────────────────────────────────────────────────
   Share button — square, white bg, same height as search btn
───────────────────────────────────────────────────────────── */
.phc-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  width: var(--phc-h);
  height: 36px;
  height: var(--phc-h);
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  border-radius: var(--phc-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  box-shadow: var(--phc-shadow);
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.18s ease, background 0.18s ease;
  transition: box-shadow var(--phc-transition), background var(--phc-transition);
  box-sizing: border-box;
}

.phc-share-btn:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  box-shadow: var(--phc-shadow-hov);
  background: #f5f5f5;
}

.phc-share-btn:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

.phc-share-btn svg {
  font-size: 17px !important;
  color: #134013;
  color: var(--phc-text);
}

/* ─────────────────────────────────────────────────────────────
   Layout toggle — matches Home Page sliding toggle exactly
───────────────────────────────────────────────────────────── */
.phc-layout-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  width: var(--phc-h);
  height: 36px;
  height: var(--phc-h);
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  border-radius: var(--phc-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  box-shadow: var(--phc-shadow);
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 4px;
  transition: box-shadow 0.18s ease;
  transition: box-shadow var(--phc-transition);
}

.phc-layout-toggle:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  box-shadow: var(--phc-shadow-hov);
}

/* Inner track */
.phc-layout-toggle-track {
  width: 100%;
  height: 100%;
  background: #ebebeb;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phc-layout-toggle-track svg {
  font-size: 14px !important;
  color: #555;
  position: relative;
  z-index: 1;
}

/* Active state — green tint */
.phc-layout-toggle.phc-lt-active .phc-layout-toggle-track {
  background: #c8e6c9;
}

.phc-layout-toggle.phc-lt-active .phc-layout-toggle-track svg {
  color: #2e7d32;
  color: var(--phc-green);
}

/* ─────────────────────────────────────────────────────────────
   Mobile: tighter sizing on small screens
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --phc-h: 32px;
  }

  .phc-bar {
    padding: 8px 10px 6px;
  }

  .phc-inner {
    padding: 5px 8px 7px;
  }

  .phc-row {
    gap: 6px;
  }

  .phc-back {
    padding: 0 7px;
    font-size: 11px;
  }

  .phc-back-label {
    max-width: 80px;
    font-size: 11px;
  }

  .phc-search-input {
    width: 110px;
    font-size: 12px;
    padding: 0 7px;
  }

  .phc-search-btn {
    padding: 0 10px;
    font-size: 12px;
  }

  .phc-title {
    font-size: 13px;
  }

  .phc-page-title {
    font-size: 13px;
  }

  .phc-title-row {
    padding-bottom: 4px;
  }

  /* Profile topbars mirror phc-bar mobile padding */
  .ep-topbar,
  .pg-topbar {
    padding: 8px 10px;
    min-height: 50px;
  }

  .ep-topbar > .MuiSvgIcon-root:first-child,
  .pg-topbar > .MuiSvgIcon-root:first-child {
    width: 32px;
    height: 32px;
    padding: 5px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Desktop: wider search on large screens
───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .phc-bar {
    padding: 0;
    box-shadow: none;
  }

  .phc-inner {
    border-radius: 0;
    border: none;
    border-bottom: 3px solid #2e7d32;
    border-bottom: 3px solid var(--phc-green);
    padding: 6px 16px 8px;
    min-height: 77px;   /* ~20% taller than original 64px */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .phc-title-row {
    padding-bottom: 6px;
  }

  .phc-page-title {
    font-size: 16px;
  }

  .phc-row {
    gap: 10px;
    width: 100%;
  }

  .phc-search-input {
    width: 220px;
  }

  .phc-back-label {
    max-width: 160px;
  }
}

/* ─────────────────────────────────────────────────────────────
   SubCategory page — Layout 1 only: title bolder + grey underline
   Scope: :not(body[data-layout2="true"]) — zero effect on Layout 2
───────────────────────────────────────────────────────────────── */
:not(body[data-layout2="true"]) #parent-div .phc-page-title {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: #d0d0d0;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/*# sourceMappingURL=main.5721c13f.css.map*/