/* ══════════════════════════════════════════════════════════════
   TechMartSE — Responsive Layout & Breakpoints
   Mobile-first. Breakpoints: sm=640, md=768, lg=1024, xl=1280
   ══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TWO-COLUMN CONTENT + SIDEBAR LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.content-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding: var(--section-y) 0;
}
.content-layout--sidebar-right {}
.content-layout__main { min-width: 0; }
.content-layout__sidebar { min-width: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE-WIDE SECTIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Category Grid ── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* ── Offer CTA Section ── */
.offer-cta {
  text-align: center;
  padding: var(--space-16) var(--section-x);
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
  border-radius: var(--radius-2xl);
  color: var(--color-white);
}
.offer-cta__title {
  font-size: var(--text-3xl);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.offer-cta__desc {
  font-size: var(--text-lg);
  color: rgb(255 255 255 / 0.8);
  margin-bottom: var(--space-8);
  max-width: 560px;
  margin-inline: auto;
}

/* ── Feature highlight ── */
.feature-highlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
.feature-highlight__image {
  aspect-ratio: 4/3;
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  overflow: hidden;
  order: -1;
}
.feature-highlight__content h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-5);
}
.feature-highlight__content p {
  color: var(--color-gray-500);
  margin-bottom: var(--space-6);
}

/* ── Blog Preview Grid ── */
.blog-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* ── Hero Section (Home) ── */
.hero {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
.hero__content { text-align: center; }
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary-400);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: rgb(200 138 62 / 0.12);
  border-radius: var(--radius-full);
}
.hero__title {
  font-size: var(--text-4xl);
  color: var(--color-white);
  margin-bottom: var(--space-5);
}
.hero__desc {
  font-size: var(--text-lg);
  color: var(--color-gray-400);
  margin-bottom: var(--space-8);
  max-width: 540px;
  margin-inline: auto;
}
.hero__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.hero__image {
  display: none;
  aspect-ratio: 4/3;
  max-width: 560px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgb(200 138 62 / 0.2), rgb(200 138 62 / 0.05));
  border: 1px solid rgb(255 255 255 / 0.06);
}

/* ── Horizontal Product Row ── */
.product-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.product-row-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-out-expo);
}
.product-row-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-gray-200);
}
.product-row-item__image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-200), var(--color-primary-50));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary-500);
}
.product-row-item__body { flex: 1; min-width: 0; }
.product-row-item__category {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary-600);
  margin-bottom: var(--space-1);
}
.product-row-item__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--space-2);
}
.product-row-item__desc {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-row-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-3);
}
.product-row-item__meta .rating { display: inline-flex; }
.product-row-item__price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary-600);
}

/* ── Shop Toolbar ── */
.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-gray-100);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.shop-toolbar__count { font-size: var(--text-sm); color: var(--color-gray-500); }
.shop-toolbar__sort select {
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-600);
  cursor: pointer;
  font-family: var(--font-body);
}

/* ── Article Content (Blog Detail) ── */
.article-content { max-width: 720px; margin-inline: auto; }
.article-content h2 {
  font-size: var(--text-2xl);
  margin: var(--space-10) 0 var(--space-4);
}
.article-content h3 {
  font-size: var(--text-xl);
  margin: var(--space-8) 0 var(--space-3);
}
.article-content p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  margin-bottom: var(--space-5);
}
.article-content blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--color-primary-500);
  background: var(--color-primary-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-gray-700);
}
.article-content ul, .article-content ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}
.article-content li {
  margin-bottom: var(--space-2);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}
.article-content ul li { list-style: disc; }
.article-content ol li { list-style: decimal; }

/* ── Feature Grid (About) ── */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.feature-card {
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  text-align: center;
}
.feature-card__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-primary-50);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-500);
}
.feature-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.feature-card__desc {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
}

/* ── Order Summary (Cart/Checkout) ── */
.order-summary {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.order-summary__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-6);
  color: var(--color-gray-800);
}
.order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
}
.order-summary__row--total {
  border-top: 2px solid var(--color-gray-200);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-gray-800);
}
.order-summary__row--total .order-summary__value {
  color: var(--color-primary-600);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}
.order-summary__label { color: var(--color-gray-500); }
.order-summary__value { font-weight: 600; color: var(--color-gray-700); }

/* ── Account Layout ── */
.account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.account-nav {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.account-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-600);
  border-left: 3px solid transparent;
  transition: all var(--duration-fast);
}
.account-nav__link:hover {
  color: var(--color-gray-800);
  background: var(--color-gray-50);
}
.account-nav__link.active {
  color: var(--color-primary-600);
  background: var(--color-primary-50);
  border-left-color: var(--color-primary-500);
  font-weight: 600;
}
.account-nav__link--danger { color: var(--color-error); }
.account-nav__link--danger:hover { color: var(--color-error); background: var(--color-error-light); }
.account-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.account-stat {
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  text-align: center;
}
.account-stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary-600);
}
.account-stat__label { font-size: var(--text-xs); color: var(--color-gray-500); margin-top: var(--space-1); }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════ */

/* ━━━━━ Tablet (640px+) ━━━━━ */
@media (min-width: 640px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .product-row-item { flex-direction: row; }
  .product-row-item__image { width: 140px; }
  .content-layout { grid-template-columns: 1fr 280px; }
}

/* ━━━━━ Desktop (1024px+) ━━━━━ */
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
  .hero__content { text-align: left; }
  .hero__desc { margin-inline: 0; }
  .hero__actions { justify-content: flex-start; }
  .hero__image { display: block; }
  .hero__title { font-size: var(--text-5xl); }

  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .blog-preview-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .trust-bar { grid-template-columns: repeat(4, 1fr); }
  .feature-highlight {
    grid-template-columns: 1fr 1fr;
  }
  .feature-highlight__image { order: 0; }

  .content-layout { grid-template-columns: 1fr 340px; }
  .content-layout--wide-sidebar { grid-template-columns: 1fr 400px; }

  .account-layout { grid-template-columns: 240px 1fr; }

  .product-row-item__image { width: 160px; }

  .nav { display: flex; }
  .hamburger { display: none; }
  .topbar__left { display: flex; }
}

/* ━━━━━ Mobile (< 640px) ━━━━━ */
@media (max-width: 639px) {
  .nav { display: none; }
  .hamburger { display: flex; }
  .topbar__left { display: none; }
  .topbar__right { width: 100%; justify-content: flex-end; }

  .stats { grid-template-columns: 1fr 1fr; }
  .trust-bar { grid-template-columns: 1fr; }
  .account-stats-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; }

  .page-hero { padding: var(--space-10) 0 var(--space-8); }
  .page-hero__title { font-size: var(--text-3xl); }

  .section-header__title { font-size: var(--text-3xl); }

  .form-row { grid-template-columns: 1fr; }
}

/* ━━━━━ Small Mobile (< 480px) ━━━━━ */
@media (max-width: 479px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .offer-cta { border-radius: var(--radius-lg); }
  .offer-cta__title { font-size: var(--text-2xl); }
}

/* ━━━━━ Touch device ━━━━━ */
@media (hover: none) and (pointer: coarse) {
  .card--hover:hover { transform: none; box-shadow: var(--shadow-card); }
  .btn:active { transform: scale(0.97); }
}