/* =====================================================================
   TaakTel — header / mega menu / contact / mobile overhaul
   Loaded after style.css and pages.css, so it wins over both.
   ===================================================================== */

/* --- global helpers ------------------------------------------------- */

/*
  Layering used by this theme (highest wins):
    10050  contact modal
     9999  mobile navigation drawer   (set by style.css)
     9990  mega menu on mobile
     9980  floating contact button
     1000  sticky header
*/

body.no-scroll {
  overflow: hidden;
}

/* while a drawer or a modal is open nothing else may float on top */
body.no-scroll .floating-contact-btn,
body.no-scroll .scroll-top-btn {
  display: none;
}

*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
}

/* nothing may push the page sideways on a phone */
html,
body {
  overflow-x: hidden;
}

/* =====================================================================
   Header — top bar navigation dropdowns
   ===================================================================== */

.nav-menu > li {
  position: relative;
}

.nav-menu li a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-menu-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.nav-menu li.has-dropdown:hover .nav-menu-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 210px;
  margin-top: 10px;
  padding: var(--spacing-sm);
  list-style: none;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition-normal);
  z-index: 999;
}

/* invisible bridge so the pointer can travel to the dropdown */
.nav-menu li.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 14px;
}

.nav-menu li.has-dropdown:hover .nav-dropdown,
.nav-menu li.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown li a {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 9px var(--spacing-smd);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.nav-dropdown li a:hover {
  background: var(--primary-blue-lighter);
  color: var(--primary-blue);
}

.nav-dropdown li a i {
  font-size: 16px;
  color: var(--primary-blue-light);
}

/* =====================================================================
   Header — bottom bar (category button + links + phone)
   ===================================================================== */

.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.bottom-bar-start {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  min-width: 0;
  flex: 1 1 auto;
}

/* the category trigger is a <button> now — reset the chrome a button brings
   but keep the gradient defined in style.css */
.category-btn {
  border: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.bottom-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-smd);
  min-width: 0;
  overflow: hidden;
}

.bottom-links a {
  white-space: nowrap;
}

/* phone block on the far side of the bottom bar */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px var(--spacing-smd) 6px 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-light);
  text-decoration: none;
  transition: var(--transition-normal);
  flex: 0 0 auto;
}

.header-phone:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-light);
  transform: translateY(-1px);
}

.header-phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-gradient);
  flex-shrink: 0;
}

.header-phone-icon svg {
  width: 15px;
  height: 15px;
  color: #fff;
}

.header-phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.header-phone-label {
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

.header-phone-number {
  font-size: var(--font-size-base);
  font-weight: 700;
  direction: ltr;
  text-align: right;
}

/* =====================================================================
   Mega menu — desktop behaviour + dynamic panels
   ===================================================================== */

.category-btn-wrapper {
  position: relative;
}

/* the old hover-only rule is replaced by an explicit open state so the
   menu also works on touch devices */
.category-btn-wrapper.mega-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 992px) {
  .category-btn-wrapper:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.mega-category-link {
  width: 100%;
}

.mega-category-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mega-category-link .category-icon-box i {
  font-size: 18px;
  line-height: 1;
}

/* the content area now hosts one panel per sidebar entry */
.mega-menu-content {
  display: block;
  min-width: 0;
}

/* content panels: only the active one is visible on desktop */
.mega-panel {
  display: none;
  gap: var(--spacing-lg);
  width: 100%;
}

.mega-panel.active {
  display: flex;
  align-items: flex-start;
}

.mega-panel-main {
  flex: 1 1 auto;
  min-width: 0;
}

.mega-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.mega-panel-head .mega-content-title {
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.mega-panel-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--primary-blue);
  text-decoration: none;
  white-space: nowrap;
}

.mega-panel-all:hover {
  color: var(--primary-blue-light);
}

.mega-panel-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md) var(--spacing-lg);
}

.mega-panel-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.mega-content-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.mega-content-link i {
  font-size: 15px;
  color: var(--primary-blue-light);
}

/* the featured slot holds an admin uploaded banner now */
.mega-featured-product {
  flex: 0 0 212px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  height: auto;
  min-height: 240px;
  text-decoration: none;
}

.mega-featured-product .mega-featured-image {
  width: 100%;
  height: auto;
  max-height: 210px;
  object-fit: contain;
  margin: 0;
}

.mega-featured-product .mega-featured-title {
  display: block;
  margin: 0;
}

.mega-footer-link i {
  font-size: 16px;
}

/* the inline sub lists are only used by the mobile accordion */
.mega-mobile-sublist {
  display: none;
}

/* =====================================================================
   Mega menu — mobile (full screen drawer with accordion)
   ===================================================================== */

@media (max-width: 991px) {
  .mega-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 60px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 9990;
    transform: none;
  }

  /* a sticky :hover on a touch device must not open the menu, only the
     explicit open state may — this rule has to stay before the open one */
  .category-btn-wrapper:hover .mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .category-btn-wrapper.mega-open .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .mega-menu::before,
  .mega-menu::after {
    display: none;
  }

  /* the invisible hover bridge would swallow taps next to the button */
  .category-btn-wrapper::after {
    display: none;
  }

  .mega-menu-close {
    display: flex;
    position: fixed;
    top: 10px;
    left: 12px;
    right: auto;
    width: 40px;
    height: 40px;
    z-index: 9991;
  }

  .mega-menu-sidebar {
    order: 1;
    margin: 0;
    border-radius: 0;
    padding: var(--spacing-md);
    background: transparent;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    width: 100%;
  }

  .mega-menu-content {
    display: none;
  }

  .mega-category-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mega-category-item {
    border-bottom: 1px solid var(--border-dark);
  }

  .mega-category-link {
    padding: var(--spacing-smd) var(--spacing-sm);
    font-size: var(--font-size-base);
  }

  .mega-category-link .arrow-icon {
    transform: rotate(-90deg);
    opacity: 0.6;
    transition: transform var(--transition-fast);
    padding: 6px;
    box-sizing: content-box;
  }

  .mega-category-item.expanded .arrow-icon {
    transform: rotate(90deg);
  }

  .mega-mobile-sublist {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0 var(--spacing-xl) 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .mega-category-item.expanded .mega-mobile-sublist {
    max-height: 1200px;
    padding-bottom: var(--spacing-sm);
  }

  .mega-mobile-sublist a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: none;
  }

  .mega-menu-footer {
    order: 3;
    margin-top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-smd);
    padding: var(--spacing-md);
  }

  .mega-footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .mega-view-all-btn {
    justify-content: center;
  }
}

/* =====================================================================
   Mobile navigation drawer
   ===================================================================== */

/* the drawer is wider than the 300px the base stylesheet assumes, so it is
   animated with a transform instead of a hardcoded negative offset */
.mobile-nav-content {
  display: flex;
  flex-direction: column;
  right: 0;
  width: 88vw;
  max-width: 340px;
  height: 100%;
  overflow: hidden;
  transform: translateX(105%);
  transition: transform 0.3s ease;
}

.mobile-nav.active .mobile-nav-content {
  right: 0;
  transform: translateX(0);
}

.mobile-nav-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-md);
}

.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) 0;
}

.mobile-nav-menu li a {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.mobile-nav-menu li a i {
  font-size: 18px;
  color: var(--primary-blue-light);
  width: 22px;
  text-align: center;
}

.mobile-nav-section {
  border-top: 1px solid var(--border-dark);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

.mobile-nav-section-title {
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-muted);
}

.mobile-nav-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--spacing-sm);
  padding: var(--spacing-smd) var(--spacing-md);
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: right;
}

.mobile-nav-accordion-toggle > span {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.mobile-nav-accordion-toggle i {
  font-size: 18px;
  color: var(--primary-blue-light);
  width: 22px;
  text-align: center;
}

.mobile-nav-accordion-toggle .chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform var(--transition-fast);
}

.mobile-nav-accordion.expanded .mobile-nav-accordion-toggle .chevron {
  transform: rotate(180deg);
}

.mobile-nav-accordion.expanded .mobile-nav-accordion-toggle {
  color: var(--primary-blue);
}

.mobile-nav-sublist {
  list-style: none;
  margin: 0;
  padding: 0 var(--spacing-2xl) 0 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-nav-accordion.expanded .mobile-nav-sublist {
  max-height: 1200px;
  padding-bottom: var(--spacing-sm);
}

.mobile-nav-sublist a {
  display: block;
  padding: 9px var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.mobile-nav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
}

.mobile-nav-chips a {
  display: inline-block;
  padding: 6px var(--spacing-smd);
  border-radius: var(--radius-full);
  background: var(--bg-light);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.mobile-nav-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-dark);
  background: var(--bg-card);
}

.mobile-nav-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-smd);
  border-radius: var(--radius-full);
  background: var(--bg-light);
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--font-size-base);
  text-decoration: none;
  direction: ltr;
}

.mobile-nav-phone i {
  font-size: 18px;
  color: var(--primary-blue);
}

/* =====================================================================
   Floating contact button + modal
   ===================================================================== */

.floating-contact-btn {
  position: fixed;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
  z-index: 9980;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-md) 10px;
  border: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--primary-gradient);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 17, 255, 0.35);
  transition: var(--transition-normal);
  overflow: hidden;
}

.floating-contact-btn:hover {
  box-shadow: 0 8px 30px rgba(0, 17, 255, 0.5);
}

.floating-contact-icon {
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 2;
}

.floating-contact-label {
  writing-mode: vertical-rl;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 2;
}

.floating-contact-pulse {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
  animation: floating-contact-pulse 2.4s ease-out infinite;
  z-index: 1;
}

@keyframes floating-contact-pulse {
  0% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  70% {
    opacity: 0;
    transform: scale(1.12);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

.contact-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}

.contact-modal.active {
  opacity: 1;
  visibility: visible;
}

.contact-modal-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(8, 0, 60, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.contact-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-lg);
  transform: translateY(18px) scale(0.98);
  transition: var(--transition-normal);
}

.contact-modal.active .contact-modal-dialog {
  transform: translateY(0) scale(1);
}

.contact-modal-close {
  position: absolute;
  top: var(--spacing-smd);
  left: var(--spacing-smd);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  z-index: 2;
}

.contact-modal-close:hover {
  background: var(--accent-red);
  color: #fff;
}

.contact-modal-close svg {
  width: 17px;
  height: 17px;
}

.contact-modal-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-smd);
  margin-bottom: var(--spacing-lg);
  padding-left: var(--spacing-2xl);
}

.contact-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #fff;
  flex-shrink: 0;
}

.contact-modal-icon svg {
  width: 22px;
  height: 22px;
}

.contact-modal-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--text-primary);
}

.contact-modal-subtitle {
  margin: 2px 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.contact-modal-body {
  display: grid;
  gap: var(--spacing-sm);
}

.contact-method {
  display: flex;
  align-items: center;
  gap: var(--spacing-smd);
  padding: var(--spacing-smd);
  border-radius: var(--radius-sm);
  background: var(--bg-light);
  border: 1px solid transparent;
  text-decoration: none;
  transition: var(--transition-normal);
}

.contact-method:hover {
  background: var(--bg-card);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-sm);
  transform: translateX(-3px);
}

.contact-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
  background: var(--primary-blue-light);
}

.contact-method-icon i {
  font-size: 21px;
  line-height: 1;
}

.contact-method--phone .contact-method-icon,
.contact-method--mobile .contact-method-icon {
  background: linear-gradient(135deg, #0011ff, #5a6dff);
}

.contact-method--email .contact-method-icon {
  background: linear-gradient(135deg, #ff5600, #fb8f4d);
}

.contact-method--whatsapp .contact-method-icon {
  background: linear-gradient(135deg, #25d366, #128c7e);
}

.contact-method--telegram .contact-method-icon {
  background: linear-gradient(135deg, #29b6f6, #0088cc);
}

.contact-method--eitaa .contact-method-icon {
  background: linear-gradient(135deg, #ffb347, #f57c00);
}

.contact-method--rubika .contact-method-icon {
  background: linear-gradient(135deg, #8e24aa, #5e35b1);
}

.contact-method--instagram .contact-method-icon {
  background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7);
}

.contact-method-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.contact-method-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.contact-method-value {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: right;
}

.contact-method-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.contact-method:hover .contact-method-arrow {
  color: var(--primary-blue);
  transform: translateX(-3px);
}

.contact-modal-footer {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-smd);
  border-top: 1px dashed var(--border-dark);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

.contact-modal-footer i {
  font-size: 18px;
  color: var(--primary-blue-light);
  flex-shrink: 0;
}

/* =====================================================================
   Footer
   ===================================================================== */

.footer-useful-links {
  background: var(--bg-light);
  border-top: 1px solid var(--border-dark);
  padding: var(--spacing-smd) 0;
  margin-top: var(--spacing-lg);
}

.footer-useful-links__list a {
  color: var(--text-secondary);
}

.footer-useful-links__list a:hover {
  color: var(--primary-blue);
  background: #fff;
  border-color: var(--border-dark);
}

.contact-card {
  text-decoration: none;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-smd);
  margin-top: var(--spacing-md);
}

.footer-badge img {
  max-width: 90px;
  height: auto;
}

/* =====================================================================
   Categories widget
   ===================================================================== */

/* the section is already inside the page container, so the extra side
   padding only made it narrower than every other widget — the space it
   needs is above it, away from the hero slider */
.categories-section {
  padding: 0;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

/* two column grid on phones (no slider) */
.categories-slider.categories-grid .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-smd);
  transform: none !important;
  width: 100% !important;
}

.categories-slider.categories-grid .swiper-slide {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
}

.category-item {
  width: 100%;
  justify-content: center;
}

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

/* =====================================================================
   Special offer widget — full width card + slider under it on mobile
   ===================================================================== */

@media (max-width: 991px) {
  .special-offer-section {
    padding: var(--spacing-md) 0;
  }

  .special-offer-section .row {
    row-gap: var(--spacing-smd);
  }

  .special-offer-card {
    min-height: 0;
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    text-align: right;
  }

  .special-offer-bg {
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .special-offer-bg svg {
    width: 100%;
    height: 100%;
    transform: scale(1.7);
  }

  .special-offer-bg::after {
    width: 100%;
    height: 100%;
  }

  .special-offer-content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px var(--spacing-md);
  }

  .offer-title {
    font-size: var(--font-size-lg);
    margin-bottom: 0;
  }

  .offer-desc {
    font-size: var(--font-size-xs);
    margin-bottom: 0;
    line-height: 1.6;
  }

  .big-percent {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-size: 2.4rem;
    margin-bottom: 0;
    align-self: center;
  }

  /* label and timer share one line, pushed to opposite ends */
  .countdown-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-smd);
    margin-top: var(--spacing-sm);
  }

  .countdown-label {
    margin: 0;
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  .timer-box {
    justify-content: flex-end;
    flex: 0 0 auto;
  }

  .timer-unit {
    width: 34px;
    height: 34px;
    font-size: var(--font-size-base);
  }

  .special-offer-slider-container > .special-nav-btn {
    display: none;
  }

  .special-offer-slider {
    padding: var(--spacing-sm) 0 !important;
  }
}

/* =====================================================================
   Blog widget — one swipeable line on mobile
   ===================================================================== */

@media (max-width: 991px) {
  .blog-section {
    padding: var(--spacing-lg) 0;
  }

  .blog-grid {
    display: flex;
    grid-template-columns: none;
    align-items: stretch;
    gap: var(--spacing-smd);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .blog-grid::-webkit-scrollbar {
    display: none;
  }

  .blog-grid > .blog-featured-card,
  .blog-grid > .blog-card,
  .blog-card:nth-child(2),
  .blog-card:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
  }

  .featured-slide-content {
    min-height: 300px;
  }

  /* the featured card keeps auto-rotating, but its own touch handling is
     switched off in main.js so a horizontal drag scrolls the outer line */
  .blog-featured-card {
    height: auto;
  }

  .blog-card {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .blog-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .blog-card-footer {
    margin-top: auto;
  }
}

@media (max-width: 575px) {
  .blog-grid > .blog-featured-card,
  .blog-grid > .blog-card,
  .blog-card:nth-child(2),
  .blog-card:nth-child(3) {
    flex: 0 0 90%;
    max-width: 90%;
  }
}

/* =====================================================================
   Banners
   ===================================================================== */

.dual-banner-grid--1 {
  grid-template-columns: 1fr;
}

.dual-banner-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  .dual-banner-section {
    padding: var(--spacing-smd) 0;
  }

  .dual-banner-grid,
  .dual-banner-grid--1,
  .dual-banner-grid--3 {
    grid-template-columns: 1fr;
    gap: var(--spacing-smd);
  }

  .dual-banner-item,
  .dual-banner-item img {
    border-radius: var(--radius-sm);
  }

  .banner-section {
    padding: var(--spacing-smd) 0;
  }
}

/* =====================================================================
   Product listing pages (category / search / brand / discounts …)
   ===================================================================== */

/*
  Grid and flex items default to `min-width: auto`, which means they refuse to
  shrink below the intrinsic width of their content. #category-products-div
  (.tt-category__main) had no rules at all, so a single wide descendant — a
  nowrap price, the sort row — pushed the whole grid column past the container
  and the page scrolled sideways on mobile.

  Every item along that chain is opted out of the behaviour here so the layout
  can always shrink to the container, and the wide bits scroll inside
  themselves instead of pushing their parent.
*/
.tt-category__layout,
.tt-category__layout > *,
.tt-category__main,
.tt-category__main > *,
.tt-hero-card__inner > *,
.tt-sub-cats,
.tt-toolbar,
.tt-toolbar > *,
.tt-sort,
.category-product-div,
.category-product-div > *,
.card-footer-external,
.price-section {
  min-width: 0;
}

/* the product row must never be wider than the column that holds it */
.tt-category__main .row {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

/*
  The white card shape is an inline <svg> stretched behind the content. Its
  viewBox is 219x264 and it used to keep that ratio (the default
  `xMidYMid meet`), so on any card that was not exactly that shape it shrank
  and centred itself — leaving the title and the price outside the white area
  and a big transparent margin around every tile. The templates now carry
  `preserveAspectRatio="none"`; these rules make the box it stretches into
  behave predictably.
*/
.svg-background svg {
  width: 100%;
  height: 100%;
}

/* every tile fills its column and lines up with its neighbours, with the
   same gap horizontally and vertically */
.category-product-div {
  display: flex;
  padding: 8px !important;
  margin-bottom: 0;
}

.category-product-div > .popular-product-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
  justify-content: space-between;
}

.category-product-div .card-upper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.category-product-div .card-content {
  flex: 1 1 auto;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

/* the title stays inside the card: two clamped lines, never wider than it */
.category-product-div .popular-product-title {
  width: 100%;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* the price may wrap rather than be clipped or push the card wider */
.category-product-div .price-section {
  min-width: 0;
  overflow: hidden;
}

.category-product-div .current-price {
  white-space: normal;
  overflow-wrap: anywhere;
}

.category-product-div .old-price {
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  Sort tabs.

  The control reuses the legacy `.ah-tab` markup, whose stylesheet is bundled
  *after* pages.css and (a) resets `padding: 0` on every descendant,
  (b) clips overflow, (c) squeezes letter-spacing to -0.3em and (d) paints two
  white gradient overlays over the ends. On top of that the old horizontalmenu
  plugin translated the items with inline transforms. The plugin is gone now,
  so the row is a plain scroller and all four leftovers are undone here.
*/
.tt-sort {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-sm);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tt-sort::-webkit-scrollbar {
  display: none;
}

.tt-sort .ah-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: visible;
  letter-spacing: normal;
  white-space: nowrap;
  transform: none !important;
}

.tt-sort .ah-tab::before,
.tt-sort .ah-tab::after {
  display: none;
}

/* the plugin used to leave inline transforms on the items */
.tt-sort .ah-tab-item {
  transform: none !important;
}

.tt-sort .tt-sort__item {
  flex: 0 0 auto;
  padding: 8px var(--spacing-md);
  letter-spacing: normal;
  white-space: nowrap;
}

/* the active tab had `padding: 10px !important`, which made it visibly
   narrower than its neighbours and shifted the whole row */
.tt-sort .tt-sort__item[data-ah-tab-active="true"],
.tt-sort .tt-sort__item.is-active {
  padding: 8px var(--spacing-md) !important;
}

.tt-sort .tt-sort__label {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* the overflow dropdown the plugin injected is no longer used */
.tt-sort .ah-tab-overflow-wrapper {
  display: none !important;
}

@media (max-width: 991px) {
  .tt-category {
    padding-block: var(--spacing-smd);
  }

  /* ---- hero card ---- */
  .tt-hero-card {
    padding: var(--spacing-md) var(--spacing-smd);
    margin-top: var(--spacing-smd);
    margin-bottom: var(--spacing-smd);
    border-radius: var(--radius-sm);
  }

  .tt-hero-card__inner {
    gap: var(--spacing-smd);
  }

  /* the breadcrumb must never wrap into a tall stack */
  .tt-breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    font-size: var(--font-size-xs);
    padding-bottom: 2px;
  }

  .tt-breadcrumb::-webkit-scrollbar {
    display: none;
  }

  .tt-breadcrumb a,
  .tt-breadcrumb span {
    white-space: nowrap;
  }

  .tt-hero-card__heading {
    flex-wrap: wrap;
    align-items: center;
  }

  .tt-hero-card .tt-icon-wrapper {
    width: 40px;
    height: 40px;
    font-size: 19px;
    flex-shrink: 0;
  }

  .tt-hero-card .tt-title-main {
    font-size: var(--font-size-md);
    line-height: 1.5;
  }

  .tt-hero-card__badge {
    font-size: var(--font-size-xs);
    padding: 4px var(--spacing-sm);
  }

  .tt-hero-card__desc {
    font-size: var(--font-size-sm);
    line-height: 1.8;
  }

  /* sub category chips scroll sideways instead of stacking */
  .tt-sub-cats__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .tt-sub-cats__list::-webkit-scrollbar {
    display: none;
  }

  .tt-sub-cats__chip {
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
  }

  /* ---- filters ---- */
  .tt-filter-toggle {
    display: flex;
    width: 100%;
  }

  .tt-filter {
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-smd);
  }

  /* ---- toolbar ---- */
  .tt-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-smd);
    border-radius: var(--radius-sm);
  }

  .tt-toolbar__count {
    font-size: var(--font-size-sm);
  }

  /* the five sort tabs become one swipeable row */
  .tt-sort {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    padding: 4px;
    border-radius: var(--radius-full);
  }

  .tt-sort::-webkit-scrollbar {
    display: none;
  }

  .tt-sort__label {
    display: none;
  }

  .tt-sort .tt-sort__item {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 7px var(--spacing-smd);
    font-size: var(--font-size-sm);
  }

  .tt-sort__item[data-ah-tab-active="true"],
  .tt-sort__item.is-active {
    padding: 7px var(--spacing-smd) !important;
  }

  /* ---- product tiles at two per row ---- */
  .category-product-div {
    padding: 6px !important;
  }

  .category-product-div .card-upper {
    padding-bottom: var(--spacing-md);
  }

  /* the stock padding is 48px, far too much for a half-width tile */
  .category-product-div .card-content {
    padding: var(--spacing-md) var(--spacing-smd) var(--spacing-sm);
  }

  .category-product-div .popular-product-image {
    width: 100%;
    max-width: 120px;
    height: 105px;
    margin-bottom: var(--spacing-sm);
  }

  .category-product-div .color-dots {
    margin-bottom: var(--spacing-xs);
  }

  /* a fixed height keeps the price rows of both tiles on the same line */
  .category-product-div .popular-product-title {
    font-size: var(--font-size-sm);
    height: 40px;
    line-height: 1.6;
    margin-bottom: 0;
  }

  .category-product-div .card-footer-external {
    padding: var(--spacing-sm) 4px 0;
    gap: var(--spacing-xs);
  }

  .category-product-div .btn-add-cart,
  .category-product-div .btn-wishlist {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .category-product-div .btn-add-cart img,
  .category-product-div .btn-wishlist img {
    width: 15px;
    height: 15px;
  }

  .category-product-div .current-price {
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }

  .category-product-div .current-price .currency {
    font-size: 9px;
  }

  .category-product-div .old-price {
    font-size: 10px;
  }

  .category-product-div .discount-badge {
    font-size: 11px;
    padding: 3px 10px;
    top: 8px;
    box-shadow: 0 2px 10px rgb(157 222 74 / 70%);
  }

  /* ---- pagination ---- */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-md);
  }

  .pagination a {
    margin: 0;
  }

  /* ---- category description ---- */
  .tt-cat-desc {
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
  }

  .tt-cat-desc__inner {
    font-size: var(--font-size-sm);
    line-height: 2;
  }

  .tt-cat-desc__inner img,
  .tt-cat-desc__inner table,
  .tt-cat-desc__inner iframe {
    max-width: 100%;
    height: auto;
  }

  /* ---- empty state ---- */
  .tt-empty {
    padding: var(--spacing-2xl) var(--spacing-md);
    border-radius: var(--radius-sm);
  }

  .tt-empty__actions {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .tt-empty__actions .tt-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .category-product-div .card-content {
    padding: var(--spacing-smd) var(--spacing-sm) var(--spacing-xs);
  }

  .category-product-div .popular-product-image {
    max-width: 92px;
    height: 88px;
  }

  .category-product-div .popular-product-title {
    font-size: var(--font-size-xs);
    height: 34px;
  }

  .category-product-div .current-price {
    font-size: var(--font-size-xs);
  }

  .category-product-div .btn-add-cart,
  .category-product-div .btn-wishlist {
    width: 28px;
    height: 28px;
  }
}

/* =====================================================================
   Mobile layout overhaul
   ===================================================================== */

@media (max-width: 991px) {
  /* one consistent gutter for the whole page */
  .container,
  .main-container {
    padding-right: var(--spacing-smd);
    padding-left: var(--spacing-smd);
    max-width: 100%;
  }

  /*
    Two bootstrap builds are loaded and the v4 one wins, so `.row` carries
    `margin: 0 -15px`. That assumes a 15px container gutter; the mobile gutter
    here is smaller, so every row hung 3-7px past its container on both sides
    and the page read as clipped. Neutralise the negative margins and let the
    columns supply the gutter instead.
  */
  .container .row,
  .main-container .row {
    margin-right: 0;
    margin-left: 0;
  }

  .container .row > [class*="col-"],
  .main-container .row > [class*="col-"] {
    padding-right: var(--spacing-sm);
    padding-left: var(--spacing-sm);
  }

  .main-content {
    margin-top: var(--spacing-md) !important;
  }

  /* header */
  .custom-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .top-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo . actions"
      "search search search";
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-smd);
  }

  .right-section {
    grid-area: logo;
  }

  .left-section {
    grid-area: actions;
    justify-content: flex-end;
  }

  .header-search-box.mobile-search {
    grid-area: search;
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  .header-search-box.mobile-search input {
    height: 42px;
    border-radius: var(--radius-full);
  }

  .bottom-bar {
    height: auto;
    padding: var(--spacing-sm) var(--spacing-smd);
    gap: var(--spacing-sm);
  }

  .category-btn span {
    display: inline;
    font-size: var(--font-size-sm);
  }

  /* the extra links move into the drawer on small screens */
  .bottom-links {
    display: none;
  }

  .header-phone {
    padding: 4px var(--spacing-sm) 4px 4px;
  }

  .header-phone-label {
    display: none;
  }

  .header-phone-icon {
    width: 26px;
    height: 26px;
  }

  .header-phone-number {
    font-size: var(--font-size-sm);
  }

  /* hero slider */
  .hero-section {
    padding: 0;
    margin-bottom: var(--spacing-smd);
  }

  .hero-slider,
  .hero-slider .swiper-slide img {
    border-radius: var(--radius-sm);
  }

  .hero-slider .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
  }

  .hero-slider .swiper-pagination {
    display: flex;
    position: absolute;
    right: 50%;
    left: auto;
    bottom: 8px;
    transform: translateX(50%);
    width: auto;
    padding: 5px 10px;
    gap: 5px;
  }

  .hero-slider .swiper-pagination-bullet {
    width: 16px;
    height: 3px;
  }

  .hero-slider .swiper-pagination-bullet-active {
    width: 22px;
  }

  /* categories */
  .categories-section {
    padding: 0;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-smd);
  }

  /* section headers */
  .slider-header,
  .special-offer-header,
  .blog-header {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .popular-title-main,
  .featured-title-main,
  .special-offer-title-main,
  .blog-title-main {
    font-size: var(--font-size-md);
  }

  .popular-title-sub,
  .featured-title-sub,
  .special-offer-title-sub,
  .blog-title-sub {
    font-size: var(--font-size-sm);
  }

  .popular-icon-wrapper,
  .featured-icon-wrapper,
  .special-offer-icon-wrapper,
  .blog-icon-wrapper {
    width: 38px;
    height: 38px;
  }

  .tabs-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .tabs-container::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    white-space: nowrap;
    font-size: var(--font-size-sm);
  }

  /* footer */
  .footer-wrapper {
    margin-top: var(--spacing-xl);
  }

  .custom-footer {
    padding-top: var(--spacing-2xl);
  }

  .custom-footer .container {
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
  }

  .footer-logo img {
    width: 170px;
    margin-bottom: var(--spacing-smd);
  }

  .footer-desc {
    margin-top: var(--spacing-smd);
    font-size: var(--font-size-sm);
  }

  .footer-title {
    margin-bottom: var(--spacing-smd);
    font-size: var(--font-size-base);
  }

  .footer-links li {
    margin-bottom: var(--spacing-sm);
  }

  .footer-links a {
    font-size: var(--font-size-sm);
  }

  .contact-card {
    padding: var(--spacing-sm) var(--spacing-smd);
  }

  .contact-icon-box {
    width: 40px;
    height: 40px;
  }

  .contact-icon-box img {
    width: 18px;
    height: 18px;
  }

  .copyright-bar {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-smd) 0;
  }

  .copyright-content {
    justify-content: center;
    text-align: center;
    font-size: var(--font-size-xs);
  }

  .footer-useful-links__list {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--spacing-md);
  }

  .footer-useful-links__list::-webkit-scrollbar {
    display: none;
  }

  .footer-useful-links__list a {
    white-space: nowrap;
    font-size: var(--font-size-xs);
  }

  /* floating contact */
  .floating-contact-btn {
    top: auto;
    bottom: 86px;
    right: var(--spacing-smd);
    left: auto;
    transform: none;
    flex-direction: row;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .floating-contact-label {
    display: none;
  }

  .scroll-top-btn {
    width: 42px;
    height: 42px;
    top: -21px;
  }
}

@media (max-width: 575px) {
  .container,
  .main-container {
    padding-right: var(--spacing-sm);
    padding-left: var(--spacing-sm);
  }

  .logo-placeholder {
    width: 110px;
    height: auto;
  }

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

  .categories-slider.categories-grid .swiper-wrapper {
    gap: var(--spacing-sm);
  }

  .special-offer-content .offer-desc {
    display: none;
  }

  .contact-modal-dialog {
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
  }

  .contact-modal-header {
    padding-left: var(--spacing-xl);
    margin-bottom: var(--spacing-smd);
  }

  .contact-method {
    padding: var(--spacing-sm);
  }

  .contact-method-icon {
    width: 38px;
    height: 38px;
  }

  .custom-footer .container {
    padding-right: var(--spacing-smd);
    padding-left: var(--spacing-smd);
  }
}