/* ════════════════════════════════════════════════════════════
   SAHA — Critical Fixes CSS
   Path: /wp-content/themes/saha-marketplace/assets/saha-critical-fixes.css
   Load AFTER saha-wp.css (and after saha-fixes.css if present)

   FIX 1: Shop/archive — sidebar + grid sit side-by-side, not stacked
   FIX 2: Single product — image no longer oversized, has a max-height
   FIX 3: Variant buttons — proper styled pills/swatches, select hidden
   FIX 4: Mobile hamburger — ensure drawer panel is above everything
════════════════════════════════════════════════════════════ */

/* ── FIX 1: Shop page layout (sidebar beside grid, not stacked) ── */
.collection-layout {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 32px !important;
  align-items: start !important;
}

.collection-layout > aside.sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.collection-layout > div:not(.sidebar) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

@media (max-width: 1024px) {
  .collection-layout {
    grid-template-columns: 1fr !important;
  }
  .collection-layout > aside.sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .collection-layout > div:not(.sidebar) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

/* ── FIX 2: Single product image — cap size, never oversized ── */
.sp-slider-wrap,
.product-slider-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  max-height: 640px !important;
  overflow: hidden !important;
}

.sp-slide__img,
.product-slider .slide img,
.sp-slide img {
  width: 100% !important;
  height: 100% !important;
  max-height: 640px !important;
  object-fit: cover !important;
  display: block !important;
}

.sp-layout,
.product-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start !important;
}

.sp-gallery,
.product-gallery {
  max-width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 768px) {
  .sp-layout,
  .product-layout {
    grid-template-columns: 1fr !important;
  }
  .sp-slider-wrap,
  .product-slider-wrapper {
    aspect-ratio: 1 / 1 !important;
    max-height: 480px !important;
  }
}

/* ── FIX 3: Variant buttons (replaces hidden <select>) ── */

/* Hide the native select once JS has converted it */
form.variations_form select[data-saha-converted="1"],
.variations select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

.sp-var-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 6px 0 16px !important;
}

.sp-var-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--c-border, #e2e5ec) !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-primary, #0a1628) !important;
  cursor: pointer !important;
  transition: border-color .18s, background .18s, color .18s, transform .12s !important;
  line-height: 1 !important;
}

.sp-var-btn:hover {
  border-color: var(--c-primary, #0a1628) !important;
}

.sp-var-btn.is-active {
  background: var(--c-primary, #0a1628) !important;
  border-color: var(--c-primary, #0a1628) !important;
  color: #fff !important;
}

.sp-var-btn.is-unavailable {
  opacity: .35 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
}

/* Color swatch variant */
.sp-var-btn--color {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  position: relative !important;
}

.sp-var-btn--color.is-active::after {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 2px solid var(--c-primary, #0a1628) !important;
}

/* Make sure the variations table doesn't render as an ugly default table */
.variations {
  border: none !important;
  width: 100% !important;
}
.variations tr {
  display: block !important;
  margin-bottom: 4px !important;
}
.variations th,
.variations td {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-align: left !important;
}
.variations .label label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--c-primary, #0a1628) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Hide WooCommerce's "Clear" link — cleaner UI */
.reset_variations {
  display: none !important;
}

/* ── FIX 4: Mobile drawer must sit above everything ── */
.mobile-nav-drawer {
  z-index: 99999 !important;
}
.mobile-nav-drawer__panel {
  z-index: 100000 !important;
}
.mobile-nav-drawer__overlay {
  z-index: 99998 !important;
}

/* Ensure hamburger button is clickable (not covered by another element) */
#mobile-menu-toggle {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* SAHA live polish: header, mobile shop, announcement, product page */
.site-header {
  transition: transform .24s ease, box-shadow .2s ease !important;
}

body.saha-header-hidden .site-header {
  transform: translateY(-110%) !important;
}

.site-header__brand-spacer {
  min-width: clamp(24px, 8vw, 120px) !important;
}

.announcement-bar .container {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

.announcement-bar span,
.announcement-bar a,
.announcement-bar strong {
  font-size: clamp(11px, 2.9vw, 13px) !important;
  white-space: normal !important;
}

.trust-strip--sitewide {
  border-bottom: 1px solid var(--c-border, #e5e7eb) !important;
  background: #fff !important;
}

.trust-strip--sitewide .trust-strip__inner {
  box-shadow: none !important;
}

.saha-mobile-filter-btn,
.saha-mobile-filter-close {
  display: none;
}

@media (max-width: 900px) {
  .site-header {
    --header-height-mobile: 52px !important;
  }

  .site-header .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-header__inner {
    min-height: 52px !important;
    gap: 8px !important;
  }

  .site-header__brand-spacer {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .site-header__actions {
    gap: 2px !important;
  }

  .site-header__icon-btn {
    width: 34px !important;
    height: 34px !important;
  }

  .announcement-bar .container {
    padding: 6px 12px !important;
    gap: 5px !important;
  }

  .trust-strip--sitewide .trust-strip__inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .trust-strip--sitewide .trust-item {
    min-height: 58px !important;
    padding: 12px 8px !important;
  }

  .trust-item__icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
  }

  .trust-item__title {
    font-size: 12.5px !important;
  }

  .trust-item__desc {
    font-size: 11.5px !important;
  }

  .saha-mobile-filter-btn {
    display: flex !important;
    width: calc(100% - 32px) !important;
    margin: 0 auto 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 16px !important;
    border: 1px solid var(--c-border, #e6e8ee) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--c-primary, #183a6b) !important;
    box-shadow: 0 10px 30px rgba(24,58,107,.08) !important;
    font-weight: 800 !important;
  }

  .saha-mobile-filter-btn strong {
    font-size: 11px !important;
    color: var(--c-text-light, #7b8392) !important;
    font-weight: 600 !important;
  }

  .collection-layout {
    display: block !important;
  }

  .collection-layout > aside.sidebar {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: min(88vw, 360px) !important;
    max-width: 360px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 100001 !important;
    background: #fff !important;
    padding: 54px 18px 24px !important;
    box-shadow: -24px 0 70px rgba(10,22,40,.24) !important;
    transform: translateX(105%) !important;
    transition: transform .24s ease !important;
  }

  body.saha-filter-open .collection-layout > aside.sidebar {
    transform: translateX(0) !important;
  }

  body.saha-filter-open::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    background: rgba(10,22,40,.42) !important;
  }

  .saha-mobile-filter-close {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--c-primary, #183a6b) !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  #product-grid,
  .products,
  .grid.grid--3,
  .grid.grid--4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .product-card {
    min-width: 0 !important;
    border-radius: 14px !important;
  }

  .product-card__media {
    aspect-ratio: 3 / 4 !important;
    min-height: 0 !important;
  }

  .product-card__info {
    padding: 12px 10px 14px !important;
  }

  .product-card__vendor,
  .product-card__title {
    font-size: 11.5px !important;
  }

  .product-card__pricing,
  .product-card__pricing .price {
    font-size: 13px !important;
  }

  .product-card__btn {
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 11.5px !important;
  }

  .sp-layout,
  body.single-product .sp-layout {
    display: block !important;
    padding: 18px 14px 34px !important;
  }

  .sp-gallery {
    max-width: 520px !important;
    margin: 0 auto 22px !important;
  }

  .sp-slider-wrap,
  .product-slider-wrapper {
    aspect-ratio: 4 / 5 !important;
    max-height: min(68vh, 520px) !important;
    border-radius: 18px !important;
  }

  .sp-summary {
    padding: 0 !important;
  }
}

/* Keep collection images perfectly centered inside their cards. */
.saha-collection-card__media {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.saha-collection-card__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform-origin: center center !important;
}

.saha-collections-section--title-below .saha-collection-card__img {
  object-position: 50% 50% !important;
}

/* Global polish pass for mobile and product/account reliability. */
.mobile-nav-drawer__logo,
.mobile-nav-drawer__logo img,
.mobile-nav-drawer__header img,
.mobile-nav-drawer__header .custom-logo {
  display: block !important;
  width: auto !important;
  max-width: 132px !important;
  height: auto !important;
  max-height: 38px !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}

.site-header__logo img,
.site-header__logo .custom-logo {
  width: auto !important;
  height: auto !important;
  max-height: 36px !important;
  max-width: 154px !important;
  object-fit: contain !important;
}

/* Do not hide WooCommerce selects until JS has actually built swatches. */
.sp-cart .variations select:not(.saha-select-converted),
form.variations_form select:not(.saha-select-converted) {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  opacity: 1 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  margin: 6px 0 12px !important;
  border: 1px solid var(--c-border, #e2e5ec) !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 0 12px !important;
}

.sp-cart .variations select.saha-select-converted,
form.variations_form select.saha-select-converted {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

.sp-slide:first-child,
.sp-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

.sp-slide:not(.is-active):not(:first-child) {
  opacity: 0 !important;
}

.sp-thumb,
.sp-dot,
.sp-accordion__btn,
.sp-scroll-btn {
  pointer-events: auto !important;
}

.sp-section--brand,
.sp-section--related {
  visibility: visible !important;
  opacity: 1 !important;
}

.sp-section--related .grid {
  display: grid !important;
}

.saha-auth .password-input .show-password-input + .show-password-input,
.saha-auth .woocommerce-password-strength + .show-password-input,
.saha-auth .show-password-input:nth-of-type(n+2) {
  display: none !important;
}

.saha-account,
.saha-account__main,
.saha-account__sidebar {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.saha-account__main {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.saha-account__main table,
.saha-account__main .woocommerce-orders-table {
  max-width: 100% !important;
}

.saha-account__main p,
.saha-account__main td,
.saha-account__main th {
  overflow-wrap: anywhere !important;
}

@media (max-width: 768px) {
  .home .hero,
  .home .hero-section,
  .home .saha-hero,
  body.home .elementor-section:first-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 22px !important;
  }

  .home .saha-collections-section,
  .home .section:has(.saha-collections-grid) {
    margin-top: 0 !important;
    padding-top: 26px !important;
  }

  .sp-wrap {
    padding-top: 14px !important;
  }

  .sp-thumbs {
    padding: 0 2px 4px !important;
  }

  .sp-section {
    padding: 28px 14px 44px !important;
  }

  .sp-section__head {
    align-items: flex-start !important;
    margin-bottom: 16px !important;
  }

  .sp-scroll-track .product-card {
    flex-basis: 168px !important;
  }

  .saha-account {
    display: block !important;
    width: 100% !important;
    padding: 18px 12px 44px !important;
    overflow-x: hidden !important;
  }

  .saha-account__sidebar {
    position: static !important;
    margin-bottom: 14px !important;
  }

  .saha-account__nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .saha-account__nav-item {
    border-left: 0 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }

  .saha-account__main {
    padding: 16px 12px !important;
    border-radius: 16px !important;
  }
}

/* Premium vendor / brand store page */
.vstore {
  background: linear-gradient(180deg, #fff 0%, #fafbff 42%, #fff 100%) !important;
  padding: 26px 0 80px !important;
}

.vstore__hero {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, 380px) !important;
  gap: 24px !important;
  align-items: center !important;
  padding: clamp(22px, 4vw, 42px) !important;
  border: 1px solid rgba(24,58,107,.10) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(27,111,255,.12), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eef5ff 100%) !important;
  box-shadow: 0 24px 70px rgba(24,58,107,.10) !important;
  overflow: hidden !important;
}

.vstore__logo-wrap {
  width: clamp(96px, 10vw, 132px) !important;
  height: clamp(96px, 10vw, 132px) !important;
  border-radius: 24px !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
  border: 1px solid rgba(24,58,107,.12) !important;
  box-shadow: 0 18px 42px rgba(24,58,107,.12) !important;
  overflow: hidden !important;
  padding: 10px !important;
}

.vstore__logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.vstore__eyebrow {
  color: var(--c-accent, #1b6fff) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.vstore__name {
  font-size: clamp(42px, 7vw, 88px) !important;
  line-height: .86 !important;
  letter-spacing: 0 !important;
  margin: 0 0 14px !important;
  color: var(--c-primary, #183a6b) !important;
}

.vstore__stats {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  color: #26364f !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 750 !important;
}

.vstore__stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.vstore__stat strong {
  color: var(--c-accent, #1b6fff) !important;
}

.vstore__desc {
  max-width: 620px !important;
  margin: 14px 0 0 !important;
  color: #647084 !important;
  line-height: 1.7 !important;
  font-size: 14.5px !important;
}

.vstore__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

.vstore__hero-card {
  justify-self: end !important;
  width: 100% !important;
  min-height: 150px !important;
  border-radius: 22px !important;
  padding: 22px !important;
  background: rgba(24,58,107,.92) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.16) !important;
}

.vstore__hero-card span {
  color: #72d5ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.vstore__hero-card strong {
  font-size: clamp(22px, 3vw, 34px) !important;
  line-height: 1 !important;
}

.vstore__hero-card small {
  color: rgba(255,255,255,.72) !important;
  line-height: 1.5 !important;
}

.vstore__divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(24,58,107,.16), transparent) !important;
  margin: 28px 0 !important;
}

.vstore__filters {
  margin-bottom: 18px !important;
  border: 1px solid rgba(24,58,107,.10) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 14px 36px rgba(24,58,107,.06) !important;
}

.vstore-filter-form__row {
  display: grid !important;
  grid-template-columns: minmax(150px,1.2fr) minmax(132px,.9fr) repeat(2, minmax(110px,.7fr)) auto auto auto !important;
  gap: 10px !important;
  align-items: end !important;
}

.vstore-filter-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.vstore-filter-form label > span {
  color: #657083 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.vstore-filter-form select,
.vstore-filter-form input[type="number"] {
  height: 40px !important;
  border: 1px solid rgba(24,58,107,.14) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--c-primary, #183a6b) !important;
  padding: 0 12px !important;
  font-weight: 650 !important;
  min-width: 0 !important;
}

.vstore-filter-form__sale {
  height: 40px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #f4f7ff !important;
}

.vstore-filter-form__sale input {
  accent-color: var(--c-accent, #1b6fff) !important;
}

.vstore-filter-form__clear {
  align-self: center !important;
  color: #657083 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.vstore__toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 16px 0 22px !important;
}

.vstore__count {
  margin: 0 !important;
  color: #657083 !important;
  font-size: 13px !important;
}

.vstore__grid {
  align-items: stretch !important;
}

.vstore__grid .product-card {
  box-shadow: 0 14px 36px rgba(24,58,107,.08) !important;
}

@media (max-width: 1024px) {
  .vstore__hero {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .vstore__hero-card {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    min-height: 104px !important;
  }
  .vstore-filter-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .vstore {
    padding-top: 14px !important;
  }
  .vstore__hero {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }
  .vstore__logo-wrap {
    justify-self: center !important;
    width: 96px !important;
    height: 96px !important;
    border-radius: 20px !important;
  }
  .vstore__name {
    font-size: clamp(38px, 16vw, 64px) !important;
  }
  .vstore__stats,
  .vstore__actions {
    justify-content: center !important;
  }
  .vstore__hero-card {
    text-align: left !important;
    min-height: 96px !important;
    padding: 18px !important;
  }
  .vstore__filters {
    padding: 12px !important;
  }
  .vstore-filter-form__row {
    grid-template-columns: 1fr !important;
  }
  .vstore-filter-form__sale {
    justify-content: flex-start !important;
  }
  .vstore__toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .vstore__toolbar .saha-ordering select,
  .vstore__toolbar select {
    width: 100% !important;
  }
  .vstore__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 420px) {
  #product-grid,
  .products,
  .grid.grid--3,
  .grid.grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .product-card__actions {
    gap: 7px !important;
  }

  .product-card__btn--buynow {
    display: none !important;
  }
}

/* Product-card image recovery: never let archive cards render blank. */
.product-card__media {
  background: #f6f7f9 !important;
  isolation: isolate !important;
}

.product-card__img-track {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.product-card__img-track .product-card__img,
.product-card__img-track img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.product-card__img-track--multi .product-card__img:first-child,
.product-card__img-track--multi .product-card__img.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

.product-card__img-track--multi .product-card__img:not(.is-active):not(:first-child) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.product-card__media .wishlist-btn,
.product-card__media .pc-arrow,
.product-card__media .pc-dots {
  pointer-events: auto !important;
}

.product-card__media .wishlist-btn {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 30 !important;
}

.product-card__media .pc-arrow {
  display: grid !important;
  visibility: visible !important;
}

.product-card__media .pc-dots {
  display: flex !important;
  visibility: visible !important;
}

.product-card__img-track {
  cursor: pointer !important;
  z-index: 1 !important;
}

@media (max-width: 900px) {
  .pc-arrow,
  .pc-dots {
    opacity: 1 !important;
  }

  .pc-arrow {
    width: 30px !important;
    height: 30px !important;
  }

  .pc-arrow--prev { left: 7px !important; }
  .pc-arrow--next { right: 7px !important; }

  .pc-dots {
    bottom: 8px !important;
  }
}