/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(251, 249, 242, 0.85);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
}

.site-header__inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0 var(--space-margin);
}

/* Mobile bar runs smaller/tighter than the desktop one — a phone header
   doesn't need 44px touch targets on every single icon to stay usable, and
   the previous sizing (full 44px icons + 32px logo + headline-sm title) read
   as oversized/cluttered on a narrow screen. */
.site-header__inner--mobile {
  height: 56px;
  gap: var(--space-xs);
}

.site-header__inner--mobile .icon-btn {
  width: 36px;
  height: 36px;
}

.site-header__inner--mobile .icon-btn .material-symbols-outlined,
.site-header__inner--mobile .icon-btn i {
  font-size: 18px !important;
}

.site-header__inner--mobile .brand img {
  height: 24px;
}

.site-header__inner--mobile .brand span {
  font-size: var(--text-label-lg);
}

/* The centered mobile logo replaces the old left-aligned logo + "Mağaza"
   title combo — sized up so it reads as the header's focal point rather
   than a small corner mark. */
.site-header__inner--mobile .brand.header-brand--centered img {
  height: 48px;
}

.site-header__inner--mobile .header-account-avatar {
  width: 28px !important;
  height: 28px !important;
}

/* Search overlay — tapping the header search icon drops this down instead of
   navigating away immediately, so typing and submitting happen in place. */
.header-search-bar {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-sm) var(--space-margin);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  border-top: 1px solid var(--color-surface-container-high);
}

.header-search-bar.is-open {
  display: flex;
}

.header-search-bar__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: none;
  background: var(--color-surface-container-low);
  border-radius: var(--radius-full);
  padding: 0 var(--space-md);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
}

.header-search-bar__input:focus {
  outline: none;
  background: var(--color-surface-container);
}

/*
  The mobile/desktop header split relies on Bootstrap's d-none/d-lg-flex
  utility classes for show/hide. Those come from the Bootstrap CDN — if that
  request is slow or fails on a flaky mobile connection, Bootstrap's classes
  never apply, but `.site-header__inner { display: flex }` above still does,
  so BOTH header variants render at once. The desktop bar alone (nav links +
  centered logo + more nav links + icons) is far wider than a phone screen,
  which is exactly the horizontal drag/overflow being reported. These rules
  are the authoritative source of truth for which bar shows at which width,
  independent of whether Bootstrap's CSS loaded at all.
*/
.site-header__inner--desktop {
  display: none !important;
}

@media (min-width: 992px) {
  .site-header__inner--mobile {
    display: none !important;
  }

  .site-header__inner--desktop {
    display: flex !important;
  }
}

/* Offcanvas main menu — match brand colors instead of Bootstrap's defaults */
#mainMenu {
  background: var(--color-surface);
  /* Bootstrap's default offcanvas width (400px) is wider than most phone
     screens, so it reads as "fills the whole screen" instead of a side
     panel. Cap it to a sane phone-menu width with room to see the dimmed
     page behind it. */
  width: min(80vw, 320px) !important;
}

#mainMenu .offcanvas-title {
  color: var(--color-on-surface);
}

#mainMenu .nav-link {
  color: var(--color-on-surface);
  font-size: var(--text-label-lg);
  font-weight: 500;
}

#mainMenu .nav-link:hover,
#mainMenu .nav-link:focus {
  color: var(--color-secondary);
}

/* Menu list cards — grouped rows (icon badge + label + chevron) matching the
   card language already used on the Kategoriler and product pages, instead
   of bare text links. */
.menu-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.menu-card__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  color: var(--color-on-surface);
  text-decoration: none;
  border-bottom: 1px solid var(--color-surface-container-high);
  -webkit-tap-highlight-color: transparent;
}

.menu-card__item:last-child {
  border-bottom: none;
}

.menu-card__item:active {
  background: var(--color-surface-container-low);
}

.menu-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container);
  color: var(--color-secondary);
  flex-shrink: 0;
  font-size: 1rem;
}

.menu-card__label {
  flex: 1;
  min-width: 0;
  font-size: var(--text-label-lg);
  font-weight: 500;
}

.menu-section-title {
  font-size: var(--text-label-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-xs);
}

.menu-account-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.menu-account-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--text-headline-sm);
}

.menu-account-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-sm);
  line-height: 1.2;
}

.menu-account-card__subtitle {
  font-size: var(--text-body-sm);
  color: var(--color-on-primary-container);
}

.header-nav-link {
  font-size: var(--text-label-lg);
  font-weight: 600;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

.header-nav-link:hover {
  color: var(--color-primary);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-headline-sm);
  white-space: nowrap;
}

.site-header .brand img {
  width: auto;
}

/* Scoped to each bar: a bare `.site-header .brand img` height sits later in
   the file with equal specificity, so it silently overrode the mobile size. */
.site-header__inner--desktop .brand img {
  height: 56px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-on-surface);
}

.icon-btn:active {
  transform: scale(0.95);
}

/* Modern Hamburger Menu Icon */
.hamburger-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 51;
  transition: all 0.3s ease;
}

.hamburger-btn:hover {
  background: var(--color-surface-container);
  border-radius: var(--radius-md);
}

.hamburger-btn:active {
  transform: scale(0.95);
}

.hamburger-line {
  display: block;
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: var(--color-on-surface);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-origin: center;
}

.hamburger-line--top {
  top: 8px;
}

.hamburger-line--middle {
  top: 50%;
  margin-top: -1px;
}

.hamburger-line--bottom {
  bottom: 8px;
}

/* Hamburger animation when menu is open */
.hamburger-btn[aria-expanded="true"] .hamburger-line--top {
  transform: translateY(9px) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] .hamburger-line--middle {
  opacity: 0;
  transform: translateX(-10px);
}

.hamburger-btn[aria-expanded="true"] .hamburger-line--bottom {
  transform: translateY(-9px) rotate(-45deg);
}

.badge-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Bottom-nav's icon is small and inline (not a 44px button box like the
   header's), so the badge anchors tighter to its own top-right corner
   instead of the header's wider offset. */
.bottom-nav__badge {
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(251, 249, 242, 0.9);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-bottom-nav);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav__list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 64px;
  margin: 0;
  padding: 0 var(--space-xs);
  list-style: none;
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-sm);
  position: relative;
}

.bottom-nav__item.active {
  color: var(--color-primary);
  font-weight: 600;
}

/* Buttons */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  height: 48px;
  padding: 0 var(--space-lg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label-lg);
}

.btn-primary:active {
  transform: translateY(1px);
  opacity: 0.92;
}

.btn-outline-secondary-soft {
  background-color: transparent;
  color: var(--color-tertiary);
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md);
  height: 44px;
  padding: 0 var(--space-lg);
}

/* Product card */
.product-card {
  position: relative;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*
    Both flex and grid items default to min-width: auto, which means they
    refuse to shrink below their content's intrinsic width. The product
    title below uses white-space:nowrap + ellipsis to truncate long names —
    but without this override, that "don't shrink" default wins first: the
    whole card (and its grid column) is forced to grow to fit the full
    unwrapped title, which is exactly what pushed the 2-column grid wider
    than the screen and made it horizontally draggable.
  */
  min-width: 0;
}

/*
  Aspect ratio via the "padding-top hack" instead of the `aspect-ratio`
  property: percentage padding is always resolved against the element's own
  width by every browser/WebView, giving a guaranteed non-zero height. Mobile
  WebViews (in-app browsers, older Chrome-on-Android builds) have shown
  inconsistent support for combining `aspect-ratio` with an absolutely
  positioned, percentage-sized child — when that combination fails, the
  child's height resolves to "auto" and the image renders at its intrinsic
  size (2560x2560 for our real product photos), blowing out the whole card
  and the page under it. `height:0; padding-top:100%` has no such ambiguity.
*/
.product-card__image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  border-radius: var(--radius-default);
  background: var(--color-surface-container-low);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.product-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-xs);
  box-sizing: border-box;
}

.product-card__brand {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-card__title {
  font-size: var(--text-label-lg);
  font-weight: 600;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__meta {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}

.product-card__price-row {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-card__price {
  font-size: var(--text-price-lead);
  font-weight: 700;
  color: var(--color-on-surface);
}

.product-card__price-old {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
  text-decoration: line-through;
  display: block;
}

.product-card__add-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  font-weight: 600;
  background: var(--color-tertiary-fixed);
  color: var(--color-on-tertiary-fixed);
}

.product-card__wishlist {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-variant);
}

/* Section heading */
.section-eyebrow {
  font-size: var(--text-label-sm);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  color: var(--color-on-surface);
}

/* Story circles */
.story-circle {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  padding: 2px;
  background: var(--color-surface-container-high);
}

/* Kampanyalar ring — a warm gradient border (same visual cue Instagram/
   WhatsApp use for "has a story") to make it read as tappable and distinct
   from the plain category circles next to it. */
.story-circle--campaign {
  padding: 2.5px;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-tertiary));
}

/* Kampanyalar full-screen story viewer (Instagram/WhatsApp Status style) */
.campaign-story-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #000;
}

.campaign-story-overlay.is-open {
  display: block;
}

.campaign-story-slide {
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.campaign-story-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.campaign-story-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.35) 100%);
}

.campaign-story-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: var(--space-lg) var(--space-margin) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  color: #fff;
  pointer-events: none;
}

.campaign-story-content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg);
  color: #fff;
  margin-bottom: var(--space-xs);
}

.campaign-story-content p {
  font-size: var(--text-body-md);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-md);
}

.campaign-story-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: #fff;
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-label-lg);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  pointer-events: auto;
}

.campaign-story-progress {
  position: absolute;
  top: calc(var(--space-sm) + env(safe-area-inset-top, 0px));
  left: var(--space-margin);
  right: var(--space-margin);
  z-index: 20;
  display: flex;
  gap: 4px;
}

.campaign-story-progress__bar {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.campaign-story-progress__fill {
  height: 100%;
  width: 0%;
  background: #fff;
}

.campaign-story-close {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: var(--space-margin);
  z-index: 20;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.campaign-story-tap-zones {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
}

.campaign-story-tap-zone {
  flex: 1;
  height: 100%;
}

.story-circle img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* Cards on brand-dark blocks */
.brand-block {
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

/* Auth Modal */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.auth-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.auth-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.auth-modal__content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  max-height: 90vh;
  margin-top: auto;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-modal);
  overflow-y: auto;
  animation: slideUp 0.3s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .auth-modal {
    align-items: center;
    justify-content: center;
  }

  .auth-modal__content {
    max-width: 420px;
    max-height: 90vh;
    margin-top: 0;
    border-radius: var(--radius-xl);
    animation: scaleIn 0.3s ease;
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

.auth-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 20;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: color 0.2s ease;
}

.auth-modal__close:hover {
  color: var(--color-primary);
}

.auth-modal__tabs {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-lg) 0 var(--space-lg);
  border-bottom: 1px solid var(--color-outline);
}

.auth-modal__tab {
  flex: 1;
  padding: var(--space-md) var(--space-sm);
  border: none;
  background: transparent;
  color: var(--color-on-surface-variant);
  font-weight: 600;
  font-size: var(--text-label-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border-bottom: 2px solid transparent;
}

.auth-modal__tab--active {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

.auth-modal__error {
  margin: var(--space-md) var(--space-lg) 0;
  padding: var(--space-sm);
  background: rgba(244, 67, 54, 0.1);
  border-left: 3px solid #f44336;
  border-radius: var(--radius-md);
  color: #d32f2f;
  font-size: var(--text-label-sm);
}

.auth-modal__google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-lg) var(--space-lg) 0;
  padding: var(--space-md);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--color-on-surface);
  font-weight: 600;
  font-size: var(--text-label-lg);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-modal__google-btn:hover {
  background: var(--color-surface-container-high);
  border-color: var(--color-primary);
}

.auth-modal__divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) var(--space-lg);
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-sm);
}

.auth-modal__divider hr {
  flex: 1;
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-outline);
}

.auth-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.auth-modal__form.d-none {
  display: none;
}

.auth-modal__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.auth-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.auth-modal__label {
  font-size: var(--text-label-sm);
  font-weight: 600;
  color: var(--color-on-surface);
}

.auth-modal__input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  background: var(--color-surface-bright);
  color: var(--color-on-surface);
  transition: all 0.2s ease;
}

.auth-modal__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.auth-modal__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-weight: 600;
  font-size: var(--text-label-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: var(--space-sm);
}

.auth-modal__submit:hover {
  background: var(--color-secondary);
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.auth-modal__submit:active {
  transform: translateY(0);
}

/* Product Detail Page - Mobile First */
.pdp-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pdp-gallery {
  width: 100%;
  background: var(--color-surface-container-lowest);
}

.pdp-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-lowest);
}

.pdp-gallery__favorite {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 10;
  width: 40px;
  height: 40px;
  background: var(--color-surface-bright);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

.pdp-gallery__image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-lg);
}

.pdp-gallery__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pdp-gallery__placeholder {
  font-size: 5rem;
  color: var(--color-on-surface-variant);
}

.pdp-gallery__thumbnails {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pdp-gallery__thumbnail {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  background: var(--color-surface-container-low);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}

.pdp-gallery__thumbnail:hover {
  border-color: var(--color-primary);
}

.pdp-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdp-share-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-outline);
  background: var(--color-surface-container-lowest);
}

.pdp-share-mobile__label {
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--color-on-surface);
}

.pdp-share-mobile__buttons {
  display: flex;
  gap: var(--space-sm);
}

.pdp-share-mobile__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-surface-container);
  border-radius: var(--radius-md);
  color: var(--color-on-surface);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 18px;
}

.pdp-share-mobile__btn:hover {
  background: var(--color-surface-container-high);
}

.pdp-info {
  padding: var(--space-lg) var(--space-lg) 120px;
  background: var(--color-surface-container-lowest);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pdp-info__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.pdp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  font-weight: 600;
}

.pdp-badge--brand {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
}

.pdp-badge--available {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.pdp-badge--unavailable {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.pdp-info__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg);
  font-weight: 700;
  color: var(--color-on-surface);
  line-height: 1.3;
  margin: 0;
}

.pdp-info__description {
  font-size: var(--text-body-lg);
  color: var(--color-on-surface-variant);
  margin: 0;
  line-height: 1.6;
}

.pdp-info__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.pdp-info__price-current {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.pdp-info__price-original {
  font-size: var(--text-body-lg);
  color: var(--color-on-surface-variant);
  text-decoration: line-through;
}

.pdp-info__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pdp-qty-control {
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  padding: var(--space-xs);
}

.pdp-qty-control__btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-on-surface);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pdp-qty-control__btn:hover {
  background: var(--color-surface-container-high);
}

.pdp-qty-control__value {
  min-width: 40px;
  text-align: center;
  font-weight: 600;
  font-size: var(--text-label-lg);
  color: var(--color-on-surface);
}

.pdp-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--text-label-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.pdp-cta-btn--primary {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  min-height: 52px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.pdp-cta-btn--primary:hover:not(:disabled) {
  background: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.pdp-cta-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pdp-cta-btn__price {
  font-size: var(--text-label-md);
  color: inherit;
  opacity: 0.9;
}

.pdp-trust-signals {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface-container);
  border-radius: var(--radius-lg);
}

.pdp-trust-signal {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}

.pdp-trust-signal i {
  color: var(--color-secondary);
  font-size: 18px;
  flex-shrink: 0;
}

.pdp-accordion {
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-container);
}

.pdp-accordion__header {
  width: 100%;
  padding: var(--space-md);
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  color: var(--color-on-surface);
}

.pdp-accordion__header:hover {
  background: var(--color-surface-container-high);
}

.pdp-accordion__header--active {
  background: var(--color-surface-container-high);
}

.pdp-accordion__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pdp-accordion__title i {
  color: var(--color-secondary);
}

.pdp-accordion__icon {
  transition: transform 0.3s ease;
  color: var(--color-on-surface-variant);
}

.pdp-accordion__body {
  padding: var(--space-md);
  border-top: 1px solid var(--color-outline);
  font-size: var(--text-body-md);
  color: var(--color-on-surface-variant);
  line-height: 1.6;
}

.pdp-share-desktop {
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--color-surface-container);
  border-radius: var(--radius-lg);
  margin-top: auto;
}

.pdp-share-desktop__label {
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--color-on-surface);
}

.pdp-share-desktop__buttons {
  display: flex;
  gap: var(--space-sm);
}

.pdp-share-desktop__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-surface-container-high);
  border-radius: var(--radius-md);
  color: var(--color-on-surface);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 18px;
}

.pdp-share-desktop__btn:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.pdp-related {
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  background: var(--color-surface-container-lowest);
}

.pdp-related__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.pdp-related__header .section-title {
  margin: 0;
}

.pdp-related__view-all {
  font-size: var(--text-label-lg);
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: all 0.2s ease;
}

.pdp-related__view-all:hover {
  color: var(--color-secondary);
}

.pdp-related__mobile {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 -var(--space-lg);
  margin: 0 -var(--space-lg);
  padding-right: var(--space-lg);
  padding-left: var(--space-lg);
}

.pdp-related__card {
  flex-shrink: 0;
  width: 170px;
}

.pdp-related__desktop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gutter-sm);
}

/* Desktop Layout */
@media (min-width: 992px) {
  .pdp-container {
    flex-direction: row;
    gap: var(--space-xl);
    padding: var(--space-lg);
    max-width: 1440px;
    margin: 0 auto;
  }

  .pdp-gallery {
    flex: 0 0 45%;
    position: sticky;
    top: 80px;
    height: fit-content;
  }

  .pdp-gallery__main {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
  }

  .pdp-gallery__thumbnails {
    padding: var(--space-md) 0 0 0;
  }

  .pdp-share-mobile {
    display: none;
  }

  .pdp-info {
    flex: 1;
    padding: 0;
    padding-bottom: var(--space-xl);
  }

  .pdp-info__title {
    font-size: var(--text-headline-xl);
  }

  /* In normal flow (not absolute) so the product content starts below it
     instead of the badges/title rendering underneath the breadcrumb. */
  .pdp-breadcrumb {
    padding-top: var(--space-md) !important;
    padding-bottom: 0 !important;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
}

/* Sticky CTA on Mobile */
.pdp-info__actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: var(--space-md) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--color-surface-container-lowest), rgba(248, 246, 240, 0.95));
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {
  .pdp-info__actions {
    position: static;
    gap: var(--space-md);
    padding: 0;
    background: none;
    box-shadow: none;
  }
}

/* WhatsApp share buttons use the brand green */
.pdp-share-mobile__btn:has(.bi-whatsapp),
.pdp-share-desktop__btn:has(.bi-whatsapp) {
  background: #25D366;
  color: #fff;
}

.pdp-share-mobile__btn:has(.bi-whatsapp):hover,
.pdp-share-desktop__btn:has(.bi-whatsapp):hover {
  background: #1ebe5b;
  color: #fff;
}