@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&family=Montserrat:wght@500;700;800&display=swap');
/* ════════════════════════════════════════════════════════════════
   Mahfel Kitap — Main Stylesheet
   Mobile-first, fully responsive, no absolute positioning for layout
   ════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  --color-primary:       #0B6776;
  --color-primary-dark:  #00414B;
  --color-dark:          #21282D;
  --color-dark-green:    #1E342A;
  --color-gray:          #5A5A5A;
  --color-gray-light:    #9A9A9A;
  --color-gray-border:   #CCCCCC;
  --color-white:         #FFFFFF;
  --color-gold:          #B58B2D;
  --color-badge-green:   #285A34;
  --color-badge-red:     #94271A;

  --font-body:     'Lato', sans-serif;
  --font-heading:  'Montserrat', sans-serif;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --shadow-card: 0 2px 8px rgba(0,0,0,.08);
  --transition:  .2s ease;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-dark);
  background: #FFFFFF;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  zoom: 0.8;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, button { font-size: inherit; }

/* ── Utility ──────────────────────────────────────────────────── */
.container {
  width: 84.375% !important;
  max-width: none !important;
  margin: 0 7.8125% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* High-specificity override for Bootstrap vendor CSS which loads after us */
#content-wrapper .container,
.header-top .container,
header .container,
footer .container {
  width: 84.375% !important;
  max-width: none !important;
  margin: 0 7.8125% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */

/* Announcement Bar */
.announcement-bar {
  background: var(--color-primary-dark);
  color: var(--color-white);
  text-align: center;
  padding: 0 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .02em;
}

/* Main header wrapper */
.site-header {
  position: relative;
  background: var(--color-white);
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

/* Top bar — links + account (desktop only) */
.top-bar {
  display: none;
  border-bottom: 1px solid var(--color-gray-border);
  background: var(--color-white);
}
@media (min-width: 768px) {
  .top-bar { display: block; }
}
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}
.top-nav ul {
  display: flex;
  gap: 24px;
}
.top-nav a {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-dark);
  transition: color var(--transition);
}
.top-nav a:hover { color: var(--color-primary); }
.top-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.top-action-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-dark);
  transition: color var(--transition);
  white-space: nowrap;
}
.top-action-item:hover { color: var(--color-primary); }
.top-action-item .icon-img { width: 18px; height: 18px; }

/* Main header row: logo + search + cart */
.header-main {
  border-bottom: 1px solid var(--color-gray-border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Logo wrap */
.logo-wrap {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.logo {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1;
  white-space: nowrap;
}
.logo-primary  { color: var(--color-primary); font-weight: 700; }
.logo-secondary { color: var(--color-dark); font-weight: 400; }
.header-tagline {
  font-size: .75rem;
  color: var(--color-gray);
  font-style: italic;
  margin-top: 3px;
}

/* Search */
.search-form {
  flex: 1 1 280px;
  display: flex;
  min-width: 0;
}
.search-input {
  flex: 1;
  border: 1.5px solid var(--color-gray-border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 10px 14px;
  font-size: .875rem;
  outline: none;
  min-width: 0;
  transition: border-color var(--transition);
}
.search-input:focus { border-color: var(--color-primary); }
/* Cart icon (desktop) */
.action-cart {
  display: none;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .action-cart { display: flex; align-items: center; }
}
.action-cart .icon-img { width: 30px; height: 30px; }

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: var(--transition);
}
@media (min-width: 1024px) { .hamburger { display: none; } }

/* Category Nav */
.category-nav {
  background: var(--color-white);
  border-bottom: 2px solid var(--color-gray-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }
.cat-list {
  display: flex;
  gap: 0;
  min-width: max-content;
  padding: 0;
}
.cat-link {
  display: block;
  padding: 12px 18px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-dark);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all var(--transition);
}
.cat-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.cat-kategoriler {
  font-weight: 700;
  border-right: 1px solid var(--color-gray-border);
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-border);
  padding: 16px 0;
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { padding: 0 20px; }
.mobile-menu li a {
  display: block;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--color-gray-border);
  color: var(--color-dark);
}
.mobile-menu li a:hover { color: var(--color-primary); }
.mobile-divider { border-top: 2px solid var(--color-gray-border); margin: 8px 0; }

/* ══════════════════════════════════════════════════════════════
   HERO BANNER
   ══════════════════════════════════════════════════════════════ */
.hero-banner {
  width: 100%;
  line-height: 0;
}
.hero-banner img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  object-position: center;
}

/* ══════════════════════════════════════════════════════════════
   BOOK SECTIONS
   ══════════════════════════════════════════════════════════════ */
.book-section {
  padding: 30px 0;
  background: #fff;
}
.book-section + .book-section { border-top: none; }

.book-section-inner {
  max-width: 100%;
}
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 16px;
}
.section-title {
  text-align: left !important;
  font-family: 'Georgia', serif;
  font-size: clamp(18px, 2.29vw, 44px);
  font-style: italic;
  font-weight: 400;
  color: #21282D;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}
.section-more {
  font-family: 'Lato', sans-serif;
  font-size: clamp(13px, 1.30vw, 25px);
  font-weight: 400;
  color: #21282D;
  white-space: nowrap;
  transition: color var(--transition);
}
.section-more:hover { color: var(--color-primary); text-decoration: underline; }

/* ── Book Carousel ───────────────────────────────────────────── */
.book-carousel-wrap {
  position: relative;
  max-width: 100%;
}
.book-row {
  display: flex;
  gap: 80px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-left: 43px;
  padding-right: 41px;
  padding-bottom: 4px;
  justify-content: flex-start;
}
.book-row::-webkit-scrollbar { display: none; }

/* Nav arrows — bare thin chevrons, position: absolute */
.carousel-arrow {
  position: absolute;
  top: 33%;
  transform: translateY(-50%);
  padding: 8px 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
  z-index: 2;
  transition: color var(--transition), opacity var(--transition);
}
.carousel-arrow:hover { color: #21282D; }
.carousel-arrow svg { width: 9px; height: 16px; display: block; }
.carousel-arrow--left  { left: 18px; }
.carousel-arrow--right { right: 16px; }
.carousel-arrow--hidden { opacity: 0; pointer-events: none; }

/* ── Book Card ───────────────────────────────────────────────── */
.book-card {
  flex: 0 0 250px;
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: none;
  border-radius: 0;
  overflow: visible;
  transition: box-shadow var(--transition);
}

.book-cover-wrap {
  position: relative;
  width: 250px;
  height: 375px;
  overflow: visible;
  background: #F0EDE8;
}
.book-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.book-cover-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8e0d8 0%, #d4c8bb 100%);
}

/* Wishlist button */
.btn-wishlist {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-light);
  transition: all var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.btn-wishlist:hover {
  background: var(--color-white);
  color: #e53e3e;
}
.btn-wishlist svg { width: 14px; height: 14px; }

/* Badges */
.badge-wrap {
  position: absolute;
  top: 0;
  left: -8px;
  z-index: 2;
}
.badge-wrap .badge {
  position: relative;
  display: block;
  padding: 5px 20px 5px 16px !important;
  border-radius: 0 !important;
  font-family: 'Lato', sans-serif;
  font-size: clamp(10px, 1.04vw, 20px) !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  text-align: left !important;
  min-width: auto !important;
  min-height: 30px;
}
.badge-wrap .badge::after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  display: block;
  width: 0;
  height: 0;
  border-top: 8px solid #8f6d22;
  border-right: 10px solid transparent;
  z-index: 1;
}
.badge-gold      { background: #B58B2D !important; }
.badge-wrap .badge-gold::after   { border-top-color: #8f6d22; }
.badge-green     { background: #285A34 !important; }
.badge-wrap .badge-green::after  { border-top-color: #1e4227; }
.badge-red       { background: #94271A !important; }
.badge-wrap .badge-red::after    { border-top-color: #6e120f; }

/* Add to cart button — shows on hover */
.btn-add-to-cart {
  position: absolute;
  bottom: 0;
  left: 9px;
  right: 9px;
  width: auto;
  height: 60px;
  background: #fff;
  color: #0B6776;
  border: 2px solid #0B6776;
  border-radius: 0;
  padding: 0 10px;
  font-family: 'Lato', sans-serif;
  font-size: clamp(13px, 1.20vw, 23px);
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
  opacity: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-card:hover .btn-add-to-cart,
.book-cover-wrap:hover .btn-add-to-cart {
  opacity: 1;
}
.btn-add-to-cart:hover {
  background: #00414B;
  color: #fff;
  border-color: #00414B;
}

/* Card body */
.book-info {
  display: flex;
  flex-direction: column;
  padding: 10px 4px 4px 4px;
  gap: 2px;
}
.book-title {
  font-family: 'Lato', sans-serif;
  font-size: clamp(13px, 1.20vw, 23px);
  font-weight: 600;
  color: #000;
  line-height: clamp(16px, 1.51vw, 29px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-title a {
  color: #000;
  text-decoration: none;
}
.book-author {
  font-family: 'Lato', sans-serif;
  font-size: clamp(12px, 1.09vw, 21px);
  font-weight: 500;
  color: #0B6776;
  line-height: clamp(13px, 1.30vw, 25px);
  margin-top: 2px;
}
.book-condition {
  font-family: 'Lato', sans-serif;
  font-size: clamp(12px, 1.09vw, 21px);
  font-weight: 400;
  color: #5A5A5A;
  line-height: clamp(13px, 1.30vw, 25px);
}
.book-pricing {
  margin-top: 4px;
}
.book-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.book-price {
  font-family: 'Lato', sans-serif;
  font-size: clamp(12px, 1.09vw, 21px);
  font-weight: 700;
  color: #21282D;
}
.book-discount {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #94271A;
  border-radius: 0;
  padding: 1px 6px;
  line-height: 18px;
}
.book-old-price {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gray-light);
  text-decoration: line-through;
}

/* ══════════════════════════════════════════════════════════════
   FEATURE IMAGE ROWS
   ══════════════════════════════════════════════════════════════ */
.feature-row { padding: 0; background: #fff; }
.feature-img-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .feature-img-grid { grid-template-columns: repeat(3, 1fr); }
}
.feature-img-item { overflow: hidden; line-height: 0; }
.feature-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform .4s ease;
}
.feature-img-item:hover img { transform: scale(1.03); }

/* ══════════════════════════════════════════════════════════════
   WIDE BANNER
   ══════════════════════════════════════════════════════════════ */
.wide-banner {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  background: #fff;
}
.wide-banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 500px;
}
.search-page-wide-banner {
  max-height: clamp(70px, 7.24vw, 138px);
  overflow: hidden;
}
.search-page-wide-banner img {
  width: 100%;
  height: clamp(70px, 7.24vw, 138px) !important;
  max-height: clamp(70px, 7.24vw, 138px) !important;
  object-fit: cover;
  object-position: center top;
}

/* ══════════════════════════════════════════════════════════════
   FEATURES INFO SECTION
   ══════════════════════════════════════════════════════════════ */
.features-section {
  padding: 80px 0;
  background: var(--color-white);
}
.features-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 1024px) {
  .features-inner { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
}
.features-heading {
  font-family: 'Georgia', serif;
  font-size: 35px;
  font-style: italic;
  font-weight: 400;
  color: #21282D;
  line-height: 1.2;
  margin-bottom: 40px;
  grid-column: 1 / -1;
}
.features-list { display: flex; flex-direction: column; gap: 32px; }
.feature-item { display: flex; gap: 20px; align-items: flex-start; }
.feature-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: rgba(11,103,118,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-text h3 {
  font-family: 'Georgia', serif;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  text-transform: capitalize;
  line-height: 22px;
  margin-bottom: 8px;
}
.feature-text p {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #5A5A5A;
  line-height: 25px;
}
.features-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.features-images img {
  border-radius: var(--radius-md);
  object-fit: cover;
  width: 100%;
  aspect-ratio: 4/3;
}
.features-images img:first-child {
  grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════════════
   STATS BANNER
   ══════════════════════════════════════════════════════════════ */
.stats-banner {
  background: #fff;
  padding: clamp(16px, 1.3vw, 25px) 0;
}
.stats-banner .container {
  max-width: none;
  margin: 0 7.8125%;
  padding: 0;
}
.stats-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: var(--color-primary);
  width: 100%;
  height: clamp(80px, 7.55vw, 145px);
  padding: 0 clamp(20px, 3.13vw, 60px);
  gap: clamp(12px, 3.91vw, 75px);
}
.stat-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 0.83vw, 16px);
  color: var(--color-white);
  flex: 1 1 0;
  min-width: 0;
  height: auto;
}
.stat-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.stat-icon {
  width: clamp(32px, 3.91vw, 75px);
  height: clamp(32px, 3.91vw, 75px);
  object-fit: contain;
  filter: brightness(10);
  flex-shrink: 0;
}
.stat-number {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 2.34vw, 45px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(11px, 1.17vw, 22px);
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--color-white);
  color: var(--color-dark);
  font-size: .875rem;
  border-top: 1px solid var(--color-gray-border);
}

/* Footer top grid */
.footer-top { padding: 48px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1.5fr 1.5fr 2fr; gap: 48px; }
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 16px;
  letter-spacing: 0;
  text-transform: none;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  color: var(--color-dark);
  transition: color var(--transition);
  line-height: 1.5;
  font-size: .875rem;
}
.footer-col a:hover { color: var(--color-primary); }

/* Contact */
.footer-contact { margin-top: 24px; }
.footer-contact-link {
  display: inline-block;
  padding: 8px 20px;
  border: 1.5px solid var(--color-primary-dark);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark) !important;
  font-weight: 600;
  font-size: .8125rem;
  transition: all var(--transition);
  margin-bottom: 12px;
}
.footer-contact-link:hover { background: var(--color-primary-dark); color: var(--color-white) !important; }
.footer-phone-label { color: var(--color-gray); margin-bottom: 2px; }
.footer-hours { font-size: .8125rem; color: var(--color-gray); }
.footer-phone {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-dark) !important;
  margin-top: 4px;
}

/* Social */
.footer-social-heading {
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 20px 0 12px;
}
.social-icons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.social-link {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.social-link:hover { background: var(--color-primary); }
.social-link img { width: 16px; height: 16px; filter: brightness(10); }

/* Newsletter */
.newsletter-desc {
  font-size: .8125rem;
  color: var(--color-gray);
  margin-bottom: 12px;
  line-height: 1.5;
}
.newsletter-form { display: flex; }
.newsletter-input {
  flex: 1;
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 10px 14px;
  color: var(--color-dark);
  font-size: .8125rem;
  outline: none;
  min-width: 0;
  transition: border-color var(--transition);
}
.newsletter-input::placeholder { color: var(--color-gray); }
.newsletter-input:focus { border-color: var(--color-primary); }
.newsletter-btn {
  background: var(--color-primary-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
  color: var(--color-white);
  display: flex;
  align-items: center;
  transition: background var(--transition);
}
.newsletter-btn:hover { background: var(--color-primary); }
.newsletter-btn svg { width: 18px; height: 18px; }

/* App download */
.app-download { margin-top: 16px; }
.app-label {
  font-size: .8125rem;
  color: var(--color-gray);
  margin-bottom: 10px;
}
.app-download img { height: 40px; width: auto; border-radius: var(--radius-sm); }

/* Payment */
.footer-payments {
  border-top: 1px solid var(--color-gray-border);
  padding: 16px 0;
}
.payment-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.payment-icon {
  height: 30px;
  width: auto;
  border-radius: 4px;
  object-fit: contain;
  background: var(--color-white);
  padding: 2px 4px;
}

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid var(--color-gray-border);
  padding: 16px 0;
}
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.copyright {
  font-size: .8125rem;
  color: var(--color-gray);
}
.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.footer-legal a {
  font-size: .75rem;
  color: var(--color-gray);
  transition: color var(--transition);
}
.footer-legal a:hover { color: var(--color-primary); }

/* ── Misc / Page ──────────────────────────────────────────────── */
main { background: #FFFFFF; }

/* ══════════════════════════════════════════════════════════════
   HEADER SCOPED STYLES (from AppHeader.vue)
   ══════════════════════════════════════════════════════════════ */

/* ── Announcement Bar ──────────────────────────────── */
.ann-bar {
  background: #00414B;
  color: #fff;
  height: clamp(36px, 3.28vw, 63px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lato', sans-serif;
  font-size: clamp(13px, 1.30vw, 25px);
  font-weight: 700;
  letter-spacing: .01em;
}

/* ── Header wrapper ────────────────────────────────── */
.site-header {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

/* ── Top Bar ───────────────────────────────────────── */
.top-bar {
  display: none;
  border-bottom: none;
}
@media (min-width: 768px) { .top-bar { display: block; } }

.tb-inner {
  max-width: none;
  margin: 0 7.8125%;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: clamp(60px, 5.78vw, 111px);
}

.tb-nav,
.tb-right {
  display: flex;
  align-items: center;
  gap: 0;
}

.tb-nav a,
.tb-action {
  font-family: 'Lato', sans-serif;
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 400;
  color: #21282D;
  text-decoration: none;
  line-height: 35px;
  padding: 0 15px;
  transition: color .15s;
}
.tb-nav a:hover,
.tb-action:hover { color: #0B6776; }
.tb-nav a:first-child { padding-left: 0; }
.tb-right .tb-action:last-child { padding-right: 0; }

.tb-action {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tb-action img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.tb-chevron {
  width: 10px;
  height: 6px;
  color: #21282D;
  flex-shrink: 0;
}

/* Gold separator */
.tb-sep {
  display: block;
  width: 1px;
  height: 29px;
  background: #B58B2D;
  flex-shrink: 0;
  align-self: center;
  margin: 0;
}

/* ── Main Header Row ───────────────────────────────── */
.header-main {
  border-bottom: none;
}
.hm-inner {
  max-width: none;
  margin: 0 7.8125%;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  height: clamp(70px, 5.52vw, 106px);
}

/* Logo */
.logo-block { flex-shrink: 0; }
.logo {
  font-family: 'Georgia', serif;
  font-size: clamp(32px, 4.5vw, 70px);
  font-weight: 700;
  color: #00414B;
  text-decoration: none;
  line-height: 1.1;
  display: block;
}
.tagline {
  font-family: 'Georgia', serif;
  font-size: clamp(12px, 0.94vw, 18px);
  font-weight: 700;
  font-style: italic;
  color: #0B6776;
  margin-top: 2px;
  line-height: 1;
}

/* Search */
.search-form {
  flex: 1 1 auto;
  max-width: clamp(300px, 69vw, 1325px);
  display: flex;
  min-width: 0;
  margin-left: clamp(16px, 3vw, 60px);
}
.search-inp {
  flex: 1;
  min-width: 0;
  height: clamp(40px, 3.28vw, 63px);
  border: 1px solid #00414B;
  border-right: none;
  border-radius: 0;
  padding: 0 20px;
  font-family: 'Lato', sans-serif;
  font-size: 23px;
  font-weight: 400;
  color: #21282D;
  outline: none;
  transition: border-color .15s;
}
.search-inp::placeholder { color: #6A6A6A; }
.search-inp:focus { border-color: #0B6776; }
.figma-search-btn {
  width: clamp(48px, 3.85vw, 74px);
  height: clamp(40px, 3.28vw, 63px);
  background: #18404a;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
  cursor: pointer;
  align-self: center;
  padding: 0;
}
.figma-search-btn:hover { background: #0B6776; }
.figma-search-btn img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(10);
  display: inline-block;
}

/* Cart */
.cart-icon {
  display: none;
  flex-shrink: 0;
  margin-left: clamp(24px, 5vw, 96px);
  margin-right: clamp(10px, 2vw, 40px);
}
@media (min-width: 768px) {
  .cart-icon { display: flex; align-items: center; }
}
.cart-icon img {
  width: clamp(36px, 3.28vw, 63px) !important;
  height: clamp(36px, 3.28vw, 63px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}
.cart-icon .nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 9999px;
  background: #18404a;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}
.cart-icon { position: relative; }

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #21282D;
  border-radius: 2px;
  transition: .2s;
}
@media (min-width: 1024px) { .hamburger { display: none; } }

/* ── Category Nav ──────────────────────────────────── */
.cat-nav {
  background: #fff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cn-inner {
  max-width: none;
  margin: 0 7.8125%;
  padding: 0;
}
.cn-list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  min-width: max-content;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cn-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 30px;
  height: clamp(40px, 3.54vw, 68px);
  font-family: 'Georgia', serif;
  font-size: clamp(16px, 1.46vw, 28px);
  font-weight: 400;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.cn-link:hover { color: #0B6776; }
.cn-link--bold { font-family: 'Georgia', serif; }

.cn-item:first-child .cn-link { padding-left: 0; }
.cn-item:last-child .cn-link { padding-right: 0; }

.cn-item {
  position: relative;
  display: flex;
}
.cn-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: #B58B2D;
}
.cn-item:last-child::after { display: none; }
.cn-item--kategoriler::after { width: 3px; }

.cn-arrow {
  width: 12px;
  height: 8px;
  color: #000;
  flex-shrink: 0;
  opacity: .8;
}

/* ── Mobile Menu ───────────────────────────────────── */
.mob-menu {
  display: none;
  background: #fff;
  border-top: 1px solid #CCCCCC;
}
.mob-menu.open { display: block; }
.mob-menu ul { list-style: none; padding: 0 20px; margin: 0; }
.mob-menu li a {
  display: block;
  padding: 12px 0;
  font-family: 'Lato', sans-serif;
  font-size: 19px;
  font-weight: 400;
  color: #21282D;
  text-decoration: none;
  border-bottom: 1px solid #CCCCCC;
  transition: color .15s;
}
.mob-menu li a:hover { color: #0B6776; }
.mob-menu li a .global-cart-count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  margin-left: 6px;
  vertical-align: middle;
}
.mob-divider { border-top: 2px solid #CCCCCC; margin: 6px 0; }

@media (max-width: 768px) {
  .tb-inner { padding: 0 20px; height: auto; }
  .tb-nav a, .tb-action { font-size: 15px; padding: 0 10px; }
  .hm-inner { padding: 0 20px; height: auto; align-items: center; }
  .search-form { margin-left: 0; }
  .logo { font-size: clamp(28px, 8vw, 48px); line-height: 1.1; }
  .cn-link { padding: 0 16px; font-size: 20px; height: 54px; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER SCOPED STYLES (from AppFooter.vue)
   ══════════════════════════════════════════════════════════════ */
.site-footer {
  background: #fff;
  color: #21282D;
  border-top: 1px solid #CCCCCC;
  font-family: 'Lato', sans-serif;
}

.ft-grid-wrap {
  max-width: none;
  margin: 0 7.8125%;
  padding: 48px 0 40px;
}
.ft-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 640px)  { .ft-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ft-grid { grid-template-columns: 2fr 2fr 2.5fr 2.25fr; gap: 48px; } }

.ft-col-title {
  font-family: 'Lato', sans-serif;
  font-size: clamp(13px, 1.30vw, 25px);
  font-weight: 500;
  color: #000;
  margin: 0 0 16px;
}

.ft-links {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ft-links li a {
  font-family: 'Lato', sans-serif;
  font-size: clamp(11px, 1.04vw, 20px);
  font-weight: 400;
  color: #5A5A5A;
  text-decoration: none;
  line-height: clamp(24px, 2.50vw, 48px);
  transition: color .15s;
  display: block;
}
.ft-links li a:hover { color: #0B6776; }

.ft-contact { margin-top: 24px; }
.ft-contact-sub {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #000;
  line-height: normal;
  margin: 0 0 8px;
}
.ft-contact-link {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  color: #0B6776;
  text-decoration: none;
  line-height: 35px;
  margin-bottom: 16px;
  transition: color .15s;
}
.ft-contact-link:hover { color: #00414B; }

.ft-call-label {
  font-size: 19px;
  font-weight: 400;
  color: #21282D;
  line-height: 35px;
  margin: 0;
}
.ft-hours {
  font-size: 16px;
  font-weight: 400;
  color: #5A5A5A;
  line-height: 35px;
  margin: 0;
}
.ft-phone {
  display: block;
  font-size: clamp(18px, 2.34vw, 45px);
  font-weight: 700;
  color: #21282D;
  text-decoration: none;
  line-height: 1.2;
  margin-top: 4px;
}
.ft-phone:hover { color: #0B6776; }

.ft-newsletter-desc {
  font-size: 16px;
  font-weight: 400;
  color: #5A5A5A;
  line-height: 1.5;
  margin-bottom: 14px;
}
.ft-newsletter {
  display: flex;
  margin-bottom: 24px;
}
.ft-email-inp {
  flex: 1;
  min-width: 0;
  height: 60px;
  border: 1px solid #CCCCCC;
  border-right: none;
  border-radius: 0;
  padding: 0 14px;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #6A6A6A;
  outline: none;
  transition: border-color .15s;
}
.ft-email-inp::placeholder { color: #6A6A6A; }
.ft-email-inp:focus { border-color: #0B6776; color: #21282D; }
.ft-email-btn {
  width: 60px;
  height: 60px;
  background: #0B6776;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s;
}
.ft-email-btn:hover { background: #00414B; }
.ft-email-btn svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}

.ft-social-title {
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #000;
  text-transform: capitalize;
  margin: 0 0 12px;
}
.ft-socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ft-social-link {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.ft-social-link:hover { background: #333; }
.ft-social-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(10);
}

.ft-app {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ft-store-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  min-width: 140px;
  transition: background .15s;
}
.ft-store-btn:hover { background: #333; }
.ft-store-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.ft-store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ft-store-sub {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.ft-store-main {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 400;
  opacity: .85;
}

.ft-payments-wrap {
  border-top: 1px solid #CCCCCC;
  max-width: none;
  margin: 0 7.8125%;
  padding: 16px 0;
}
.ft-payments-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.ft-payments {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pay-card {
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 52px;
}
.pay-icon {
  height: 22px;
  width: auto;
  object-fit: contain;
}
.ft-etbis {
  display: flex;
  align-items: center;
  gap: 8px;
}
.etbis-icon {
  height: 52px;
  width: auto;
  object-fit: contain;
}
.trgo-icon {
  height: 46px;
  width: auto;
  object-fit: contain;
}

.ft-bottom-wrap {
  border-top: 1px solid #CCCCCC;
  max-width: none;
  margin: 0 7.8125%;
  padding: 16px 0;
}
.ft-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.ft-copyright {
  font-family: 'Lato', sans-serif;
  font-size: clamp(12px, 1.09vw, 21px);
  font-weight: 400;
  color: #000;
  margin: 0;
}
.ft-legal ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.ft-legal a {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #5A5A5A;
  text-decoration: none;
  transition: color .15s;
}
.ft-legal a:hover { color: #0B6776; }

/* ══════════════════════════════════════════════════════════════
   TOAST & TRANSITIONS (from index.vue)
   ══════════════════════════════════════════════════════════════ */
.cart-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: var(--color-primary-dark);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.cart-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Utility classes */
.hidden { display: none !important; }


/* Search autocomplete (injected by fallback JS) */
.search-autocomplete-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  max-height: 320px;
  overflow-y: auto;
}
.search-autocomplete-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.search-autocomplete-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #111;
  text-decoration: none;
  transition: background .15s ease;
}
.search-autocomplete-item a:hover,
.search-autocomplete-item.selected a {
  background: #f3f4f6;
}
.search-loading-msg {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  font-size: 12px;
  color: #666;
}

/* Minimal modal styles (Bootstrap JS requires these classes) */
.modal { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; }
.modal.fade { opacity: 0; transition: opacity .15s linear; }
.modal.show { display: block; opacity: 1; }
.modal-dialog { position: relative; width: auto; margin: 10px; pointer-events: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 20px); }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background: #fff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); border-radius: 12px; outline: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.modal-header .close { padding: 8px; margin: -8px -8px -8px auto; background: transparent; border: 0; font-size: 24px; line-height: 1; color: #6b7280; cursor: pointer; }
.modal-title { margin-bottom: 0; line-height: 1.5; font-size: 18px; font-weight: 700; }
.modal-body { position: relative; flex: 1 1 auto; padding: 20px; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid #e5e7eb; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; gap: 10px; }
@media (min-width: 576px) {
  .modal-dialog { max-width: 500px; margin: 30px auto; }
  .modal-dialog-centered { min-height: calc(100% - 60px); }
  .modal-sm { max-width: 360px; }
  .modal-md { max-width: 520px; }
}
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background: rgba(15,23,42,.55); }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 1; }
body.modal-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════
   Responsive Overrides (max-width breakpoints)
   ════════════════════════════════════════════════════════════════ */

/* Medium desktop (≤1500px) */
@media (max-width: 1500px) {
  .book-row { gap: 60px; }
}

/* Tablet and below (≤1024px) */
@media (max-width: 1024px) {
  .features-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .features-images {
    justify-content: center;
  }
  .stats-grid {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px;
  }
  .stat-item {
    gap: 12px;
  }
  .stat-icon {
    width: 48px;
    height: 48px;
  }
  .book-card {
    flex: 0 0 200px;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
  .book-cover-wrap {
    width: 200px;
    height: 300px;
  }
  .book-row { gap: 40px; }
  .section-header { margin-bottom: 10px; }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .header-main .hm-inner {
    padding: 0 12px;
  }
  .search-form {
    display: none;
  }
  .cat-nav {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .hero-banner img {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
  }
  .carousel-arrow {
    width: 32px;
    height: 32px;
  }
  .carousel-arrow svg {
    width: 14px;
    height: 14px;
  }
  .feature-img-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-img-item img {
    height: auto;
  }
  .wide-banner img {
    width: 100%;
    height: auto;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
  }
  .stat-number {
    font-size: 20px;
  }
  .stat-label {
    font-size: 11px;
  }
  .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .ft-payments-row {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  .ann-bar {
    font-size: 11px;
    padding: 6px 10px;
  }
  .tb-inner {
    padding: 0 10px;
  }
  .logo {
    font-size: 28px;
  }
  .tagline {
    font-size: 11px;
  }
  .section-title {
    text-align: left !important;
    font-size: 18px;
  }
  .book-card {
    flex: 0 0 110px;
    width: 110px;
  }
  .book-cover-wrap,
  .book-cover-wrap img {
    width: 110px;
    height: 166px;
  }
  .features-heading {
    font-size: 24px;
  }
  .feature-item h3 {
    font-size: 16px;
  }
  .feature-item p {
    font-size: 12px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .ft-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ft-col-title {
    font-size: 14px;
  }
  .ft-contact-link,
  .ft-phone {
    font-size: 14px;
  }
}


/* ════════════════════════════════════════════════════════════════
   SEARCH PAGE — Figma Ürün Listeleme Entegrasyonu
   ════════════════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────────────────── */
.search-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.search-sidebar {
  width: clamp(200px, 18.23vw, 350px);
  flex-shrink: 0;
}
.search-main {
  flex: 1;
  min-width: 0;
}
@media (max-width: 991px) {
  .search-layout {
    flex-direction: column;
    gap: 16px;
  }
  .search-sidebar {
    width: 100%;
  }
}

/* ── Top Controls ────────────────────────────────────────────── */
.search-top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(12px, 2.63vw, 50px);
}
.results-count {
  font-family: 'Lato', sans-serif;
  font-size: clamp(13px, 1.04vw, 20px);
  color: #21282D;
}
.results-count strong {
  font-weight: 700;
}
.search-controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* View Toggle */
.view-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.view-switcher .viewSwitcher,
.view-switcher .viewSwitcher.btn-primary,
.view-switcher .viewSwitcher.btn-default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #9A9A9A;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color .2s ease;
  background: transparent;
  border: none;
}
.view-switcher .viewSwitcher.btn-primary,
.view-switcher .viewSwitcher:hover {
  color: #4A4A4A;
}
.view-switcher .viewSwitcher.btn-primary .view-icon-grid-mini i,
.view-switcher .viewSwitcher:hover .view-icon-grid-mini i {
  background: #4A4A4A;
}
.view-icon-grid-mini {
  display: grid;
  grid-template-columns: 6px 6px;
  grid-template-rows: 6px 6px;
  gap: 2px;
  width: 14px;
  height: 14px;
}
.view-icon-grid-mini i {
  display: block;
  background: #9A9A9A;
}
.view-icon-list-mini {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
  height: 14px;
}
.view-icon-list-mini .list-bar {
  display: flex;
  align-items: center;
  gap: 4px;
}
.view-icon-list-mini .list-dot {
  width: 4px; height: 4px;
  background: #9A9A9A;
  border-radius: 50%;
}
.view-icon-list-mini .list-line {
  flex: 1;
  height: 2px;
  background: #9A9A9A;
  border-radius: 1px;
}
.view-switcher .view-btn-list.btn-primary .list-dot,
.view-switcher .view-btn-list.btn-primary .list-line,
.view-switcher .view-btn-list:hover .list-dot,
.view-switcher .view-btn-list:hover .list-line {
  background: #4A4A4A;
}

/* Sort / Show boxes */
.search-sort-box,
.search-show-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  background: #FAFAFA;
  border: 1px solid #CCCCCC;
  border-radius: 0;
  padding: 0 12px;
}
.search-sort-label {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}
.search-sort-box .selectboxit-container,
.search-show-box .selectboxit-container {
  width: auto !important;
  min-width: 0 !important;
}
.search-sort-box .selectboxit,
.search-show-box .selectboxit {
  height: 36px !important;
  line-height: 36px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 22px 0 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #000 !important;
  display: flex !important;
  align-items: center !important;
}
.search-sort-box .selectboxit-text,
.search-show-box .selectboxit-text {
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #000 !important;
}
.search-sort-box .selectboxit-arrow-container,
.search-show-box .selectboxit-arrow-container {
  width: 20px !important;
  right: 0 !important;
}
.search-sort-box .selectboxit-arrow,
.search-show-box .selectboxit-arrow {
  border-top-color: #111 !important;
}
.search-sort-box .selectboxit-options,
.search-show-box .selectboxit-options {
  min-width: 100% !important;
  border: 1px solid #CCCCCC !important;
  border-top: 0 !important;
  background: #fff !important;
  left: -12px !important;
  margin-top: 0 !important;
}
.search-sort-box .selectboxit-option-anchor,
.search-show-box .selectboxit-option-anchor {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #222 !important;
  padding: 9px 14px !important;
}
.search-sort-box .selectboxit-option.selectboxit-selected .selectboxit-option-anchor,
.search-sort-box .selectboxit-option.selectboxit-focus .selectboxit-option-anchor,
.search-show-box .selectboxit-option.selectboxit-selected .selectboxit-option-anchor,
.search-show-box .selectboxit-option.selectboxit-focus .selectboxit-option-anchor {
  background: #e8f0f3 !important;
}


/* ── Pagination ──────────────────────────────────────────────── */
.search-pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 36px 0 16px;
}
.search-pagination-wrap .pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-pagination-wrap .pagination li {
  display: inline-flex;
}
.search-pagination-wrap .pagination li a,
.search-pagination-wrap .pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0B6776;
  border-radius: 2px;
  transition: background .15s ease;
}
.search-pagination-wrap .pagination li.active span,
.search-pagination-wrap .pagination li a:hover {
  color: #4A4A4A;
  background: rgba(11, 103, 118, 0.08);
}
.search-pagination-wrap .pagination li.disabled span {
  color: #9A9A9A;
  opacity: .6;
}

/* ── Sidebar Filters (Figma Style) ───────────────────────────── */
.search-sidebar-filters {
  width: 100%;
}
.search-sidebar-filters .selected-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.search-sidebar-filters .selected-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(11, 103, 118, 0.08);
  border: 1px solid rgba(11, 103, 118, 0.2);
  border-radius: 20px;
  font-size: 13px;
  color: #0B6776;
  transition: background .15s ease;
}
.search-sidebar-filters .selected-filter-chip:hover {
  background: rgba(11, 103, 118, 0.15);
}
.search-sidebar-filters .selected-filter-chip i {
  font-size: 11px;
}

.search-sidebar-filters .category-filters-section {
  border-bottom: 1px solid #E5E5E5;
  padding: 14px 0;
}
.search-sidebar-filters .category-filters-section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Lato', sans-serif;
  font-size: clamp(14px, 1.17vw, 22.5px);
  font-weight: 600;
  color: #000;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.search-sidebar-filters .category-filters-section h3 .clear-filter {
  display: none !important;
}
.search-sidebar-filters .filter-toggle-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #0B6776;
  font-size: 12px;
  margin-left: 8px;
}
.search-sidebar-filters .filter-section-body {
  padding-top: 10px;
}
.search-sidebar-filters .filter-section-body .checkbox {
  margin: 0 0 8px;
}
.search-sidebar-filters .filter-section-body .checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Lato', sans-serif;
  font-size: clamp(13px, 1.30vw, 25px);
  font-weight: 400;
  color: #0B6776;
  cursor: pointer;
  line-height: 1.4;
}
.search-sidebar-filters .filter-section-body .checkbox label:hover {
  color: #00414B;
}
.search-sidebar-filters .filter-section-body .checkbox input {
  margin-top: 3px;
}
.search-sidebar-filters .filter-search {
  width: 100%;
  height: 42px;
  border: 1px solid #CCCCCC;
  border-radius: 0;
  padding: 0 12px;
  font-size: 14px;
  margin-bottom: 10px;
  outline: none;
}
.search-sidebar-filters .filter-search:focus {
  border-color: #0B6776;
}
.search-sidebar-filters .price-filter-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.search-sidebar-filters .price-filter-input {
  flex: 1;
  height: 38px;
  border: 1px solid #CCCCCC;
  border-radius: 0;
  padding: 0 8px;
  font-size: 14px;
  text-align: center;
}
.search-sidebar-filters .price-filter-apply {
  width: 38px;
  height: 38px;
  background: #0B6776;
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-sidebar-filters .price-filter-apply:hover {
  background: #00414B;
}
.search-sidebar-filters .price-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-sidebar-filters .price-filter-list li {
  margin-bottom: 6px;
}
.search-sidebar-filters .price-filter-list a {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  color: #0B6776;
  text-decoration: none;
}
.search-sidebar-filters .price-filter-list a:hover,
.search-sidebar-filters .price-filter-list a.active {
  color: #00414B;
  font-weight: 600;
}
.search-sidebar-filters .text-muted.small {
  font-size: 12px;
  color: #9A9A9A;
  margin-top: 6px;
}

/* Mobile sidebar collapse */
@media (max-width: 991px) {
  #filterBtn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    height: 44px;
    background: #FAFAFA;
    border: 1px solid #CCCCCC;
    font-size: 15px;
    font-weight: 600;
    color: #21282D;
    margin-bottom: 10px;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
  }
  .search-sidebar-filters {
    display: none;
  }
}
@media (min-width: 992px) {
  #filterBtn {
    display: none !important;
  }
  .search-sidebar-filters {
    display: block !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   SEARCH PAGE — Figma Ürün Listeleme Entegrasyonu (Birebir)
   ════════════════════════════════════════════════════════════════ */

.search-figma-wrapper {
  max-width: none;
  margin: 0 5.25%;
  padding: 24px 0 0;
}

/* ── Layout ───────────────────────────────────────────────────── */
.search-figma-inner {
  display: flex;
  gap: clamp(24px, 3.91vw, 75px);
  align-items: stretch;
  margin-bottom: 40px;
}
.search-sidebar {
  width: clamp(200px, 18.23vw, 350px);
  flex-shrink: 0;
  border-right: 1px solid #CCCCCC;
  padding-right: clamp(12px, 1.56vw, 30px);
}
.search-main {
  flex: 1;
  min-width: 0;
}
@media (max-width: 991px) {
  .search-figma-inner {
    flex-direction: column;
    gap: 16px;
  }
  .search-sidebar {
    width: 100%;
  }
}

/* ── Active Filters Banner Strip ─────────────────────────────── */
.search-active-filter-bar {
  background: rgba(11, 103, 118, 0.12);
  min-height: 44px;
  height: auto;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  flex-wrap: wrap;
}
.search-active-filter-bar:empty {
  display: none;
}

/* ── Top Controls ────────────────────────────────────────────── */
.search-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin-bottom: 40px;
}
.results-count {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  min-height: auto !important;
  line-height: 1.2;
  display: block !important;
  padding: 0 !important;
}
.results-count span {
  font-size: 20px !important;
  color: #000 !important;
  padding: 0 !important;
  display: inline !important;
}
.results-count strong,
.results-count span strong,
.results-count span b {
  font-weight: 700 !important;
}
.search-controls-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Sort / Show boxes */
.search-sort-box,
.search-show-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  background: #FAFAFA;
  border: 1px solid #CCCCCC;
  border-radius: 0;
  padding: 0 12px;
}
.search-sort-box {
  width: 260px;
}
.search-show-box {
  width: 138px;
}
.search-sort-label {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}
.search-sort-box .selectboxit-container,
.search-show-box .selectboxit-container {
  width: auto !important;
  min-width: 0 !important;
}
.search-sort-box .selectboxit,
.search-show-box .selectboxit {
  height: 46px !important;
  line-height: 46px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 18px 0 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000 !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.search-sort-box .selectboxit-text,
.search-show-box .selectboxit-text {
  text-align: left !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000 !important;
  max-width: none !important;
  width: auto !important;
}
.search-sort-box .selectboxit-arrow-container,
.search-show-box .selectboxit-arrow-container {
  width: 20px !important;
  right: 0 !important;
}
.search-sort-box .selectboxit-arrow,
.search-show-box .selectboxit-arrow {
  border-top-color: #111 !important;
}
.search-sort-box .selectboxit-options,
.search-show-box .selectboxit-options {
  min-width: 100% !important;
  border: 1px solid #CCCCCC !important;
  border-top: 0 !important;
  background: #fff !important;
  left: -12px !important;
  margin-top: 0 !important;
}
.search-sort-box .selectboxit-option-anchor,
.search-show-box .selectboxit-option-anchor {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #222 !important;
  padding: 9px 14px !important;
}
.search-sort-box .selectboxit-option.selectboxit-selected .selectboxit-option-anchor,
.search-sort-box .selectboxit-option.selectboxit-focus .selectboxit-option-anchor,
.search-show-box .selectboxit-option.selectboxit-selected .selectboxit-option-anchor,
.search-show-box .selectboxit-option.selectboxit-focus .selectboxit-option-anchor {
  background: #e8f0f3 !important;
}

/* View Toggle */
.view-switcher {
  display: flex;
  align-items: center;
  gap: 25px;
}
.view-switcher .viewSwitcher,
.view-switcher .viewSwitcher.btn-primary,
.view-switcher .viewSwitcher.btn-default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #9A9A9A;
  padding: 0;
  border-radius: 0;
  transition: color .2s ease;
  background: transparent;
  border: none;
}
.view-switcher .viewSwitcher.btn-primary,
.view-switcher .viewSwitcher:hover {
  color: #4A4A4A;
}
.view-icon-grid-mini {
  display: grid;
  grid-template-columns: 6px 6px;
  grid-template-rows: 6px 6px;
  gap: 2px;
  width: 14px;
  height: 14px;
}
.view-icon-grid-mini i {
  display: block;
  background: #9A9A9A;
}
.view-switcher .viewSwitcher.btn-primary .view-icon-grid-mini i,
.view-switcher .viewSwitcher:hover .view-icon-grid-mini i {
  background: #4A4A4A;
}
.view-icon-list-mini {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
  height: 14px;
}
.view-icon-list-mini .list-bar {
  display: flex;
  align-items: center;
  gap: 4px;
}
.view-icon-list-mini .list-dot {
  width: 4px; height: 4px;
  background: #9A9A9A;
  border-radius: 50%;
}
.view-icon-list-mini .list-line {
  flex: 1;
  height: 2px;
  background: #9A9A9A;
  border-radius: 1px;
}
.view-switcher .view-btn-list.btn-primary .list-dot,
.view-switcher .view-btn-list.btn-primary .list-line,
.view-switcher .view-btn-list:hover .list-dot,
.view-switcher .view-btn-list:hover .list-line {
  background: #4A4A4A;
}

.search-controls-right .view-switcher .viewSwitcher .view-label {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: inherit !important;
  line-height: 1 !important;
}

.search-controls-right .view-switcher .viewSwitcher.btn-primary,
.search-controls-right .view-switcher .viewSwitcher.btn-default {
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
}

/* ── Product Grid ────────────────────────────────────────────── */
.search-product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: clamp(12px, 7.16vw, 138px);
  row-gap: clamp(32px, 5.38vw, 103px);
  margin-top: 0;
  padding: 0 clamp(12px, 2.93vw, 56px);
}

/* Search grid card overrides */
.search-product-grid .book-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
  padding: 0 !important;
  justify-content: flex-start !important;
}
.search-product-grid .book-cover-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  background: #F0EDE8;
}
.search-product-grid .btn-wishlist {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: all .2s ease;
  z-index: 5;
}
.search-product-grid .btn-wishlist svg {
  width: 16px;
  height: 16px;
}
.search-product-grid .btn-add-to-cart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  height: 38px;
  background: #fff;
  color: #0B6776;
  border: 2px solid #0B6776;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s ease;
  opacity: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-product-grid .book-card:hover .btn-add-to-cart {
  opacity: 1;
}
.search-product-grid .btn-add-to-cart:hover {
  background: #00414B;
  color: #fff;
  border-color: #00414B;
}
.search-product-grid .book-info {
  padding-top: clamp(10px, 0.99vw, 19px);
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
.search-product-grid .book-title {
  font-family: 'Lato', sans-serif;
  font-size: clamp(13px, 1.17vw, 22.5px);
  font-weight: 600;
  color: #000;
  line-height: 1.28;
  text-transform: capitalize;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-product-grid .book-title a {
  color: #000;
}
.search-product-grid .book-author {
  font-family: 'Lato', sans-serif;
  font-size: clamp(12px, 1.09vw, 21px);
  font-weight: 500;
  color: #0B6776;
  line-height: 1.3;
  margin: clamp(4px, 0.42vw, 8px) 0 0 0;
}
.search-product-grid .book-condition {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: clamp(12px, 1.09vw, 21px);
  font-weight: 400;
  color: #5A5A5A;
  line-height: 1.3;
  margin: clamp(3px, 0.39vw, 7.5px) 0 0 0;
}
.search-product-grid .book-pricing {
  margin-top: clamp(4px, 0.52vw, 10px);
}
.search-product-grid .book-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.search-product-grid .book-price {
  font-family: 'Lato', sans-serif;
  font-size: clamp(12px, 1.09vw, 21px);
  font-weight: 600;
  color: #000;
}
.search-product-grid .book-discount {
  font-family: 'Lato', sans-serif;
  font-size: clamp(10px, 0.73vw, 14px);
  font-weight: 600;
  color: #fff;
  background: #94271A;
  padding: 1px 5px;
}
.search-product-grid .book-old-price {
  font-family: 'Lato', sans-serif;
  font-size: clamp(10px, 0.73vw, 14px);
  color: #888;
  text-decoration: line-through;
  display: block;
  margin-top: 2px;
}

/* Badge overrides for search */
.search-product-grid .badge-wrap {
  top: 0;
  left: -8px;
}

@media (max-width: 1199px) {
  .search-product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 16px;
  }
}
@media (max-width: 991px) {
  .search-product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 14px;
  }
  .search-top-bar {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 12px;
    margin-bottom: 24px;
  }
  .search-controls-right {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .search-product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 10px;
  }
  .search-top-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .search-controls-right {
    width: 100%;
    justify-content: space-between;
  }
  .search-sort-box,
  .search-show-box {
    width: auto;
    flex: 1;
    min-width: 120px;
  }
}
@media (max-width: 540px) {
  .search-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
  }
}
@media (max-width: 480px) {
  .search-top-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }
  .results-count {
    font-size: 13px;
  }
  .search-controls-right {
    width: 100%;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .search-show-box {
    flex-shrink: 0;
    width: 110px;
    min-width: 0;
    padding: 0 8px;
  }
  .search-sort-box {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
  }
  .search-sort-label {
    font-size: 13px;
    white-space: nowrap;
  }
  .view-switcher {
    flex-shrink: 0;
  }
}

/* ── List View ───────────────────────────────────────────────── */
.search-product-grid.list-view-card {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.search-product-grid.list-view-card .book-card.product-list-view {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 63px !important;
  padding: 28px 0 !important;
  border-bottom: 1px solid #CCCCCC !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  max-width: 100% !important;
  position: relative !important;
  min-height: 0 !important;
}

/* Book cover */
.search-product-grid.list-view-card .book-card.product-list-view .book-cover-wrap {
  width: 209px !important;
  height: 313px !important;
  aspect-ratio: unset !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  min-width: 209px !important;
  align-self: flex-start !important;
}
.search-product-grid.list-view-card .book-card.product-list-view .book-cover-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.search-product-grid.list-view-card .book-card.product-list-view .book-cover-wrap .btn-add-to-cart {
  display: none !important;
}

/* Book info column: stacks meta on top, footer row on bottom */
.search-product-grid.list-view-card .book-card.product-list-view .book-info {
  flex: 1 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 0 !important;
  justify-content: space-between !important;
}

/* Top meta: title, author, publisher */
.search-product-grid.list-view-card .book-card.product-list-view .book-meta {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-bottom: 20px !important;
}
/* Hide grid-specific fields from meta in list mode */
.search-product-grid.list-view-card .book-card.product-list-view .book-meta .book-condition { display: none !important; }
.search-product-grid.list-view-card .book-card.product-list-view .book-meta .book-pricing { display: none !important; }

.search-product-grid.list-view-card .book-card.product-list-view .book-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  margin: 0 0 8px !important;
  color: #21282D !important;
}
.search-product-grid.list-view-card .book-card.product-list-view .book-title a { color: inherit !important; }

.search-product-grid.list-view-card .book-card.product-list-view .book-author {
  font-size: 15px !important;
  margin: 0 !important;
  color: #0B6776 !important;
  font-weight: 400 !important;
  font-family: Georgia, serif !important;
}
.search-product-grid.list-view-card .book-card.product-list-view .book-publisher {
  display: block !important;
  font-size: 15px !important;
  color: #0B6776 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  font-family: Georgia, serif !important;
}
.search-product-grid.list-view-card .list-label {
  display: inline !important;
  color: #5A5A5A !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: 'Lato', sans-serif !important;
}

/* Footer row: kondisyon | fiyat | button — separated by top border */
.search-product-grid.list-view-card .book-card.product-list-view .book-list-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  border-top: 1px solid #CCCCCC !important;
  padding-top: 12px !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}

.search-product-grid.list-view-card .book-card.product-list-view .book-footer-kondisyon {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 400px !important;
  padding-right: 24px !important;
  border-right: 1px solid #CCCCCC !important;
}
.search-product-grid.list-view-card .book-card.product-list-view .book-footer-fiyat {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
  padding: 0 24px !important;
}

.search-product-grid.list-view-card .footer-label {
  font-size: 15px !important;
  color: #5A5A5A !important;
  font-weight: 400 !important;
  display: block !important;
  font-family: 'Lato', sans-serif !important;
}
.search-product-grid.list-view-card .book-condition-value {
  font-size: 17px !important;
  color: #0B6776 !important;
  font-weight: 400 !important;
  font-family: Georgia, serif !important;
}
.search-product-grid.list-view-card .book-footer-pricing {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px !important;
}
.search-product-grid.list-view-card .book-footer-pricing .book-price {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #000 !important;
}
.search-product-grid.list-view-card .book-footer-pricing .book-discount {
  font-size: 14px !important;
  color: #0B6776 !important;
  font-weight: 400 !important;
  background: none !important;
  padding: 0 !important;
}
.search-product-grid.list-view-card .book-footer-pricing .book-old-price {
  font-size: 15px !important;
  color: #999 !important;
  text-decoration: line-through !important;
  display: inline !important;
}

/* Sepete Ekle button */
.search-product-grid.list-view-card .book-card.product-list-view .book-purchase {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 24px !important;
  align-self: center !important;
}
.search-product-grid.list-view-card .book-card.product-list-view .btn-add-to-cart-list {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 188px !important;
  height: 63px !important;
  background: #0B6776 !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .2s ease !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}
.search-product-grid.list-view-card .book-card.product-list-view .btn-add-to-cart-list:hover {
  background: #00414B !important;
}

/* Hide list-only elements in grid mode */
.search-product-grid:not(.list-view-card) .book-list-footer { display: none !important; }
.search-product-grid:not(.list-view-card) .book-shop { display: none !important; }
.search-product-grid:not(.list-view-card) .book-publisher { display: none !important; }

/* Hide list-only elements in home page carousels */
.book-row .book-list-footer { display: none !important; }
.book-row .book-shop { display: none !important; }
.book-row .book-publisher { display: none !important; }
.search-product-grid:not(.list-view-card) .list-label { display: none !important; }

/* Hide grid-only elements in list mode */
.search-product-grid.list-view-card .badge-wrap { display: none !important; }
.search-product-grid.list-view-card .book-shop { display: none !important; }
/* Keep wishlist visible in list view, position on cover */
.search-product-grid.list-view-card .btn-wishlist {
  display: flex !important;
  top: 8px !important;
  right: 8px !important;
}

@media (max-width: 991px) {
  .search-product-grid.list-view-card .book-card.product-list-view .book-footer-kondisyon {
    min-width: 140px !important;
  }
  .search-product-grid.list-view-card .book-card.product-list-view .btn-add-to-cart-list {
    width: 160px !important;
  }
}
@media (max-width: 767px) {
  .search-product-grid.list-view-card .book-card.product-list-view {
    gap: 14px !important;
    padding: 16px 0 !important;
  }
  .search-product-grid.list-view-card .book-card.product-list-view .book-cover-wrap {
    width: 80px !important;
    height: 120px !important;
    min-width: 80px !important;
  }
  .search-product-grid.list-view-card .book-card.product-list-view .book-list-footer {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .search-product-grid.list-view-card .book-card.product-list-view .book-footer-kondisyon {
    border-right: none !important;
    padding-right: 0 !important;
    min-width: 0 !important;
  }
  .search-product-grid.list-view-card .book-card.product-list-view .book-footer-fiyat {
    padding: 0 !important;
  }
  .search-product-grid.list-view-card .book-card.product-list-view .book-purchase {
    padding-left: 0 !important;
    width: 100% !important;
  }
  .search-product-grid.list-view-card .book-card.product-list-view .btn-add-to-cart-list {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
  }
}

/* ── Pagination ──────────────────────────────────────────────── */
.search-pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 80px 0 40px;
}
.search-pagination-wrap .pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-pagination-wrap .pagination li {
  display: inline-flex;
}
.search-pagination-wrap .pagination li a,
.search-pagination-wrap .pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 2px;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #0B6776;
  text-decoration: none;
}
.search-pagination-wrap .pagination li.active span {
  color: #4A4A4A;
}
.search-pagination-wrap .pagination li.disabled span {
  color: #9A9A9A;
  opacity: .6;
}

/* ── Sidebar Filters (Figma Style) ───────────────────────────── */
.search-sidebar-filters {
  width: 100%;
}

/* Active filter chips (selected filters shown at top) */
.search-sidebar-filters .selected-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}
.search-sidebar-filters .selected-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 12px;
  height: 40px;
  background: #F2F2F2;
  border: none;
  border-radius: 0;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #21282D;
  text-decoration: none;
  position: relative;
}
.search-sidebar-filters .selected-filter-chip::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 5px;
  border-left: 2px solid #0B6776;
  border-bottom: 2px solid #0B6776;
  transform: rotate(-45deg) translateY(-2px);
  margin-left: 6px;
  flex-shrink: 0;
}
.search-sidebar-filters .selected-filter-chip i {
  display: none;
}
.search-sidebar-filters .selected-filter-chip:hover {
  background: #E8E8E8;
}

/* Filter section groups */
.search-sidebar-filters .category-filters-section {
  border-bottom: none;
  padding: 0;
  margin-bottom: 30px;
}
.search-sidebar-filters .category-filters-section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Lato', sans-serif;
  font-size: clamp(14px, 1.17vw, 22.5px) !important;
  font-weight: 600;
  color: #000;
  margin: 0 0 0 0 !important;
  padding-bottom: clamp(10px, 0.94vw, 18px) !important;
  text-transform: none !important;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.search-sidebar-filters .category-filters-section h3 .clear-filter {
  font-size: 12px;
  font-weight: 500;
  color: #0B6776;
  text-decoration: none;
  display: none !important;
}

/* +/– toggle icon */
.search-sidebar-filters .filter-toggle-btn {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  margin-left: 8px;
  padding: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-60%);
  flex-shrink: 0;
}
.search-sidebar-filters .filter-icon-minus {
  display: block;
  width: 16px;
  height: 2px;
  background: #000;
}
.search-sidebar-filters .filter-icon-plus {
  display: block;
  width: 16px;
  height: 2px;
  background: #000;
  position: relative;
}
.search-sidebar-filters .filter-icon-plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 16px;
  background: #000;
}

/* Filter body */
.search-sidebar-filters .filter-section-body {
  padding-top: 0;
}

/* ── Filter item rows (Figma: plain teal text, no border, 34px spacing) ── */
.search-sidebar-filters .filter-section-body .checkbox,
.search-sidebar-filters .cateogry-filters-list .checkbox {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: relative !important;
  background: transparent !important;
}
.search-sidebar-filters .filter-section-body .checkbox label,
.search-sidebar-filters .cateogry-filters-list .checkbox label {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: clamp(28px, 2.23vw, 42.5px) !important;
  width: 100% !important;
  padding: clamp(5px, 0.46vw, 8.75px) 38px clamp(5px, 0.46vw, 8.75px) 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  font-family: 'Lato', sans-serif !important;
  font-size: clamp(13px, 1.30vw, 25px) !important;
  font-weight: 400 !important;
  color: #0B6776 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  position: relative !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.search-sidebar-filters .filter-section-body .checkbox label:hover,
.search-sidebar-filters .cateogry-filters-list .checkbox label:hover {
  color: #00414B !important;
}

/* Checked state: Figma = 55px F2F2F2 rect, dark text, teal checkmark, no border */
.search-sidebar-filters .filter-section-body .checkbox:has(input:checked),
.search-sidebar-filters .cateogry-filters-list .checkbox:has(input:checked) {
  background: #F2F2F2 !important;
  border: none !important;
}
.search-sidebar-filters .filter-section-body .checkbox:has(input:checked) label,
.search-sidebar-filters .cateogry-filters-list .checkbox:has(input:checked) label {
  color: #21282D !important;
  background: transparent !important;
  height: clamp(44px, 3.61vw, 68.75px) !important;
  min-height: clamp(44px, 3.61vw, 68.75px) !important;
  padding: 0 38px 0 0 !important;
}
.search-sidebar-filters .filter-section-body .checkbox:has(input:checked) label::after,
.search-sidebar-filters .cateogry-filters-list .checkbox:has(input:checked) label::after {
  content: '';
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 12px !important;
  height: 7px !important;
  border-left: 2px solid #0B6776 !important;
  border-bottom: 2px solid #0B6776 !important;
  transform: translateY(-65%) rotate(-45deg) !important;
  flex-shrink: 0 !important;
}

/* Hide native checkbox + iCheck widgets */
.search-sidebar-filters .filter-section-body .checkbox input[type="checkbox"],
.search-sidebar-filters .filter-section-body .checkbox input.i-check,
.search-sidebar-filters .cateogry-filters-list .checkbox input[type="checkbox"],
.search-sidebar-filters .cateogry-filters-list .checkbox input.i-check,
.search-sidebar-filters .icheckbox_minimal,
.search-sidebar-filters .icheckbox_minimal-blue,
.search-sidebar-filters .iradio_minimal,
.search-sidebar-filters .iradio_minimal-blue {
  display: none !important;
}

/* Filter search box (Figma: 55px tall, 20px text, #6A6A6A placeholder) */
.search-sidebar-filters .filter-search-wrap {
  position: relative;
  margin-bottom: clamp(12px, 1.31vw, 25px);
}
.search-sidebar-filters .filter-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #0B6776;
  font-size: 20px;
  pointer-events: none;
}
.search-sidebar-filters .filter-search {
  width: 100%;
  height: clamp(44px, 3.61vw, 68.75px) !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 0 !important;
  padding: 0 40px 0 12px !important;
  font-family: 'Lato', sans-serif !important;
  font-size: clamp(13px, 1.30vw, 25px) !important;
  color: #000 !important;
  margin-bottom: 0 !important;
  outline: none !important;
  background: #fff !important;
  box-shadow: none !important;
}
.search-sidebar-filters .filter-search::placeholder {
  color: #6A6A6A;
}
.search-sidebar-filters .filter-search:focus {
  border-color: #0B6776 !important;
}

/* Price min/max inputs */
.search-sidebar-filters .price-filter-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}
.search-sidebar-filters .price-filter-input {
  flex: 1;
  height: 55px;
  border: 1px solid #CCCCCC;
  border-radius: 0;
  padding: 0 8px;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  text-align: center;
  color: #000;
}
.search-sidebar-filters .price-filter-apply {
  width: 55px;
  height: 55px;
  background: #0B6776;
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.search-sidebar-filters .price-filter-apply:hover {
  background: #00414B;
}

/* Price option list (Figma: plain text, no border; active = 55px F2F2F2) */
.search-sidebar-filters .price-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-sidebar-filters .price-filter-list li {
  margin: 0;
  border: none;
  position: relative;
}
.search-sidebar-filters .price-filter-list a {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 34px;
  padding: 7px 38px 7px 0;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #0B6776;
  text-decoration: none;
  position: relative;
}
.search-sidebar-filters .price-filter-list a:hover {
  color: #00414B;
}
.search-sidebar-filters .price-filter-list a.active {
  background: #F2F2F2;
  color: #21282D;
  font-weight: 400;
  height: 55px;
  min-height: 55px;
  padding: 0 38px 0 0;
}
.search-sidebar-filters .price-filter-list a.active::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 7px;
  border-left: 2px solid #0B6776;
  border-bottom: 2px solid #0B6776;
  transform: translateY(-65%) rotate(-45deg);
}

/* "Daha fazla" link */
.search-sidebar-filters .filter-more-link {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #9A9A9A;
  text-decoration: underline;
  margin-top: 10px;
  cursor: pointer;
}
.search-sidebar-filters .filter-more-link:hover {
  color: #6A6A6A;
}

/* Category filter list overrides */
.search-sidebar-filters .category-filters-section h3 .fa-angle-left,
.search-sidebar-filters .category-filters-section .form-group {
  display: none !important;
}
.search-sidebar-filters .cateogry-filters-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-sidebar-filters .cateogry-filters-list li {
  margin: 0;
  padding: 0;
  border: none;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #0B6776;
  line-height: 1;
  position: relative;
}
/* Plain text li items (no checkbox) */
.search-sidebar-filters .cateogry-filters-list > li:empty {
  display: none;
}
.search-sidebar-filters .cateogry-filters-list > li:not(:has(.checkbox)) {
  display: flex;
  align-items: center;
  min-height: clamp(28px, 2.23vw, 42.5px);
  padding: clamp(5px, 0.46vw, 8.75px) 0;
}
.search-sidebar-filters .cateogry-filters-list li a {
  display: flex;
  align-items: center;
  height: auto;
  min-height: clamp(28px, 2.23vw, 42.5px);
  padding: clamp(5px, 0.46vw, 8.75px) 0;
  color: #0B6776;
  text-decoration: none;
  width: 100%;
}
.search-sidebar-filters .cateogry-filters-list li a:hover {
  color: #00414B;
}
.search-sidebar-filters .cateogry-filters-list h4,
.search-sidebar-filters .cateogry-filters-list h5,
.search-sidebar-filters .cateogry-filters-list h4.d-flex,
.search-sidebar-filters .cateogry-filters-list h4.d-inline-flex,
.search-sidebar-filters .cateogry-filters-list h5.d-flex,
.search-sidebar-filters .cateogry-filters-list h5.d-inline-flex {
  display: none !important;
}
.search-sidebar-filters .cateogry-filters-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Mobile sidebar collapse */
@media (max-width: 991px) {
  #filterBtn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    height: 44px;
    background: #FAFAFA;
    border: 1px solid #CCCCCC;
    font-size: 15px;
    font-weight: 600;
    color: #21282D;
    margin-bottom: 10px;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
  }
  .search-sidebar-filters {
    display: none;
  }
}
@media (min-width: 992px) {
  #filterBtn {
    display: none !important;
  }
  .search-sidebar-filters {
    display: block !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   SEARCH TOP CONTROLS — Figma Birebir Overrides
   ════════════════════════════════════════════════════════════════ */

.search-controls-right {
  display: flex !important;
  align-items: center !important;
  gap: 25px !important;
}

/* Show / Sort boxes exact sizes */
.search-controls-right .search-show-box {
  width: 138px !important;
  height: 50px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  background: #FAFAFA !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.search-controls-right .search-sort-box {
  width: 272px !important;
  height: 50px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  background: #FAFAFA !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.search-controls-right .search-sort-label {
  font-family: 'Lato', sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #000 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* SelectBoxIt overrides inside search boxes */
.search-controls-right .search-sort-box .selectboxit-container,
.search-controls-right .search-show-box .selectboxit-container {
  width: auto !important;
  min-width: 0 !important;
}
.search-controls-right .search-sort-box .selectboxit,
.search-controls-right .search-show-box .selectboxit {
  height: 46px !important;
  line-height: 46px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 18px 0 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000 !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.search-controls-right .search-sort-box .selectboxit-text,
.search-controls-right .search-show-box .selectboxit-text {
  text-align: left !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000 !important;
  max-width: none !important;
  width: auto !important;
}
.search-controls-right .search-sort-box .selectboxit-arrow-container,
.search-controls-right .search-show-box .selectboxit-arrow-container {
  width: 16px !important;
  right: 0 !important;
}
.search-controls-right .search-sort-box .selectboxit-arrow,
.search-controls-right .search-show-box .selectboxit-arrow {
  border-top-color: #111 !important;
  border-width: 5px 4px 0 !important;
}

/* View Toggle exact figma style */
.search-controls-right .view-switcher {
  display: flex !important;
  align-items: center !important;
  gap: 52px !important;
}
.search-controls-right .view-switcher .viewSwitcher,
.search-controls-right .view-switcher .viewSwitcher.btn-primary,
.search-controls-right .view-switcher .viewSwitcher.btn-default {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #9A9A9A !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
  line-height: 1 !important;
}
.search-controls-right .view-switcher .viewSwitcher.btn-primary,
.search-controls-right .view-switcher .viewSwitcher:hover {
  color: #4A4A4A !important;
}

/* Izgara icon — 2×2 squares 15px each, 4px gap, 2px border */
.search-controls-right .view-icon-grid-mini {
  display: grid !important;
  grid-template-columns: 15px 15px !important;
  grid-template-rows: 15px 15px !important;
  gap: 4px !important;
  width: 34px !important;
  height: 34px !important;
}
.search-controls-right .view-icon-grid-mini i {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  background: #fff !important;
  border: 2px solid #9A9A9A !important;
  box-sizing: border-box !important;
}
.search-controls-right .viewSwitcher.btn-primary .view-icon-grid-mini i,
.search-controls-right .viewSwitcher:hover .view-icon-grid-mini i {
  border-color: #4A4A4A !important;
}

/* Liste icon — 3 rows with dot + variable length lines */
.search-controls-right .view-icon-list-mini {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 25px !important;
  height: 24px !important;
}
.search-controls-right .view-icon-list-mini .list-bar {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.search-controls-right .view-icon-list-mini .list-dot {
  width: 5px !important;
  height: 5px !important;
  background: #9A9A9A !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.search-controls-right .view-icon-list-mini .list-line {
  height: 3px !important;
  background: #9A9A9A !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}
.search-controls-right .view-icon-list-mini .list-bar--1 .list-line {
  width: 20px !important;
}
.search-controls-right .view-icon-list-mini .list-bar--2 .list-line {
  width: 15px !important;
}
.search-controls-right .view-icon-list-mini .list-bar--3 .list-line {
  width: 11px !important;
}
.search-controls-right .viewSwitcher.btn-primary .view-icon-list-mini .list-dot,
.search-controls-right .viewSwitcher:hover .view-icon-list-mini .list-dot,
.search-controls-right .viewSwitcher.btn-primary .view-icon-list-mini .list-line,
.search-controls-right .viewSwitcher:hover .view-icon-list-mini .list-line {
  background: #4A4A4A !important;
}

.search-controls-right .view-switcher .viewSwitcher .view-label {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════════

/* ════════════════════════════════════════════════════════════════

/* ════════════════════════════════════════════════════════════════

/* ════════════════════════════════════════════════════════════════
   SEARCH TOP CONTROLS — Final Figma Overrides (v5)
   ════════════════════════════════════════════════════════════════ */

.search-controls-right {
  display: flex !important;
  align-items: center !important;
  gap: 25px !important;
}

/* Sort / Show boxes exact figma sizing */
.search-controls-right .search-show-box {
  width: 138px !important;
  height: 50px !important;
  padding: 0 12px !important;
  background: #FAFAFA !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.search-controls-right .search-sort-box {
  width: 272px !important;
  height: 50px !important;
  padding: 0 12px !important;
  background: #FAFAFA !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* SelectBoxIt button text never truncate */
.search-controls-right .search-show-box .selectboxit-container,
.search-controls-right .search-sort-box .selectboxit-container {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}
.search-controls-right .search-show-box .selectboxit,
.search-controls-right .search-sort-box .selectboxit {
  width: 100% !important;
  max-width: none !important;
  height: 46px !important;
  line-height: 46px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 16px 0 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000 !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
.search-controls-right .search-show-box .selectboxit-text,
.search-controls-right .search-sort-box .selectboxit-text {
  text-align: left !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000 !important;
  max-width: none !important;
  width: auto !important;
  display: inline !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 0 !important;
  margin: 0 !important;
}
.search-controls-right .search-show-box .selectboxit-arrow-container,
.search-controls-right .search-sort-box .selectboxit-arrow-container {
  width: 16px !important;
  right: 0 !important;
}
.search-controls-right .search-show-box .selectboxit-arrow,
.search-controls-right .search-sort-box .selectboxit-arrow {
  border-top-color: #111 !important;
  border-width: 5px 4px 0 !important;
}

/* Dropdown list (ul) exact figma style */
.search-controls-right .search-show-box .selectboxit-list,
.search-controls-right .search-sort-box .selectboxit-list {
  width: 138px !important;
  min-width: 138px !important;
  max-width: 138px !important;
  left: auto !important;
  right: 0 !important;
  top: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #CCCCCC !important;
  border-top: none !important;
  background: #fff !important;
  box-sizing: border-box !important;
  list-style: none !important;
}
.search-controls-right .search-sort-box .selectboxit-list {
  width: 272px !important;
  min-width: 272px !important;
  max-width: 272px !important;
}

/* Dropdown option (li) */
.search-controls-right .search-show-box .selectboxit-list > .selectboxit-option,
.search-controls-right .search-sort-box .selectboxit-list > .selectboxit-option {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

/* Dropdown option anchor (a) */
.search-controls-right .search-show-box .selectboxit-list > .selectboxit-option > .selectboxit-option-anchor,
.search-controls-right .search-sort-box .selectboxit-list > .selectboxit-option > .selectboxit-option-anchor {
  display: flex !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #222 !important;
  padding: 16px 14px !important;
  white-space: nowrap !important;
  background: transparent !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  height: 48px !important;
  box-sizing: border-box !important;
}

/* Dropdown hover / selected background fills entire row */
.search-controls-right .search-show-box .selectboxit-list > .selectboxit-option.selectboxit-focus,
.search-controls-right .search-show-box .selectboxit-list > .selectboxit-option.selectboxit-selected,
.search-controls-right .search-sort-box .selectboxit-list > .selectboxit-option.selectboxit-focus,
.search-controls-right .search-sort-box .selectboxit-list > .selectboxit-option.selectboxit-selected {
  background: #e8f0f3 !important;
}
.search-controls-right .search-show-box .selectboxit-list > .selectboxit-option.selectboxit-focus > .selectboxit-option-anchor,
.search-controls-right .search-show-box .selectboxit-list > .selectboxit-option.selectboxit-selected > .selectboxit-option-anchor,
.search-controls-right .search-sort-box .selectboxit-list > .selectboxit-option.selectboxit-focus > .selectboxit-option-anchor,
.search-controls-right .search-sort-box .selectboxit-list > .selectboxit-option.selectboxit-selected > .selectboxit-option-anchor {
  background: transparent !important;
  color: #000 !important;
}

/* Remove extra label prefix span */
.search-controls-right .search-sort-label {
  display: none !important;
}

/* View Toggle exact figma style */
.search-controls-right .view-switcher {
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;
}
.search-controls-right .view-switcher .viewSwitcher,
.search-controls-right .view-switcher .viewSwitcher.btn-primary,
.search-controls-right .view-switcher .viewSwitcher.btn-default {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #9A9A9A !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
  line-height: 1 !important;
}
.search-controls-right .view-switcher .viewSwitcher.btn-primary,
.search-controls-right .view-switcher .viewSwitcher:hover {
  color: #4A4A4A !important;
}

/* Izgara icon — 2x2 empty squares, 15px each, 4px gap, 2px border */
.search-controls-right .view-icon-grid {
  display: grid !important;
  grid-template-columns: 15px 15px !important;
  grid-template-rows: 15px 15px !important;
  gap: 4px !important;
  width: 34px !important;
  height: 34px !important;
}
.search-controls-right .view-icon-grid .grid-cell {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  background: transparent !important;
  border: 2px solid #9A9A9A !important;
  box-sizing: border-box !important;
}
.search-controls-right .viewSwitcher.btn-primary .view-icon-grid .grid-cell,
.search-controls-right .viewSwitcher:hover .view-icon-grid .grid-cell {
  border-color: #4A4A4A !important;
}

/* Liste icon — 3 rows with dot + variable length lines */
.search-controls-right .view-icon-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 25px !important;
  height: 24px !important;
}
.search-controls-right .view-icon-list .list-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.search-controls-right .view-icon-list .list-dot {
  width: 5px !important;
  height: 5px !important;
  background: #9A9A9A !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.search-controls-right .view-icon-list .list-line {
  height: 3px !important;
  background: #9A9A9A !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}
.search-controls-right .view-icon-list .list-line--1 {
  width: 20px !important;
}
.search-controls-right .view-icon-list .list-line--2 {
  width: 15px !important;
}
.search-controls-right .view-icon-list .list-line--3 {
  width: 11px !important;
}
.search-controls-right .viewSwitcher.btn-primary .view-icon-list .list-dot,
.search-controls-right .viewSwitcher:hover .view-icon-list .list-dot,
.search-controls-right .viewSwitcher.btn-primary .view-icon-list .list-line,
.search-controls-right .viewSwitcher:hover .view-icon-list .list-line {
  background: #4A4A4A !important;
}

.search-controls-right .view-switcher .viewSwitcher .view-label {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* ── Category Page Hero ───────────────────────────────────────── */
.cat-page-hero {
  max-width: 1720px;
  margin: 0 auto;
  padding: 28px 20px 0;
  margin-bottom: 24px;
}
.cat-page-hero-inner {
  text-align: center;
}
.cat-breadcrumb {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: #0B6776;
  margin-bottom: 14px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.cat-breadcrumb a {
  color: #0B6776;
  text-decoration: none;
}
.cat-breadcrumb a:hover {
  text-decoration: underline;
}
.cat-breadcrumb-sep {
  color: #21282D;
  margin: 0 6px;
}
.cat-breadcrumb-current {
  color: #21282D;
}
.cat-page-title {
  font-family: 'Georgia', serif;
  font-size: 43px;
  font-weight: 400;
  color: #21282D;
  text-align: center;
  margin: 0 0 18px;
  line-height: 1.1;
}
.cat-page-description {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #21282D;
  line-height: 24px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 10px;
}
@media (max-width: 991px) {
  .cat-page-title { font-size: 28px; }
  .cat-page-description { font-size: 14px; line-height: 22px; }
}
@media (max-width: 575px) {
  .cat-page-title { font-size: 22px; }
  .cat-page-hero { padding-top: 18px; }
}

/* ── Authors / Publishers Index Pages ────────────────────────── */
.ay-page {
  width: 84.375%;
  max-width: 1463px;
  margin: 0 auto 60px;
  padding-top: 40px;
}
.ay-page-title {
  font-family: 'Georgia', serif;
  font-size: 54px;
  font-weight: 400;
  color: #21282D;
  text-align: center;
  margin: 0 0 56px;
  line-height: 1.1;
}
.ay-section {
  margin-bottom: 40px;
}
.ay-letter {
  font-family: 'Georgia', serif;
  font-size: 54px;
  font-weight: 400;
  color: #21282D;
  margin: 0 0 6px;
  line-height: 1.1;
}
.ay-divider {
  border: none;
  border-top: 1px solid #CCCCCC;
  margin: 0 0 16px;
}
.ay-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 19px;
  row-gap: 0;
  list-style: none;
  padding: 0 0 0 100px;
  margin: 0;
}
.ay-item {
  list-style: none;
}
.ay-item a {
  display: block;
  color: #0B6776;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.45;
  padding: 6px 0;
  word-break: break-word;
}
.ay-item a:hover {
  text-decoration: underline;
}
.ay-empty {
  color: #5A5A5A;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  padding: 20px 0;
}
.ay-pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
@media (max-width: 991px) {
  .ay-page-title { font-size: 38px; }
  .ay-letter { font-size: 34px; }
  .ay-grid { grid-template-columns: repeat(3, 1fr); padding-left: 0; }
}
@media (max-width: 575px) {
  .ay-page-title { font-size: 28px; margin-bottom: 32px; }
  .ay-letter { font-size: 26px; }
  .ay-grid { grid-template-columns: repeat(2, 1fr); }
  .ay-item a { font-size: 16px; }
}

/* ── Category Navigation Sidebar ─────────────────────────────── */
.cat-nav-sidebar {
  padding-top: 4px;
}
.cat-nav-section {
  margin-bottom: 32px;
}
.cat-nav-section-header {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin: 0 0 12px;
  padding: 0;
  line-height: 1.2;
}
.cat-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cat-nav-list li {
  margin: 0;
  padding: 0;
}
.cat-nav-link {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #0B6776;
  text-decoration: none;
  display: block;
  padding: 7px 0;
  line-height: 1;
  transition: color 0.15s;
}
.cat-nav-link:hover {
  color: #0B6776;
  text-decoration: underline;
}
.cat-nav-link.active {
  font-weight: 700;
  color: #0B6776;
}
@media (max-width: 991px) {
  .cat-nav-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
  }
  .cat-nav-section {
    flex: 1 1 160px;
    margin-bottom: 20px;
  }
  .cat-nav-link {
    font-size: 16px;
    padding: 5px 0;
  }
}
@media (max-width: 575px) {
  .cat-nav-sidebar {
    gap: 0 20px;
  }
  .cat-nav-section {
    flex: 1 1 130px;
  }
  .cat-nav-link {
    font-size: 15px;
  }
}

/* ==========================================================================
   PRODUCT DETAIL PAGE — Figma Pixel-Perfect Override
   Canvas: 1920px, body zoom: 0.8
   CSS px = Figma visual px / 0.8
   All measurements from Figma urundetay.html
   ========================================================================== */

/* ---- Breadcrumb ---- */
ol.nav-breadcrumb,
ol.breadcrumb.nav-breadcrumb {
  font-size: clamp(13px, 1.12vw, 21.25px) !important;
  font-family: Lato, sans-serif !important;
  background: transparent !important;
  padding: 10px 0 !important;
  margin-bottom: 8px !important;
}
ol.nav-breadcrumb li,
ol.breadcrumb.nav-breadcrumb li {
  font-size: clamp(13px, 1.12vw, 21.25px) !important;
  font-family: Lato, sans-serif !important;
  color: #21282D !important;
}
ol.nav-breadcrumb li a,
ol.breadcrumb.nav-breadcrumb li a {
  color: #0B6776 !important;
  font-size: clamp(13px, 1.12vw, 21.25px) !important;
  text-decoration: none !important;
}
ol.nav-breadcrumb li a:hover,
ol.breadcrumb.nav-breadcrumb li a:hover {
  text-decoration: underline !important;
}
ol.nav-breadcrumb li.active,
ol.breadcrumb.nav-breadcrumb li.active {
  color: #21282D !important;
}
/* Breadcrumb separator */
ol.nav-breadcrumb li + li::before,
ol.breadcrumb.nav-breadcrumb li + li::before {
  content: "/" !important;
  color: #0B6776 !important;
  padding: 0 6px !important;
}
/* Also handle .breadcrumb-section wrapper if present */
.breadcrumb-section .theme-breadcrumb,
.breadcrumb-section ol.breadcrumb {
  font-size: clamp(13px, 1.12vw, 21.25px) !important;
  font-family: Lato, sans-serif !important;
}
.breadcrumb-section .breadcrumb-item a,
.breadcrumb-section .breadcrumb-item span {
  color: #0B6776 !important;
  font-size: clamp(13px, 1.12vw, 21.25px) !important;
}
.breadcrumb-section .breadcrumb-item.active {
  color: #21282D !important;
}
.breadcrumb-section .breadcrumb-item + .breadcrumb-item::before {
  color: #0B6776 !important;
}

/* ---- Product Image ---- */
/* Figma: 400×600px visual → CSS 500×750px */
.pd-gallery {
  background: transparent !important;
  padding: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.jqzoom-wrapper,
.jqzoom-main {
  width: 100% !important;
  max-width: 500px !important;
}
.product-img {
  width: clamp(280px, 26.25vw, 500px) !important;
  height: clamp(420px, 39.37vw, 750px) !important;
  object-fit: cover !important;
  display: block !important;
}
.zoomPad {
  width: clamp(280px, 26.25vw, 500px) !important;
  height: clamp(420px, 39.37vw, 750px) !important;
}

/* ---- Book Title ---- */
/* Figma: 34px visual → 42.5px CSS (Georgia, weight 400) */
h1.pd-title,
.pd-title {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(24px, 2.23vw, 42.5px) !important;
  font-weight: 400 !important;
  color: #21282D !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
}

/* ---- Author / Publisher / Translator meta row ---- */
/* Figma: label 22px visual → 27.5px CSS; value 25px Georgia → 31.25px CSS */
.pd-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 0 !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}
.pd-meta__label {
  font-family: Lato, sans-serif !important;
  font-size: clamp(15px, 1.44vw, 27.5px) !important;
  font-weight: 400 !important;
  color: #5A5A5A !important;
  margin-right: 6px !important;
}
.pd-meta__value,
.pd-meta__value-link,
a.pd-meta__value-link {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(16px, 1.64vw, 31.25px) !important;
  font-weight: 400 !important;
  color: #0B6776 !important;
  margin-right: 12px !important;
  text-decoration: none !important;
}
a.pd-meta__value-link:hover {
  text-decoration: underline !important;
}
.pd-meta__divider {
  color: #CCCCCC !important;
  margin: 0 8px !important;
  font-size: clamp(14px, 1.44vw, 27.5px) !important;
}

/* ---- Ratings Row ---- */
/* Figma: stars 20px, score+review-link 18px visual → 22.5px CSS */
.pd-rating {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.pd-stars img.rating-star {
  width: clamp(14px, 1.31vw, 25px) !important;
  height: clamp(14px, 1.31vw, 25px) !important;
}
.pd-score {
  font-family: Lato, sans-serif !important;
  font-size: clamp(14px, 1.18vw, 22.5px) !important;
  font-weight: 600 !important;
  color: #0B6776 !important;
}
a.pd-review-link,
.pd-review-link {
  font-family: Lato, sans-serif !important;
  font-size: clamp(14px, 1.18vw, 22.5px) !important;
  font-weight: 600 !important;
  color: #0B6776 !important;
  text-decoration: none !important;
}
a.pd-review-link:hover { text-decoration: underline !important; }

/* ---- Condition/Format subtitle above price ---- */
/* Figma: 18px visual → 22.5px CSS, color #5A5A5A */
.pd-subtitle {
  font-family: Lato, sans-serif !important;
  font-size: clamp(13px, 1.18vw, 22.5px) !important;
  font-weight: 400 !important;
  color: #5A5A5A !important;
  margin-bottom: 4px !important;
}

/* ---- Price ---- */
/* Figma: 36px visual (big amount) → 45px CSS */
.pd-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-bottom: 0 !important;
}
.pd-price .tl-currency-inline,
.pd-price-row .pd-price {
  font-size: clamp(28px, 2.36vw, 45px) !important;
  font-family: Lato, sans-serif !important;
  font-weight: 600 !important;
  color: #21282D !important;
  line-height: 1.1 !important;
}
.pd-price .tl-currency-amount {
  font-size: clamp(28px, 2.36vw, 45px) !important;
  font-weight: 600 !important;
  color: #21282D !important;
}
.pd-price .tl-currency-suffix {
  font-size: clamp(14px, 1.18vw, 22.5px) !important;
  font-weight: 600 !important;
  color: #21282D !important;
  line-height: 1.4 !important;
}

/* ---- Section Labels (Cilt Tipi, Kondisyon) ---- */
/* Figma: 22px Lato bold visual → 27.5px CSS */
.pd-section__label,
.pd-section__label--with-icon {
  font-family: Lato, sans-serif !important;
  font-size: clamp(16px, 1.44vw, 27.5px) !important;
  font-weight: 600 !important;
  color: #21282D !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ---- Binding (Cilt Tipi) Buttons ---- */
/* Figma: 135×55px visual → 168.75×68.75px CSS, font 16px visual → 20px CSS */
.pd-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 4px !important;
}
.pd-chip.cover-option {
  width: clamp(108px, 8.86vw, 168.75px) !important;
  height: clamp(44px, 3.61vw, 68.75px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Lato, sans-serif !important;
  font-size: clamp(13px, 1.05vw, 20px) !important;
  font-weight: 400 !important;
  color: #21282D !important;
  border-radius: 0 !important;
  border: 1.25px solid #CCCCCC !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.pd-chip.cover-option.active,
.pd-chip.cover-option:focus {
  background: #F2F2F1 !important;
  border: 3px solid #0B6776 !important;
  color: #21282D !important;
}
.pd-chip.cover-option:hover:not(.active) {
  border-color: #0B6776 !important;
}

/* ---- Condition Buttons ---- */
/* Figma: 135×65px visual → 168.75×81.25px CSS, two-line (name + price) */
.pd-chip.condition-option {
  width: clamp(108px, 8.86vw, 168.75px) !important;
  height: clamp(52px, 4.27vw, 81.25px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  font-family: Lato, sans-serif !important;
  font-size: clamp(13px, 1.05vw, 20px) !important;
  font-weight: 400 !important;
  color: #21282D !important;
  border-radius: 0 !important;
  border: 1.25px solid #CCCCCC !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background 0.2s !important;
  line-height: 1.2 !important;
}
.pd-chip.condition-option.active,
.pd-chip.condition-option:focus {
  background: #F2F2F1 !important;
  border: 3px solid #0B6776 !important;
  color: #21282D !important;
}
.pd-chip.condition-option:hover:not(.active) {
  border-color: #0B6776 !important;
}
.pd-chip.condition-option small,
.pd-chip.condition-option .tl-currency-inline {
  font-size: clamp(10px, 0.84vw, 16px) !important;
  font-weight: 600 !important;
  color: #21282D !important;
}

/* ---- Help Icon (kondisyon ?) ---- */
.pd-help-icon {
  width: clamp(18px, 1.15vw, 22px) !important;
  height: clamp(18px, 1.15vw, 22px) !important;
  border-radius: 50% !important;
  background: #0B6776 !important;
  color: white !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* ---- BuyBox / Order Card ---- */
/* Figma: 735×209px visual → 919px CSS wide; internal padding 25px visual → 31.25px CSS */
.pd-order-card {
  border: 1px solid #CCCCCC !important;
  border-radius: 0 !important;
  padding: clamp(16px, 1.63vw, 31.25px) !important;
  background: #FFFFFF !important;
  margin-top: 16px !important;
  box-shadow: none !important;
}

/* ---- "Ürünü Sipariş Verin" heading ---- */
/* Figma: 22px Lato bold visual → 27.5px CSS */
.pd-order-heading {
  font-family: Lato, sans-serif !important;
  font-size: clamp(16px, 1.44vw, 27.5px) !important;
  font-weight: 600 !important;
  color: #21282D !important;
  margin-bottom: 12px !important;
}

/* ---- Seller label / value ---- */
/* Figma: Satıcı label 18px visual → 22.5px CSS; value 20px Georgia → 25px CSS */
.pd-seller-label {
  font-family: Lato, sans-serif !important;
  font-size: clamp(13px, 1.18vw, 22.5px) !important;
  font-weight: 400 !important;
  color: #5A5A5A !important;
  margin-right: 6px !important;
}
.pd-seller-select {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(14px, 1.31vw, 25px) !important;
  font-weight: 400 !important;
  color: #0B6776 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

/* ---- Sepete Ekle Button ---- */
/* Figma: 280×50px visual → 350×62.5px CSS, bg=#0B6776, white text 21px Lato bold */
button.pd-btn-primary.add-to-cart-btn,
button.pd-btn-primary.add-to-cart-btn:hover,
button.pd-btn-primary.add-to-cart-btn:focus,
button.pd-btn-primary.add-to-cart-btn:active {
  width: clamp(180px, 18.37vw, 350px) !important;
  min-width: clamp(180px, 18.37vw, 350px) !important;
  height: clamp(48px, 3.28vw, 62.5px) !important;
  background: #0B6776 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: Lato, sans-serif !important;
  font-size: clamp(16px, 1.31vw, 25px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 clamp(16px, 1.31vw, 25px) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
}
button.pd-btn-primary.add-to-cart-btn:hover {
  background: #0a5a68 !important;
}

/* ---- Seller Line layout ---- */
.pd-seller-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px 20px !important;
  margin-bottom: 8px !important;
}
.pd-select-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* ---- All sellers row ---- */
/* Figma: 22px Lato → 27.5px CSS */
.pd-all-sellers-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.pd-all-sellers-label {
  font-family: Lato, sans-serif !important;
  font-size: clamp(14px, 1.44vw, 27.5px) !important;
  font-weight: 400 !important;
  color: #21282D !important;
}
a.pd-all-sellers,
.pd-all-sellers {
  font-family: Lato, sans-serif !important;
  font-size: clamp(14px, 1.44vw, 27.5px) !important;
  font-weight: 400 !important;
  color: #0B6776 !important;
  text-decoration: none !important;
}
a.pd-all-sellers:hover { text-decoration: underline !important; }
.pd-link-underline { text-decoration: underline !important; }

/* ---- Summary card padding/shadow cleanup ---- */
.pd-summary-card {
  padding: clamp(14px, 1.15vw, 22px) !important;
  box-shadow: none !important;
  border: none !important;
}

/* ---- Dividers ---- */
.pd-divider {
  border: none !important;
  border-top: 1px solid #CCCCCC !important;
  margin: 12px 0 !important;
}
.pd-divider-tight {
  margin: 8px 0 !important;
}

/* ---- Section spacing ---- */
.pd-section {
  margin-bottom: 14px !important;
}
.pd-price-row {
  margin-bottom: 14px !important;
}

/* ---- Seller info icon ---- */
.pd-seller-info-icon {
  background: transparent !important;
  border: none !important;
  color: #5A5A5A !important;
  font-size: 11px !important;
  cursor: pointer !important;
  padding: 0 4px !important;
}

/* ---- Seller badges row ---- */
.pd-seller-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.pd-seller-badge-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid #B58B2D !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
}
.pd-seller-badge-text {
  font-family: Lato, sans-serif !important;
  font-size: clamp(11px, 0.92vw, 17.5px) !important;
  font-weight: 400 !important;
  color: #B58B2D !important;
}
.pd-seller-badge-img {
  max-height: 18px !important;
  width: auto !important;
}

/* ---- Wishlist link below image ---- */
.pd-wishlist__btn {
  font-family: Lato, sans-serif !important;
  font-size: clamp(13px, 0.92vw, 17.5px) !important;
  color: #0B6776 !important;
}

/* ---- Responsive: tablet / mobile ---- */
@media (max-width: 1200px) {
  .product-img {
    width: clamp(220px, 40vw, 400px) !important;
    height: auto !important;
  }
  .zoomPad {
    width: clamp(220px, 40vw, 400px) !important;
    height: auto !important;
  }
}
@media (max-width: 768px) {
  h1.pd-title, .pd-title {
    font-size: 26px !important;
  }
  .pd-meta__label { font-size: 15px !important; }
  .pd-meta__value, .pd-meta__value-link { font-size: 17px !important; }
  .pd-section__label { font-size: 17px !important; }
  .pd-chip.cover-option, .pd-chip.condition-option { width: 100px !important; }
  button.pd-btn-primary.add-to-cart-btn,
  button.pd-btn-primary.add-to-cart-btn:hover {
    width: 100% !important;
    min-width: 0 !important;
  }
  .pd-seller-line { flex-direction: column !important; align-items: flex-start !important; }
  .pd-all-sellers-row { flex-direction: column !important; }
}

/* ── Product detail: Figma-exact column layout (≥992px) ──
   Figma 1920px canvas measurements (visual px):
   - Book image: x=350, w=400 → col-lg-4 needs padding-left: 250px CSS (200px visual)
   - Right panel starts at: x=910 → col-lg-4 visual width must = 910-137 = 773px (47.35%)
   - Right panel width: 735px → summary-card max-width: 919px CSS (735px visual at zoom:0.8)
*/
@media (min-width: 992px) {
  /* Widen image column so right panel aligns at visual x=910 */
  .pd-hero > .row > .col-lg-4 {
    flex: 0 0 47.35% !important;
    max-width: 47.35% !important;
  }
  .pd-hero > .row > .col-lg-8 {
    flex: 0 0 52.65% !important;
    max-width: 52.65% !important;
    padding-left: 0 !important;
  }
  /* Push book image 200px right (visual) = 250px CSS at body zoom:0.8 */
  .pd-hero .pd-gallery {
    padding-left: 250px !important;
  }
  /* Title/meta flush at right-col left edge (x=910 visual); order card matches Figma 735px */
  .pd-hero .pd-summary-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 919px !important; /* 919 × 0.8 = 735px visual — matches Figma panel width */
  }
}
/* ── Product description section ──
   Figma: heading 30px visual = 37.5px CSS; box 1px #CCCCCC border (already set) */
.product-description__title {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(20px, 1.95vw, 37.5px) !important;
  font-weight: 400 !important;
  color: #21282D !important;
  margin-bottom: 16px !important;
}
.product-description__box {
  border: 1px solid #CCCCCC !important;
  border-radius: 0 !important;
}

/* ── Lower page sections: Figma-exact sizing (body zoom:0.8 → CSS px = visual px / 0.8) ──
   All !important needed to override inline <style> blocks in product_page_exact.blade.php
   Targets: 18px visual tabs/text → 22.5px CSS; 35px visual review heading → 43.75px CSS */

/* ── Ürün Açıklaması box content ── */
.product-description__box,
.product-description__box p,
.product-description__box li,
.product-description__box span {
  font-size: 22.5px !important;
  line-height: 1.6 !important;
}

/* Bootstrap 3/4 mismatch: vendors.css uses .fade.in, blade uses .fade.show */
/* vendors.css has .show{display:block!important} — override for inactive panes that retain .show */
.tab-content > .tab-pane.show:not(.active) { display: none !important; }
.tab-pane.fade.show { opacity: 1 !important; }
.tab-pane.fade { opacity: 0; transition: opacity 0.15s linear; }

/* ── Ürün Ayrıntıları / Yazar Hakkında tabs ── */
.product-details-tabs__nav .nav-link,
.product-details-tabs__nav .nav-link.active {
  font-size: 22.5px !important;
  padding: 10px 28px !important;
  color: #0B6776 !important;
  font-weight: 600 !important;
}
.product-details-tabs__content,
.product-details-tabs__content p,
.product-details-tabs__content li,
.product-details-tabs__content td,
.product-details-tabs__content span,
.tab-content-section,
.tab-content-section p,
.tab-content-section li {
  font-size: 20px !important;
  line-height: 1.6 !important;
}
.product-details-list {
  max-width: 900px !important;
}
.product-details-title {
  font-size: 30px !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin-bottom: 20px !important;
}
.product-details-row {
  grid-template-columns: 190px 1fr !important;
  gap: 0 16px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #F0F0F0 !important;
}
.product-details-row .pd-attr-label {
  font-size: 25px !important;
  font-weight: 600 !important;
  color: #5A5A5A !important;
}
.product-details-row .pd-attr-value {
  font-size: 25px !important;
  color: #21282D !important;
}

/* ── Değerlendirmeler (Reviews) section ── */
.review-showcase__title {
  font-size: 43.75px !important; /* 35px visual at zoom:0.8 */
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #21282D !important;
}
.review-showcase__eyebrow {
  font-size: 15px !important;
}
.rating-chip__value {
  font-size: 30px !important; /* 24px visual */
  font-weight: 700 !important;
}
.rating-chip__stars i,
.rating-chip__stars svg {
  font-size: 20px !important; /* 16px visual */
}
.rating-chip__count {
  font-size: 16.25px !important; /* 13px visual */
}
.rating-inline {
  font-size: 25px !important; /* 20px visual */
}
.review-showcase__cta,
.review-add-inline {
  font-size: 25px !important; /* 20px visual */
  font-weight: 700 !important;
  color: #0B6776 !important;
}
.review-card {
  border: 1px solid #CCCCCC !important;
  border-radius: 10px !important; /* 8px visual */
  min-width: 500px !important; /* ensures card is wide enough with few reviews */
}
.review-card__author,
.review-card__author-inline {
  font-size: 20px !important; /* 16px visual */
  font-weight: 600 !important;
}
.review-card__book,
.review-card__book span {
  font-size: 17.5px !important; /* 14px visual */
}
.review-card__comment {
  font-size: 20px !important; /* 16px visual */
  line-height: 1.55 !important;
}
.review-card__date {
  font-size: 15px !important; /* 12px visual */
}
.review-card__shop {
  font-size: 15px !important;
}
.review-showcase__footer a {
  font-size: 25px !important; /* 20px visual — "Tümünü Gör" */
  color: #0B6776 !important;
  font-weight: 600 !important;
}
.review-showcase__next i {
  font-size: 42.5px !important; /* 34px visual */
}

/* ── Section title (Son Görüntülenenler / home sections) ──
   Figma: 30px visual → 37.5px CSS. Current clamp peaks at 44px CSS (35.2px visual).
   Reduce max to 37.5px CSS. */
.section-title {
  font-size: clamp(18px, 1.953vw, 37.5px) !important;
}

/* ── Book card elements in home/product sections ──
   Figma: title 18px visual → 22.5px CSS; author/condition 17px visual → 21.25px CSS */
.book-section .book-title,
.book-section .book-title a {
  font-size: 22.5px !important;
  line-height: 1.35 !important;
}
.book-section .book-author {
  font-size: 21.25px !important;
  color: #0B6776 !important;
}
.book-section .book-condition {
  font-size: 21.25px !important;
  color: #5A5A5A !important;
}
.book-section .book-price {
  font-size: 21.25px !important;
  font-weight: 700 !important;
}
/* END product detail overrides */

/* ══════════════════════════════════════════════════════════════════
   FIGMA PIXEL-EXACT OVERRIDES — body zoom:0.8 → CSS = visual / 0.8
   Sources: urundetaymaksyazi.html, urundetaymodal.html, urundetaydigersatici.html
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Product title (Figma: 34px visual → 42.5px CSS) ── */
h1.pd-title, .pd-title {
  font-size: 42.5px !important;     /* 34px visual */
  line-height: 1.24 !important;
}

/* ── 2. Author / Translator / Publisher labels & values ──
   Figma label: 22px visual → 27.5px CSS, Lato, #5A5A5A
   Figma value: 25px visual → 31.25px CSS, Georgia, #0B6776 */
.pd-meta__label {
  font-size: 27.5px !important;
  color: #5A5A5A !important;
  font-family: 'Lato', sans-serif !important;
}
.pd-meta__value,
.pd-meta__value-link {
  font-size: 31.25px !important;   /* 25px visual */
  font-family: Georgia, 'Times New Roman', serif !important;
  color: #0B6776 !important;
}
.pd-meta {
  gap: 8px 18px !important;
  margin-bottom: 14px !important;
}

/* ── 3. Condition chips ──
   Figma: 135×65px visual → 168.75×81.25px CSS, text 16px visual → 20px CSS
   Active: 3px border #0B6776, bg #F2F2F1 | Inactive: 1px #CCCCCC */
.pd-chip {
  min-width: 168.75px !important;  /* 135px visual */
  min-height: 81.25px !important;  /* 65px visual */
  font-size: 20px !important;      /* 16px visual */
}
.pd-chip small {
  font-size: 20px !important;      /* 16px visual */
}
.pd-chip.condition-option {
  min-height: 81.25px !important;
}

/* ── 4. In-page "Diğer Satıcıları Görüntüle" row ──
   Figma: 22px visual → 27.5px CSS, Lato */
.pd-all-sellers-label {
  font-size: 27.5px !important;
  font-weight: 400 !important;
  color: #21282D !important;
  font-family: 'Lato', sans-serif !important;
}
.pd-all-sellers {
  font-size: 27.5px !important;
  color: #0B6776 !important;
  font-weight: 400 !important;
}

/* ── 5. Sellers drawer panel ──
   Figma panel: 437px visual → 546px CSS */
.pd-sellers-drawer {
  width: min(546px, 100vw) !important;
}

/* ── 6. Drawer header title ──
   Figma: 28px visual → 35px CSS, Georgia */
.pd-sellers-drawer__head h3 {
  font-size: 35px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  color: #21282D !important;
}
.pd-sellers-drawer__head {
  padding: 18px 20px 12px !important;
}
.pd-sellers-drawer__close {
  font-size: 32.5px !important;   /* 26px visual */
}

/* ── 7. Sort trigger ──
   Figma: 20px visual → 25px CSS, Lato bold */
.pd-sellers-sort-trigger {
  font-size: 25px !important;
  color: #21282D !important;
}
.pd-sellers-sort-trigger i {
  font-size: 20px !important;
}
.pd-sellers-sort-option {
  font-size: 22.5px !important;   /* 18px visual */
  padding: 18px 18px !important;
}
.pd-sellers-filter-toggle {
  font-size: 22.5px !important;
}
.pd-sellers-inline-filter,
.pd-sellers-inline-filter select {
  font-size: 20px !important;
}

/* ── 8. Drawer seller list items ──
   Figma: seller label 18px visual → 22.5px CSS; price ~24px visual → 30px CSS */
.pd-sellers-item__price {
  font-size: 30px !important;      /* 24px visual */
}
.pd-sellers-item__meta {
  font-size: 20px !important;      /* 16px visual */
  gap: 14px !important;
}
.pd-sellers-item__seller {
  font-size: 22.5px !important;    /* 18px visual */
  gap: 6px !important;
}
.pd-sellers-item__seller-name {
  font-size: 22.5px !important;
}
.pd-sellers-item__seller small {
  font-size: 16.25px !important;   /* 13px visual */
}

/* ── 9. Seller badges ──
   Figma: 14px visual → 17.5px CSS, border #B58B2D, border-radius 3px */
.pd-sellers-badge {
  font-size: 17.5px !important;
  padding: 4px 8px !important;
  border-color: #B58B2D !important;
  color: #B58B2D !important;
  border-radius: 3px !important;
}

/* ── 10. "Sepete Ekle" button in drawer ──
   Figma: 134×50px visual → 167.5×62.5px CSS, text 18px visual → 22.5px CSS */
.pd-sellers-add {
  font-size: 22.5px !important;    /* 18px visual */
  min-width: 167.5px !important;   /* 134px visual */
  min-height: 62.5px !important;   /* 50px visual */
  padding: 10px 16px !important;
}

/* ── 11. Drawer controls area ── */
.pd-sellers-drawer__controls {
  padding: 12px 20px !important;
}
.pd-sellers-drawer__list {
  padding: 0 20px 20px !important;
}
.pd-sellers-item {
  padding: 18px 0 !important;
}
.pd-sellers-empty {
  font-size: 20px !important;
}

/* ══════════════════════════════════════════════════════════════════
   SELLER STOREFRONT PAGES — sd-* class overrides
   Source: storefront.html (sahaf.show) + storefront2.html (sahaf.products)
   body zoom:0.8 → CSS = Figma visual / 0.8
   ══════════════════════════════════════════════════════════════════ */

/* ── sd-* structural CSS (needed when sahaf_store_detail.blade.php is not included) ── */
.sd-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.sd-top-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}
.sd-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-align: center !important;
  line-height: 1.2 !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}
.sd-logo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.sd-badges {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.sd-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #fff8e8 !important;
  line-height: 1 !important;
}
.sd-visit-link {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.sd-visit-link:hover { color: #074f5a !important; text-decoration: none !important; }
.sd-section {
  border-top: 1px solid #e0e0e0 !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
}
.sd-name {
  text-decoration: none !important;
  display: inline-block !important;
  margin-bottom: 5px !important;
}
.sd-name:hover { text-decoration: none !important; }

/* ── Seller hero card ── */
.sd-page { color: #21282D !important; }
/* Higher-specificity override: .container rule resets margin to 0, restore it for sd-page */
#content-wrapper .container.sd-page {
  margin-top: 26px !important;
  margin-bottom: 40px !important;
}
.sd-card {
  background: #ffffff !important;
  border: 1px solid #e2e2e2 !important;
  padding: 30px !important;
  min-height: 187.5px !important;
}

/* ── Seller logo: 90px visual → 112.5px CSS ── */
.sd-logo {
  width: 112.5px !important;
  height: 112.5px !important;
  min-width: 112.5px !important;
  font-size: 14px !important;
}

/* ── Shop name: Georgia 24px visual → 30px CSS, color #0B6776 ── */
.sd-name {
  font-size: 30px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
  color: #0B6776 !important;
}
.sd-name:hover { color: #094d59 !important; }

/* ── Seller badges: 14px visual → 17.5px CSS, #B58B2D ── */
.sd-badge {
  font-size: 17.5px !important;
  padding: 4px 8px !important;
  border-color: #B58B2D !important;
  color: #B58B2D !important;
  border-radius: 3px !important;
}
.sd-badges { gap: 8px !important; }

/* ── "Satıcı Mağazasını Ziyaret Edin": 20px visual → 25px CSS ── */
.sd-visit-link {
  font-size: 25px !important;
  color: #0B6776 !important;
  font-weight: 600 !important;
  gap: 10px !important;
}

/* ── Section titles: 25px visual → 31.25px CSS, Lato ── */
.sd-title {
  font-size: 31.25px !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 400 !important;
  color: #21282D !important;
}

/* ── About text: 18px visual → 22.5px CSS, Lato ── */
.sd-about-text {
  font-size: 22.5px !important;
  line-height: 1.65 !important;
  color: #21282D !important;
}

/* ── Ask a question title: 25px visual → 31.25px CSS ── */
.sd-ask-title {
  font-size: 31.25px !important;
  color: #21282D !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 400 !important;
}

/* ── "Soru Sorun" button: 18px visual → 22.5px CSS ── */
.sd-ask-btn {
  font-size: 22.5px !important;
  padding: 10px 20px !important;
  border-radius: 37.5px !important; /* 30px visual */
}

/* ── Rating distribution subtitle: 20px visual → 25px CSS ── */
.sd-subtitle {
  font-size: 25px !important;
  font-weight: 600 !important;
}

/* ── Muted helper text: 17px visual → 21.25px CSS ── */
.sd-muted { font-size: 21.25px !important; color: #21282D !important; }

/* ── Stars ── */
.sd-stars { font-size: 17.5px !important; } /* 14px visual */

/* ── Rating progress bars: 10px visual → 12.5px CSS ── */
.sd-bar { height: 12.5px !important; }

/* ── Count next to bars: 15px visual → 18.75px CSS ── */
.sd-count { font-size: 18.75px !important; }

/* ── "Puan Özeti" label: 20px visual → 25px CSS ── */
.sd-summary-label { font-size: 25px !important; }
.sd-summary-row .sd-stars { font-size: 20px !important; }
.sd-summary-score { font-size: 21.25px !important; } /* 17px visual */

/* ── "Satıcıya Değerlendirme Yap" button: 14px visual → 17.5px CSS ── */
.sd-rate-btn {
  font-size: 17.5px !important;
  padding: 14px 22px !important;
}

/* ── Reviews toolbar: 20px visual → 25px CSS ── */
.sd-toolbar { padding: 10px 16px !important; }
.sd-toolbar-title { font-size: 25px !important; color: #21282D !important; }
.sd-toolbar label { font-size: 17.5px !important; }
.sd-toolbar select { font-size: 17.5px !important; }

/* ── Review list grid: left col 400px CSS (320px visual) ── */
.sd-review-grid {
  grid-template-columns: 400px 1fr !important;
}

/* ── Review items: 16px visual → 20px CSS ── */
.sd-review-item { padding: 18px 0 !important; }
.sd-review-name { font-size: 20px !important; font-weight: 600 !important; }
.sd-review-date { font-size: 15px !important; }
.sd-review-meta { font-size: 20px !important; color: #5A5A5A !important; }
.sd-review-text { font-size: 20px !important; line-height: 1.6 !important; }
.sd-review-source { font-size: 20px !important; color: #5A5A5A !important; }
.sd-review-actions { font-size: 17.5px !important; }

/* ── Responsive: collapse grid ── */
@media (max-width: 992px) {
  .sd-review-grid { grid-template-columns: 1fr !important; }
  .sd-name { font-size: 22.5px !important; }
  .sd-title { font-size: 25px !important; }
  .sd-about-text { font-size: 18.75px !important; }
  .sd-ask-title { font-size: 22.5px !important; }
}

/* ==========================================
   GIFT CARDS PAGE — Figma × 1.25 (zoom:0.8)
   ========================================== */

/* Hero */
.gift-landing-hero {
  text-align: center;
  padding: 63px 20px 50px;
}

.gift-landing-title {
  font-family: Georgia, serif;
  font-size: 50px;
  font-weight: 400;
  color: #21282D;
  margin: 0 0 24px;
  line-height: 1.1;
}

.gift-landing-subtitle {
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #21282D;
  line-height: 1.5;
  max-width: 1125px;
  margin: 0 auto 20px;
}

.gift-landing-terms {
  display: inline-block;
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #0B6776;
  text-decoration: underline;
  margin-bottom: 50px;
}

/* Tab tiles */
.gift-landing-actions {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

.gift-landing-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 437px;
  min-height: 250px;
  border: 2.5px solid #CCCCCC;
  border-radius: 12px;
  padding: 20px 20px 25px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.gift-landing-action--active {
  border-color: #0B6776;
}

.gift-landing-action__top {
  flex: 1;
  display: block;
  width: 100%;
  min-height: 120px;
}

.gift-landing-action__label {
  display: block;
  font-family: Lato, sans-serif;
  font-size: 25px;
  font-weight: 600;
  color: #21282D;
  text-align: center;
  line-height: 1.3;
}

/* Card sections */
.gift-landing-content {
  padding: 50px 0;
}

.gift-landing-content > .container {
  max-width: 2400px;
  padding-left: 81px;
  padding-right: 81px;
  box-sizing: border-box;
}

.gift-landing-group {
  margin-bottom: 70px;
}

.gift-landing-group--loading {
  opacity: 0.6;
}

.gift-landing-group h2 {
  font-family: Georgia, serif;
  font-size: 37px;
  font-style: italic;
  font-weight: 400;
  color: #21282D;
  margin: 0 0 30px;
  line-height: 1.15;
}

.gift-landing-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 44px;
  margin-bottom: 25px;
}

.gift-landing-card--placeholder {
  height: 250px;
  background: #D9D9D9;
  border-radius: 12px;
}

.gift-landing-card--api {
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.gift-landing-card--api.is-selected {
  border-color: #0B6776;
  border-width: 2.5px;
}

.gift-landing-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gift-landing-card__name {
  font-family: Lato, sans-serif;
  font-size: 18px;
  color: #21282D;
  text-align: center;
  padding: 12px;
}

/* Show more/less toggle */
.gift-landing-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: Lato, sans-serif;
  font-size: 25px;
  font-weight: 500;
  color: #0B6776;
  padding: 10px 0;
  margin: 0 auto;
  width: fit-content;
}

.gift-landing-toggle:hover { opacity: 0.8; }

.gift-landing-empty {
  font-family: Lato, sans-serif;
  font-size: 20px;
  color: #6A6A6A;
  text-align: center;
  padding: 40px;
}

/* Balance tab */
.gift-landing-balance {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px;
  text-align: center;
}

.gift-landing-balance h2 {
  font-family: Georgia, serif;
  font-size: 50px;
  font-weight: 400;
  color: #21282D;
  margin-bottom: 50px;
  line-height: 1.1;
}

.gift-landing-balance-result {
  display: none;
  font-family: Lato, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 24px;
}

.gift-landing-balance-result.is-visible { display: block; }
.gift-landing-balance-result.is-error   { color: #E00000; }
.gift-landing-balance-result.is-success { color: #0B6776; }

.gift-landing-balance-form {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.gift-landing-balance-form input[name="gift_card_code"] {
  width: 635px;
  height: 75px;
  border: 1px solid #CCCCCC;
  border-right: none;
  background: #FAFAFA;
  font-family: Lato, sans-serif;
  font-size: 21px;
  font-weight: 500;
  color: #6A6A6A;
  padding: 0 24px;
  outline: none;
  box-sizing: border-box;
  flex-shrink: 0;
}

.gift-landing-balance-form input[name="gift_card_code"]::placeholder { color: #6A6A6A; }

.gift-landing-balance-form input[name="gift_card_code"].is-invalid {
  border-color: #E00000;
  border-right: none;
}

.gift-landing-balance-form button[type="submit"] {
  width: 272px;
  height: 75px;
  background: #0B6776;
  color: white;
  font-family: Lato, sans-serif;
  font-size: 22px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.gift-landing-balance-form button[type="submit"]:hover    { background: #094f5a; }
.gift-landing-balance-form button[type="submit"]:disabled { opacity: 0.7; cursor: not-allowed; }

.gift-landing-balance-inline {
  display: none;
  margin-top: 30px;
  font-family: Lato, sans-serif;
  font-size: 25px;
  font-weight: 600;
  color: #0B6776;
  gap: 10px;
}

.gift-landing-balance-inline.is-visible {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gift-landing-balance-inline__label {
  font-weight: 400;
  color: #21282D;
}

.gift-landing-balance-inline__value {
  font-weight: 700;
  color: #0B6776;
}

.gift-landing-balance-divider {
  width: 100%;
  height: 1px;
  background: #CCCCCC;
  margin-top: 60px;
}

/* Responsive */
@media (max-width: 1400px) {
  .gift-landing-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
  .gift-landing-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .gift-landing-action { width: 300px; min-height: 180px; }
  .gift-landing-content > .container { padding-left: 30px; padding-right: 30px; }
  .gift-landing-balance-form { flex-direction: column; align-items: center; gap: 0; }
  .gift-landing-balance-form input[name="gift_card_code"] {
    width: 100%; max-width: 500px; border-right: 1px solid #CCCCCC; border-bottom: none;
  }
  .gift-landing-balance-form input[name="gift_card_code"].is-invalid {
    border-right: 1px solid #E00000;
  }
  .gift-landing-balance-form button[type="submit"] { width: 100%; max-width: 500px; }
}

@media (max-width: 575px) {
  .gift-landing-title { font-size: 36px; }
  .gift-landing-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .gift-landing-action { width: 100%; max-width: 400px; min-height: 150px; }
  .gift-landing-content > .container { padding-left: 20px; padding-right: 20px; }
  .gift-landing-group h2 { font-size: 28px; }
}