/* ================= GLOBAL ================= */
body {
  font-family: "Inter", sans-serif;
  margin: 0;
  background: #f8fafc;
  color: #0f172a;
}

.container {
  max-width: 1140px; /* Bootstrap lg */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.w-100 {
  width: 100% !important;
}

/* ================= TOP BAR — HARD BUSINESS / LEGACY STYLE ================= */

.topbar {
  background: #111111; /* solid industrial black */
  color: #ffffff;
  font-size: 13px;
  border-bottom: 2px solid #000000;
}

/* CONTAINER */
.topbar-inner {
  max-width: 1280px;
  margin: auto;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LEFT GROUP */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ITEMS */
.topbar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.topbar-item i {
  font-size: 13px;
  color: #ffffff;
}

/* HOVER — STRICT BUSINESS FEEL */
.topbar-item:hover {
  color: #facc15; /* industrial yellow */
}

/* RIGHT GROUP */
.topbar-right {
  display: flex;
  align-items: center;
}

/* ADDRESS BADGE — SQUARE, HARD */
.topbar-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #444444;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
  white-space: nowrap;
}

.topbar-badge i {
  font-size: 12px;
  color: #ffffff;
}

/* ================= RESPONSIVE ================= */

/* TABLET */
@media (max-width: 1024px) {
  .topbar-inner {
    padding: 10px 16px;
  }

  .topbar-left {
    gap: 18px;
  }

  .topbar-item {
    font-size: 12px;
  }

  .topbar-badge {
    font-size: 11px;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .topbar-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .topbar-left {
    flex-direction: column;
    gap: 6px;
  }

  .topbar-item {
    justify-content: center;
  }

  .topbar-right {
    justify-content: center;
  }

  .topbar-badge {
    padding: 6px 10px;
  }
}

/* VERY SMALL DEVICES */
@media (max-width: 480px) {
  .topbar {
    font-size: 12px;
  }

  .topbar-item i,
  .topbar-badge i {
    display: none; /* cleaner ultra-small UI */
  }
}

/* ================= MAIN HEADER — HARD BUSINESS / LEGACY ================= */

.main-header {
  background: #ffffff;
  border-bottom: 3px solid #000000; /* strong separation */
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* WRAP */
.header-wrap {
  max-width: 1280px;
  margin: auto;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}

/* ================= LEFT ================= */

.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* BRAND */
.brand img {
  height: 56px;
  width: auto;
  display: block;
}

/* NAVIGATION */
.header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-nav a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.header-nav a:hover {
  border-bottom-color: #000000; /* hard underline */
}

/* ================= CENTER SEARCH ================= */

.header-search-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 2px solid #000000;
  padding: 8px 14px;
  width: 100%;
  max-width: 420px;
}

.header-search-pill i {
  font-size: 14px;
  color: #000000;
}

.header-search-pill input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: #000000;
}

.header-search-pill input::placeholder {
  color: #6b7280;
}

/* ================= RIGHT ACTIONS ================= */

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ICON BUTTONS */
.action-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border: 2px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  text-decoration: none;
  font-size: 16px;
}

.action-icon:hover {
  background: #000000;
  color: #ffffff;
}

/* CART COUNT — HARD BADGE */
.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #000000;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 0; /* square */
  border: 2px solid #ffffff;
}

/* ================= RESPONSIVE ================= */

/* LARGE TABLET */
@media (max-width: 1100px) {
  .header-wrap {
    grid-template-columns: auto auto;
    gap: 20px;
  }

  .header-search-pill {
    display: none;
  }
}

/* TABLET */
@media (max-width: 900px) {
  .header-nav {
    display: none; /* clean legacy collapse */
  }

  .header-left {
    gap: 20px;
  }
}

/* MOBILE */
@media (max-width: 600px) {
  .header-wrap {
    padding: 12px 16px;
  }

  .brand img {
    height: 48px;
  }

  .action-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .cart-count {
    font-size: 10px;
    padding: 2px 5px;
  }
}

/* ================= HERO — HARD BUSINESS IMAGE STYLE ================= */

.hero-new {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.85)),
    url("../images/hero-printer-bg.jpg"); /* replace with your image */
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  color: #ffffff;
  padding: 160px 20px 120px;
}

/* CONTAINER */
.hero-new-inner {
  max-width: 960px;
  margin: auto;
}

/* EYEBROW */
.hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #facc15;
  margin-bottom: 18px;
}

/* TITLE */
.hero-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 22px;
  margin-top: 5px;
}

.hero-title span {
  color: #facc15;
}

/* DESCRIPTION */
.hero-desc {
  font-size: 18px;
  line-height: 1.8;
  color: #e5e7eb;
  max-width: 720px;
  margin-bottom: 42px;
}

/* CTA */
.hero-cta {
  display: flex;
  gap: 18px;
  margin-bottom: 60px;
}

/* PRIMARY BUTTON */
.btn-hero-primary {
  background: #facc15;
  color: #000000;
  padding: 16px 34px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #facc15;
}

/* SECONDARY BUTTON */
.btn-hero-secondary {
  background: transparent;
  color: #ffffff;
  padding: 16px 34px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #ffffff;
}

.btn-hero-primary:hover {
  background: #eab308;
  border-color: #eab308;
}

.btn-hero-secondary:hover {
  background: #ffffff;
  color: #000000;
}

/* TRUST STRIP */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 36px;
}

.hero-proof strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.hero-proof span {
  font-size: 14px;
  color: #d1d5db;
}

/* ================= RESPONSIVE ================= */

/* TABLET */
@media (max-width: 900px) {
  .hero-title {
    font-size: 44px;
  }

  .hero-desc {
    font-size: 16px;
  }

  .hero-proof {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* MOBILE */
@media (max-width: 600px) {
  .hero-new {
    padding: 120px 16px 90px;
    text-align: center;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    text-align: center;
  }

  .hero-title {
    font-size: 36px;
  }
}

/* ================= FEATURED PRODUCTS — HARD BUSINESS STYLE ================= */

.featured-showcase {
  background: #ffffff;
  padding: 120px 20px;
  border-top: 3px solid #000000;
}

.showcase-inner {
  max-width: 1280px;
  margin: auto;
}

/* HEADER */
.showcase-header {
  max-width: 720px;
  margin-bottom: 60px;
}

.showcase-header h2 {
  font-size: 38px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 12px;
}

.showcase-header p {
  font-size: 16px;
  color: #374151;
  line-height: 1.7;
}

/* GRID */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* CARD */
.showcase-card {
  background: #ffffff;
  border: 2px solid #000000;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

.showcase-card:hover {
  transform: translateY(-6px);
}

/* LINK RESET */
.showcase-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* MEDIA */
.showcase-media {
  position: relative;
  background: #f3f4f6;
  padding: 30px;
  text-align: center;
  border-bottom: 2px solid #000000;
}

.showcase-media img {
  max-height: 190px;
  object-fit: contain;
}

/* BADGES */
.price-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #000000;
  color: #ffffff;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
}

.stock-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.stock-badge.in {
  background: #dcfce7;
  color: #166534;
}

.stock-badge.out {
  background: #fee2e2;
  color: #991b1b;
}

/* INFO */
.showcase-info {
  padding: 22px;
}

.showcase-info h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #000000;
}

.showcase-info p {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* META LINE */
.showcase-meta {
  font-size: 12px;
  color: #166534;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ACTIONS */
.showcase-actions {
  padding: 18px 22px;
  border-top: 2px solid #000000;
}

.btn-showcase {
  width: 100%;
  padding: 14px;
  background: #000000;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-showcase:hover {
  background: #1f2937;
}

.btn-showcase.disabled {
  background: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1100px) {
  .showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .showcase-header h2 {
    font-size: 30px;
  }
}

/* ================= CATEGORY SECTION — BUSINESS USE CASE STYLE ================= */

.categories-new {
  background: linear-gradient(
    180deg,
    #f1f5f9 0%,
    #e2e8f0 100%
  ); /* soft steel tone, not white */
  padding: 120px 20px;
  border-top: 3px solid #000000;
}

.categories-inner {
  max-width: 1280px;
  margin: auto;
}

/* HEADER */
.section-head {
  max-width: 760px;
  margin-bottom: 70px;
}

.section-head h2 {
  font-size: 38px;
  font-weight: 700;
  color: #020617;
  margin-bottom: 14px;
}

.section-head p {
  font-size: 16px;
  color: #334155;
  line-height: 1.7;
}

/* GRID */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* TILE */
.category-tile {
  background: #ffffff;
  border: 2px solid #000000;
  padding: 32px 28px;
  text-decoration: none;
  color: #020617;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease;
}

.category-tile:hover {
  transform: translateY(-6px);
}

/* LABEL */
.tile-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  color: #000000;
}

/* TEXT */
.category-tile h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

.category-tile p {
  font-size: 14px;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 22px;
}

/* CTA */
.tile-cta {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000000;
}

/* CATEGORY ACCENT BORDERS (SUBTLE, HARD) */
.category-tile.inkjet {
  border-left: 6px solid #2563eb;
}

.category-tile.laser {
  border-left: 6px solid #dc2626;
}

.category-tile.home {
  border-left: 6px solid #16a34a;
}

.category-tile.office {
  border-left: 6px solid #7c3aed;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1100px) {
  .category-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .categories-new {
    padding: 90px 16px;
  }

  .category-tiles {
    grid-template-columns: 1fr;
  }

  .section-head h2 {
    font-size: 30px;
  }
}

/* ================= WHY CHOOSE US — INDUSTRIAL SLATE 3D ================= */

.why-trust {
  background: linear-gradient(135deg, #2a2e34 0%, #1f2329 45%, #161a20 100%);
  color: #ffffff;
  padding: 140px 20px;
  border-top: 4px solid #0f1115;
}

.why-trust-inner {
  max-width: 1280px;
  margin: auto;
}

/* HEADER */
.why-head {
  max-width: 780px;
  margin-bottom: 90px;
}

.why-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fde047; /* muted industrial yellow */
  margin-bottom: 18px;
}

.why-head h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #ffffff;
}

.why-head p {
  font-size: 16px;
  color: #d1d5db;
  line-height: 1.8;
}

/* LAYOUT GRID */
.why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid rgba(255, 255, 255, 0.18);
  border-left: 2px solid rgba(255, 255, 255, 0.18);
}

/* ROW */
.why-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding: 42px 38px;
  border-right: 2px solid rgba(255, 255, 255, 0.18);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03),
    rgba(0, 0, 0, 0.18)
  ); /* subtle inset depth */
}

/* INDEX */
.why-index {
  font-size: 22px;
  font-weight: 700;
  color: #fde047;
}

/* CONTENT */
.why-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #ffffff;
}

.why-content p {
  font-size: 15px;
  color: #e5e7eb;
  line-height: 1.7;
  max-width: 440px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1024px) {
  .why-layout {
    grid-template-columns: 1fr;
  }

  .why-row {
    grid-template-columns: 60px 1fr;
  }
}

@media (max-width: 600px) {
  .why-trust {
    padding: 100px 16px;
  }

  .why-head h2 {
    font-size: 32px;
  }

  .why-row {
    padding: 32px 24px;
    grid-template-columns: 50px 1fr;
  }

  .why-index {
    font-size: 18px;
  }
}

/* ================= PURCHASE ASSURANCE STRIP ================= */

.assurance-strip {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  padding: 80px 20px;
}

.assurance-inner {
  max-width: 1280px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  text-align: center;
}

/* ITEM */
.assurance-item {
  padding: 28px 24px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.assurance-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px rgba(15, 23, 42, 0.14);
}

/* ICON */
.assurance-item i {
  font-size: 28px;
  color: #22c55e;
  margin-bottom: 14px;
}

/* TEXT */
.assurance-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #0f172a;
}

.assurance-item p {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .assurance-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .assurance-inner {
    grid-template-columns: 1fr;
  }
}

/* ================= ABOUT BRAND — INDUSTRIAL BRONZE PANEL ================= */

.about-brand {
  background: white;
  padding: 140px 20px;
  color: black;
  border-top: 4px solid #120c0c;
}

.about-brand-inner {
  max-width: 1280px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}

/* IMAGE */
.about-brand-image img {
  width: 100%;
  border: 3px solid #000000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  object-fit: cover;
}

/* CONTENT */
.about-brand-content {
  max-width: 560px;
}

/* EYEBROW */
.about-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fbbf24 !important;
  margin-bottom: 18px;
}

/* TITLE */
.about-brand-content h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 22px;
  line-height: 1.25;
}

/* TEXT */
.about-brand-content p {
  font-size: 16px;
  color: black;
  line-height: 1.85;
  margin-bottom: 18px;
}

/* ACTIONS */
.about-actions {
  display: flex;
  gap: 16px;
  margin-top: 30px;
}

/* PRIMARY BUTTON */
.btn-about-primary {
  background: #fbbf24;
  color: #1a1212;
  padding: 14px 30px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-about-primary:hover {
  background: #f59e0b;
  border-color: #f59e0b;
}

/* SECONDARY BUTTON */
.btn-about-secondary {
  background: transparent;
  color: #ffffff;
  padding: 14px 30px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-about-secondary:hover {
  background: #ffffff;
  color: #1a1212;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1024px) {
  .about-brand-inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .about-brand-content {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .about-brand {
    padding: 100px 16px;
  }

  .about-brand-content h2 {
    font-size: 32px;
  }

  .about-actions {
    flex-direction: column;
  }

  .btn-about-primary,
  .btn-about-secondary {
    width: 100%;
    text-align: center;
  }
}

/* ================= TESTIMONIALS — BOXED BUSINESS STYLE ================= */

.testimonials-new {
  padding: 130px 20px;
}

.testimonials-inner {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.testimonials-head {
  max-width: 760px;
  margin-bottom: 70px;
}

.testimonials-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #374151;
  margin-bottom: 16px;
}

.testimonials-head h2 {
  font-size: 40px;
  font-weight: 700;
  color: #020617;
  margin-bottom: 14px;
}

.testimonials-head p {
  font-size: 16px;
  color: #475569;
  line-height: 1.8;
}

/* GRID */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

/* BOX */
.testimonial-box {
  border: 2px solid #000000;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* TOP */
.testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

/* USER ICON */
.testimonial-user {
  width: 42px;
  height: 42px;
  border: 2px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #000000;
}

/* STARS */
.testimonial-rating {
  font-size: 16px;
  letter-spacing: 2px;
  color: #f59e0b;
}

/* TEXT */
.testimonial-text {
  font-size: 15px;
  color: #334155;
  line-height: 1.75;
  margin-bottom: 20px;
}

/* AUTHOR */
.testimonial-author strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #020617;
}

.testimonial-author span {
  font-size: 13px;
  color: #64748b;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1024px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .testimonials-new {
    padding: 100px 16px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .testimonials-head h2 {
    font-size: 32px;
  }
}

/* =====================================================
   FOOTER — HARD BUSINESS / LEGACY STYLE
===================================================== */

.footer-new {
  background: #000000;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

/* ================= TOP ================= */

.footer-top {
  padding: 70px 20px;
  border-bottom: 1px solid #1f2937;
}

.footer-top-inner {
  max-width: 1280px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 60px;
}

/* BRAND */

.footer-brand img {
  height: 80px;
  margin-bottom: 18px;
}

.footer-brand p {
  font-size: 14px;
  color: #d1d5db;
  line-height: 1.7;
  max-width: 420px;
}

/* ================= LINKS ================= */

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer-links h4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: #ffffff;
}

/* BOXED LINKS */

.footer-links a {
  display: block;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid white;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

/* HOVER EFFECT — YELLOW + WHITE */

.footer-links a:hover {
  background: #facc15;
  color: #000000;
  border-color: #facc15;
}

/* ADDRESS TEXT (NON-LINK) */
.footer-links a:not([href]) {
  cursor: default;
}

/* ================= BOTTOM ================= */

.footer-bottom-new {
  padding: 40px 20px 30px;
}

.footer-bottom-inner-new {
  max-width: 1280px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

/* META */

.footer-meta strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #ffffff;
}

.footer-meta span {
  font-size: 13px;
  color: #d1d5db;
}

/* COPYRIGHT */

.footer-copy {
  font-size: 13px;
  color: #9ca3af;
  text-align: right;
}

/* DISCLAIMER */

.footer-note {
  max-width: 1100px;
  margin: 26px auto 0;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid #1f2937;
  padding-top: 18px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1024px) {
  .footer-top-inner {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-copy {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner-new {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-copy {
    text-align: center;
  }
}

/* ================= PRODUCT PAGE ================= */
.breadcrumb {
  padding: 16px 0;
  font-size: 14px;
  background: #f1f5f9;
}

.product-hero {
  padding: 80px 0;
  background: #ffffff;
}

.product-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.product-image-main img {
  max-width: 100%;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.product-details h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.product-price {
  font-size: 28px;
  font-weight: 700;
  margin: 16px 0;
}

.product-stock.in-stock {
  color: #16a34a;
  margin-bottom: 16px;
}

.product-short-desc {
  font-size: 16px;
  color: #475569;
  line-height: 1.7;
}

.btn-buy {
  background: #2563eb;
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
}

.product-trust {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  font-size: 14px;
}

.product-highlights {
  background: #0f172a;
  color: #fff;
  padding: 60px 0;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.product-section {
  padding: 80px 0;
}

.product-section.light-bg {
  background: #f8fafc;
}

.specs-box,
.compatibility-box {
  background: #ffffff;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  line-height: 1.8;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .product-hero-grid,
  .highlights-grid,
  .policy-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   PRODUCT DETAILS — HARD ENTERPRISE UI
===================================================== */

.product-hard {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

.product-layout-hard {
  max-width: 1300px;
  margin: auto;
  padding: 80px 20px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 50px;
  overflow: visible; /* FIX */
}

/* LEFT */

.product-main-hard {
  overflow: visible; /* FIX */
}

.product-header-hard h1 {
  font-size: 34px;
  margin-bottom: 6px;
}

.product-brand-hard {
  font-size: 14px;
  color: #374151;
  margin-bottom: 30px;
}

.product-image-hard {
  border: 2px solid #000;
  padding: 20px;
  margin-bottom: 30px;
}

.product-image-hard img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
}

/* PRICE */

.product-price-hard {
  border: 2px solid #000;
  padding: 20px;
  margin-bottom: 40px;
}

.product-price-hard span {
  font-size: 13px;
  text-transform: uppercase;
}

.product-price-hard strong {
  display: block;
  font-size: 26px;
  margin: 6px 0;
}

.tax-note-hard {
  font-size: 13px;
  color: #374151;
}

/* SECTIONS */

.product-section-hard {
  margin-bottom: 50px;
}

.product-section-hard h2 {
  font-size: 24px;
  margin-bottom: 14px;
}

/* TABLE */

.product-table-hard {
  width: 100%;
  border-collapse: collapse;
}

.product-table-hard th,
.product-table-hard td {
  border: 2px solid #000;
  padding: 12px;
  font-size: 14px;
  text-align: left;
}

.product-table-hard th {
  width: 35%;
  background: #f3f4f6;
}

/* RIGHT STICKY BUY */

.product-buy-hard {
  position: sticky;
  top: 100px;
  align-self: start;
  margin-top: 120px;
}

.buy-box-hard {
  border: 2px solid #000;
  padding: 24px;
}

.buy-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 14px;
}

.buy-action button {
  width: 100%;
  padding: 14px;
  margin-top: 16px;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}

.buy-action button:hover {
  background: #facc15;
  color: #000;
}

.out-stock-hard {
  display: block;
  padding: 12px;
  text-align: center;
  border: 2px solid #000;
  font-weight: 700;
}

.buy-trust-hard {
  margin-top: 20px;
  font-size: 13px;
  color: #374151;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
  .product-layout-hard {
    grid-template-columns: 1fr;
  }

  .product-buy-hard {
    position: relative;
    top: auto;
    margin-top: 5px;
  }
}

/* =====================================================
   CART PAGE — PROFESSIONAL ECOMMERCE DESIGN
===================================================== */

.cart-page {
  padding: 80px 0;
  background: #ffffff;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cart-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 48px;
  color: #1d1d1f;
}

/* ================= LAYOUT ================= */

.cart-layout {
  display: grid;
  grid-template-columns: 2.4fr 1fr;
  gap: 64px;
}

/* ================= TABLE HEADER ================= */

.cart-head {
  display: grid;
  grid-template-columns: 1fr 160px 140px;
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
  color: #6e6e73;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ================= ROW ================= */

.cart-row {
  display: grid;
  grid-template-columns: 1fr 160px 140px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid #f1f5f9;
}

/* ================= PRODUCT ================= */

.cart-product {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cart-product img {
  width: 84px;
  height: auto;
  border-radius: 12px;
  background: #f5f5f7;
}

.cart-product h3 {
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1f;
  line-height: 1.4;
}

/* ================= QUANTITY ================= */

.cart-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-qty input {
  width: 56px;
  height: 36px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
}

.cart-qty button {
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  background: #f5f5f7;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  cursor: pointer;
}

.cart-qty button:hover {
  background: #e5e7eb;
}

/* ================= PRICE + REMOVE ================= */

.cart-price {
  text-align: right;
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1f;
}

.cart-remove {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #b91c1c;
  background: none;
  border: none;
  cursor: pointer;
}

.cart-remove:hover {
  text-decoration: underline;
}

/* ================= ORDER SUMMARY ================= */

.cart-summary {
  background: #f9fafb;
  border-radius: 20px;
  padding: 32px;
  position: sticky;
  top: 120px;
}

.cart-summary h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 28px;
  color: #1d1d1f;
}

/* SUMMARY ROWS */

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 16px;
  color: #1d1d1f;
}

.summary-row.total {
  font-size: 18px;
  font-weight: 600;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* ================= CTA ================= */

.cart-summary .btn-apple {
  width: 100%;
  margin-top: 28px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
  border-radius: 999px;
  background: #0071e3;
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: block;
  text-align: center;
}

.cart-summary .btn-apple:hover {
  background: #0077ed;
}

/* ================= NOTE ================= */

.summary-note {
  margin-top: 16px;
  font-size: 13px;
  color: #6e6e73;
  text-align: center;
  line-height: 1.6;
}

/* ================= EMPTY ================= */

.cart-empty {
  text-align: center;
  padding: 100px 0;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-head {
    display: none;
  }

  .cart-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cart-price {
    text-align: left;
  }

  .cart-summary {
    position: static;
    margin-top: 40px;
  }
}

/* =====================================================
   CHECKOUT — HARD BUSINESS UI (FINAL)
===================================================== */

.checkout-hard {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.checkout-header-hard {
  background: #0a0a0a;
  padding: 90px 20px 70px;
}

.checkout-header-inner {
  max-width: 1200px;
  margin: auto;
}

.checkout-header-inner h1 {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 8px;
}

.checkout-header-inner p {
  font-size: 15px;
  color: #d1d5db;
}

/* BODY */

.checkout-body-hard {
  max-width: 1200px;
  margin: auto;
  padding: 90px 20px;
}

/* ERROR */

.checkout-error-hard {
  border-left: 6px solid #b91c1c;
  background: #fef2f2;
  padding: 18px;
  margin-bottom: 30px;
}

/* LAYOUT */

.checkout-layout-hard {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 50px;
}

/* FORM */

.checkout-form-hard {
  border: 2px solid #000;
  padding: 36px;
}

.checkout-block-hard {
  margin-bottom: 36px;
}

.checkout-block-hard h2 {
  font-size: 22px;
  margin-bottom: 18px;
}

/* ROWS */

.checkout-row-hard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

/* INPUTS */

.checkout-form-hard label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.checkout-form-hard input,
.checkout-form-hard textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid #000;
  font-size: 14px;
  box-sizing: border-box;
}

.checkout-form-hard textarea {
  min-height: 110px;
  resize: vertical;
}

/* PAYMENT OPTIONS */

.payment-option-hard {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: center;
  border: 2px solid #000;
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
}

.payment-option-hard i {
  font-size: 20px;
}

.payment-option-hard input {
  display: none;
}

.payment-option-hard span {
  display: block;
  font-size: 13px;
  color: #374151;
}

.payment-option-hard:has(input:checked) {
  background: #facc15;
}

/* SUMMARY */

.checkout-summary-hard {
  border: 2px solid #000;
  padding: 28px;
  height: fit-content;
}

.checkout-summary-hard h3 {
  font-size: 22px;
  margin-bottom: 18px;
}

.summary-row-hard {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
}

.summary-total-hard {
  border-top: 1px solid #e5e7eb;
  margin-top: 16px;
  padding-top: 16px;
}

.summary-total-hard .total {
  font-size: 17px;
  font-weight: 700;
  margin-top: 10px;
}

/* BUTTON */

.checkout-btn-hard {
  width: 100%;
  margin-top: 22px;
  padding: 16px;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}

.checkout-btn-hard:hover {
  background: #facc15;
  color: #000;
}

/* TRUST */

.checkout-trust-hard {
  font-size: 13px;
  margin-top: 16px;
  color: #374151;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .checkout-layout-hard {
    grid-template-columns: 1fr;
  }

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

/* =====================================================
   ORDER SUCCESS — HARD BUSINESS UI
===================================================== */

.order-success-hard {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.order-success-header {
  background: #0a0a0a;
  padding: 90px 20px 70px;
}

.order-success-header-inner {
  max-width: 900px;
  margin: auto;
}

.order-success-header-inner h1 {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 8px;
}

.order-success-header-inner p {
  font-size: 15px;
  color: #d1d5db;
  max-width: 640px;
}

/* BODY */

.order-success-body {
  max-width: 900px;
  margin: auto;
  padding: 90px 20px;
}

/* CONFIRMATION */

.order-confirmation-hard {
  border: 2px solid #000;
  padding: 36px;
  margin-bottom: 50px;
}

.order-confirmation-message {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 26px;
}

/* STATUS */

.order-status-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
}

.order-status-box span {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #374151;
}

/* NEXT STEPS */

.order-next-steps-hard {
  margin-bottom: 50px;
}

.order-next-steps-hard h2 {
  font-size: 26px;
  margin-bottom: 16px;
}

.order-next-steps-hard ul {
  padding-left: 18px;
}

.order-next-steps-hard li {
  font-size: 15px;
  margin-bottom: 10px;
}

/* ACTIONS */

.order-actions-hard {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}

.order-btn-hard {
  display: inline-block;
  padding: 14px 22px;
  border: 2px solid #000;
  text-decoration: none;
  font-weight: 700;
  color: #000;
}

.order-btn-hard.primary {
  background: #000;
  color: #fff;
}

.order-btn-hard:hover {
  background: #facc15;
  color: #000;
}

/* SUPPORT */

.order-support-hard {
  border-left: 6px solid #000;
  padding: 20px;
  background: #f9fafb;
}

.order-support-hard strong {
  display: block;
  margin-bottom: 6px;
}

/* RESPONSIVE */

@media (max-width: 800px) {
  .order-status-box {
    grid-template-columns: 1fr;
  }

  .order-actions-hard {
    flex-direction: column;
  }
}

/* =====================================================
   TRACK ORDER — HARD BUSINESS UI
===================================================== */

.track-page-hard {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.track-header-hard {
  background: #000000;
  padding: 90px 20px 70px;
}

.track-header-inner {
  max-width: 900px;
  margin: auto;
}

.track-header-inner h1 {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 12px;
}

.track-header-inner p {
  font-size: 15px;
  color: #d1d5db;
  max-width: 620px;
  line-height: 1.7;
}

/* BODY */

.track-body-hard {
  max-width: 900px;
  margin: auto;
  padding: 90px 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* FORM BLOCK */

.track-form-block {
  border: 2px solid #000000;
  padding: 32px;
}

.track-form-block h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.track-form-hard label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.track-row {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px;
}

.track-form-hard input {
  padding: 14px;
  border: 2px solid #000000;
  font-size: 14px;
  box-sizing: border-box;
}

.track-form-hard input:focus {
  outline: none;
  background: #f9fafb;
}

.track-form-hard button {
  background: #000000;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}

.track-form-hard button:hover {
  background: #facc15;
  color: #000000;
}

/* ERROR */

.track-error-hard {
  margin-top: 20px;
  border-left: 6px solid #b91c1c;
  padding: 16px;
  background: #fef2f2;
}

.track-error-hard strong {
  display: block;
  margin-bottom: 6px;
}

/* RESULT */

.track-result-hard {
  border: 2px solid #000000;
  padding: 32px;
}

/* STATUS */

.track-status-hard {
  margin-bottom: 26px;
}

.track-status-hard strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}

.track-status-hard.processing {
  border-left: 6px solid #ca8a04;
  padding-left: 14px;
}

.track-status-hard.dispatched {
  border-left: 6px solid #15803d;
  padding-left: 14px;
}

/* SUMMARY */

.track-summary-hard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
}

.track-summary-hard span {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #374151;
}

/* RESPONSIVE */

@media (max-width: 700px) {
  .track-row {
    grid-template-columns: 1fr;
  }

  .track-header-inner h1 {
    font-size: 32px;
  }

  .track-summary-hard {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   RETURN REQUEST — HARD BUSINESS UI
===================================================== */

.return-page-hard {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.return-header-hard {
  background: #0a0a0a;
  padding: 90px 20px 70px;
}

.return-header-inner {
  max-width: 900px;
  margin: auto;
}

.return-header-inner h1 {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 10px;
}

.return-header-inner p {
  font-size: 15px;
  color: #d1d5db;
  max-width: 640px;
  line-height: 1.7;
}

/* BODY */

.return-body-hard {
  max-width: 900px;
  margin: auto;
  padding: 90px 20px;
}

/* FORM BLOCK */

.return-form-block-hard {
  border: 2px solid #000000;
  padding: 36px;
}

.return-form-block-hard h2 {
  font-size: 24px;
  margin-bottom: 26px;
}

.return-form-hard label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.return-form-hard input,
.return-form-hard select,
.return-form-hard textarea {
  width: 100%;
  padding: 14px;
  margin-bottom: 20px;
  border: 2px solid #000000;
  font-size: 14px;
  box-sizing: border-box;
}

.return-form-hard textarea {
  min-height: 120px;
  resize: vertical;
}

.return-form-hard input:focus,
.return-form-hard select:focus,
.return-form-hard textarea:focus {
  outline: none;
  background: #f9fafb;
}

/* BUTTON */

.return-form-hard button {
  width: 100%;
  padding: 16px;
  background: #000000;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}

.return-form-hard button:hover {
  background: #facc15;
  color: #000000;
}

/* ERROR */

.return-error-hard {
  border-left: 6px solid #b91c1c;
  background: #fef2f2;
  padding: 16px;
  margin-bottom: 18px;
}

.return-error-hard strong {
  display: block;
  margin-bottom: 6px;
}

/* POLICY NOTE */

.return-policy-note {
  margin-top: 16px;
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
}

/* SUCCESS */

.return-success-hard {
  border: 2px solid #000000;
  padding: 40px;
}

.return-success-hard strong {
  display: block;
  font-size: 22px;
  margin-bottom: 12px;
}

.return-success-hard p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 22px;
}

/* SUMMARY */

.return-summary-hard {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
  margin-top: 20px;
}

.return-summary-hard span {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* LINK */

.return-link-hard {
  display: inline-block;
  margin-top: 22px;
  font-weight: 700;
  text-decoration: none;
  color: #000000;
  border-bottom: 2px solid #000000;
}

.return-link-hard:hover {
  color: #facc15;
  border-color: #facc15;
}

/* RESPONSIVE */

@media (max-width: 700px) {
  .return-header-inner h1 {
    font-size: 32px;
  }
}

/* =====================================================
   AUTH PAGE — HARD BUSINESS LOGIN (ALL NEW)
===================================================== */

.auth-page-hard {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.auth-header-hard {
  background: #000000;
  padding: 90px 20px 70px;
}

.auth-header-inner {
  max-width: 700px;
  margin: auto;
}

.auth-header-inner h1 {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.auth-header-inner p {
  font-size: 15px;
  color: #d1d5db;
  line-height: 1.7;
}

/* MAIN */

.auth-main-hard {
  padding: 90px 20px;
  display: flex;
  justify-content: center;
}

/* BOX */

.auth-box-hard {
  width: 100%;
  max-width: 420px;
  border: 2px solid #000000;
  padding: 40px;
}

/* TITLE */

.auth-box-hard h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.auth-info {
  font-size: 14px;
  color: #374151;
  margin-bottom: 26px;
  line-height: 1.6;
}

/* FORM */

.auth-form-hard .auth-field {
  margin-bottom: 18px;
}

.auth-form-hard label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.auth-form-hard input {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  border: 2px solid #000000;
  font-family: inherit;
}

.auth-form-hard input:focus {
  outline: none;
  background: #f9fafb;
}

/* BUTTON */

.auth-form-hard button {
  width: 100%;
  padding: 14px;
  background: #000000;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.auth-form-hard button:hover {
  background: #facc15;
  color: #000000;
}

/* DIVIDER */

.auth-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 26px 0;
}

/* SECONDARY */

.auth-secondary {
  text-align: center;
  font-size: 14px;
}

.auth-secondary a {
  font-weight: 700;
  color: #000000;
  text-decoration: underline;
}

/* RESPONSIVE */

@media (max-width: 600px) {
  .auth-header-inner h1 {
    font-size: 32px;
  }

  .auth-box-hard {
    padding: 30px 24px;
  }
}

/* =====================================================
   REGISTER PAGE — HARD BUSINESS UI (ALL NEW)
===================================================== */

.register-page-hard {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.register-header-hard {
  background: #000000;
  padding: 90px 20px 70px;
}

.register-header-inner {
  max-width: 700px;
  margin: auto;
}

.register-header-inner h1 {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.register-header-inner p {
  font-size: 15px;
  color: #d1d5db;
  line-height: 1.7;
}

/* MAIN */

.register-main-hard {
  padding: 90px 20px;
  display: flex;
  justify-content: center;
}

/* BOX */

.register-box-hard {
  width: 100%;
  max-width: 440px;
  border: 2px solid #000000;
  padding: 40px;
}

/* TITLE */

.register-box-hard h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.register-info {
  font-size: 14px;
  color: #374151;
  margin-bottom: 26px;
  line-height: 1.6;
}

/* FORM */

.register-form-hard .register-field {
  margin-bottom: 18px;
}

.register-form-hard label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.register-form-hard input {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  border: 2px solid #000000;
  font-family: inherit;
}

.register-form-hard input:focus {
  outline: none;
  background: #f9fafb;
}

/* BUTTON */

.register-form-hard button {
  width: 100%;
  padding: 14px;
  background: #000000;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.register-form-hard button:hover {
  background: #facc15;
  color: #000000;
}

/* DIVIDER */

.register-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 26px 0;
}

/* SECONDARY */

.register-secondary {
  text-align: center;
  font-size: 14px;
}

.register-secondary a {
  font-weight: 700;
  color: #000000;
  text-decoration: underline;
}

/* RESPONSIVE */

@media (max-width: 600px) {
  .register-header-inner h1 {
    font-size: 32px;
  }

  .register-box-hard {
    padding: 30px 24px;
  }
}

.auth-form-hard input,
.auth-form-hard button {
  box-sizing: border-box;
}

.register-form-hard input,
.register-form-hard button {
  box-sizing: border-box;
}

/* =====================================================
   ACCOUNT DASHBOARD — HARD BUSINESS UI
===================================================== */

.account-page-hard {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.account-header-hard {
  background: #000000;
  padding: 90px 20px 70px;
}

.account-header-inner {
  max-width: 1000px;
  margin: auto;
}

.account-header-inner h1 {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 12px;
}

.account-header-inner p {
  font-size: 15px;
  color: #d1d5db;
  max-width: 640px;
  line-height: 1.7;
}

/* BODY */

.account-body-hard {
  max-width: 1200px;
  margin: auto;
  padding: 80px 20px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
}

/* SIDEBAR */

.account-sidebar-hard {
  border: 2px solid #000000;
  padding: 24px;
}

.account-identity {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 30px;
}

.account-initial {
  width: 48px;
  height: 48px;
  border: 2px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.account-identity-text strong {
  display: block;
  font-size: 14px;
}

.account-identity-text span {
  font-size: 13px;
  color: #6b7280;
}

/* NAV */

.account-links-hard a {
  display: block;
  padding: 12px;
  border: 1px solid #000000;
  margin-bottom: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
}

.account-links-hard a.active {
  background: #000000;
  color: #ffffff;
}

.account-links-hard a:hover {
  background: #facc15;
  color: #000000;
}

/* MAIN */

.account-main-hard {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* SECTION */

.account-section-hard h2 {
  font-size: 26px;
  margin-bottom: 18px;
}

/* DATA */

.account-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  border: 2px solid #000000;
  padding: 24px;
}

.account-data span {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #374151;
}

/* ACTIONS */

.account-actions-hard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.account-action-hard {
  border: 2px solid #000000;
  padding: 24px;
  text-decoration: none;
  color: #000000;
}

.account-action-hard strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}

.account-action-hard span {
  font-size: 14px;
  color: #374151;
}

.account-action-hard:hover {
  background: #facc15;
}

/* NOTICE */

.account-notice-hard {
  border-left: 6px solid #000000;
  padding: 20px;
  background: #f9fafb;
}

.account-notice-hard strong {
  display: block;
  margin-bottom: 6px;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .account-body-hard {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .account-actions-hard {
    grid-template-columns: 1fr;
  }

  .account-data {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   ABOUT PAGE — HARD BUSINESS STYLE (ALL NEW)
===================================================== */

.about-page-new {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.about-header-new {
  background: #000000;
  padding: 110px 20px 90px;
}

.about-header-inner {
  max-width: 900px;
  margin: auto;
}

.about-header-inner h1 {
  font-size: 44px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}

.about-header-inner p {
  font-size: 16px;
  color: #d1d5db;
  max-width: 620px;
  line-height: 1.7;
}

/* CONTENT */

.about-content-new {
  max-width: 900px;
  margin: auto;
  padding: 90px 20px;
}

.about-row {
  margin-bottom: 80px;
}

.about-row.alt {
  border-left: 6px solid #000000;
  padding-left: 26px;
}

.about-row.legal {
  border-top: 2px solid #e5e7eb;
  padding-top: 40px;
}

.about-row h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #000000;
}

.about-row p {
  font-size: 15px;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 14px;
}

/* LISTS */

.about-list {
  list-style: square;
  padding-left: 22px;
}

.about-list li {
  font-size: 15px;
  margin-bottom: 10px;
  color: #374151;
}

.about-list.negative li {
  color: #7c2d12;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .about-header-inner h1 {
    font-size: 34px;
  }

  .about-row h2 {
    font-size: 24px;
  }

  .about-content-new {
    padding: 70px 16px;
  }
}

/* =====================================================
   CONTACT PAGE — HARD BUSINESS UI (ALL NEW)
===================================================== */

.contact-page-new {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* TOP STRIP */

.contact-top-strip {
  background: #000000;
  padding: 100px 20px 80px;
}

.contact-top-inner {
  max-width: 900px;
  margin: auto;
}

.contact-top-inner h1 {
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}

.contact-top-inner p {
  font-size: 16px;
  color: #d1d5db;
  max-width: 620px;
  line-height: 1.7;
}

/* MAIN GRID */

.contact-main {
  max-width: 1100px;
  margin: auto;
  padding: 90px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

/* LEFT */

.contact-left h2 {
  font-size: 26px;
  margin-bottom: 16px;
}

.contact-intro {
  font-size: 15px;
  color: #374151;
  line-height: 1.7;
  margin-bottom: 30px;
}

.contact-detail-list {
  border: 2px solid #000000;
}

.contact-detail-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  padding: 14px 16px;
  border-bottom: 1px solid #000000;
}

.contact-detail-item:last-child {
  border-bottom: none;
}

.contact-detail-item .label {
  font-size: 13px;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
}

.contact-detail-item .value {
  font-size: 14px;
  color: #374151;
}

/* HOURS */

.contact-hours {
  margin-top: 30px;
  padding: 18px;
  border-left: 6px solid #000000;
}

.contact-hours strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

/* RIGHT */

.contact-right h2 {
  font-size: 26px;
  margin-bottom: 18px;
}

/* FORM */

.contact-form-new-hard input,
.contact-form-new-hard textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid #000000;
  font-size: 14px;
  margin-bottom: 16px;
  font-family: inherit;
}

.contact-form-new-hard textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form-new-hard input:focus,
.contact-form-new-hard textarea:focus {
  outline: none;
  background: #f9fafb;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* BUTTON */

.contact-form-new-hard button {
  width: 100%;
  padding: 14px;
  background: #000000;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.contact-form-new-hard button:hover {
  background: #facc15;
  color: #000000;
}

/* CONFIRMATION */

.contact-confirmation {
  border: 2px solid #000000;
  padding: 36px;
}

.contact-confirmation h2 {
  margin-bottom: 10px;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .contact-main {
    grid-template-columns: 1fr;
    gap: 50px;
  }

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

  .contact-top-inner h1 {
    font-size: 34px;
  }
}

/* =====================================================
   FAQ PAGE — HARD BUSINESS ACCORDION (ALL NEW)
===================================================== */

.faq-page-new {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.faq-header-new {
  background: #000000;
  padding: 100px 20px 80px;
}

.faq-header-inner {
  max-width: 900px;
  margin: auto;
}

.faq-header-inner h1 {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 14px;
}

.faq-header-inner p {
  font-size: 16px;
  color: #d1d5db;
  max-width: 620px;
  line-height: 1.7;
}

/* BODY */

.faq-body-new {
  max-width: 900px;
  margin: auto;
  padding: 90px 20px;
}

/* SECTION */

.faq-section {
  margin-bottom: 70px;
}

.faq-section h2 {
  font-size: 26px;
  margin-bottom: 22px;
  border-bottom: 2px solid #000000;
  padding-bottom: 10px;
}

/* ITEM */

.faq-item {
  border: 2px solid #000000;
  margin-bottom: 14px;
}

.faq-question {
  width: 100%;
  background: #ffffff;
  border: none;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-question .toggle {
  font-size: 20px;
  font-weight: 700;
}

.faq-answer {
  display: none;
  padding: 16px;
  border-top: 1px solid #000000;
}

.faq-answer p {
  font-size: 14px;
  color: #374151;
  line-height: 1.7;
}

/* ACTIVE STATE */

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-question .toggle {
  transform: rotate(45deg);
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .faq-header-inner h1 {
    font-size: 32px;
  }

  .faq-section h2 {
    font-size: 22px;
  }

  .faq-body-new {
    padding: 70px 16px;
  }
}

/* =====================================================
   SHOP PAGE — HARD ENTERPRISE (NEW CLASSES)
===================================================== */

.spx-shop {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.spx-shop-header {
  background: #0a0a0a;
  padding: 90px 20px 70px;
}

.spx-shop-header-inner {
  max-width: 1300px;
  margin: auto;
}

.spx-shop-header-inner h1 {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 10px;
}

.spx-shop-header-inner p {
  font-size: 15px;
  color: #d1d5db;
  max-width: 700px;
}

.spx-shop-result {
  margin-top: 12px;
  font-size: 14px;
  color: #e5e7eb;
}

/* BODY */

.spx-shop-body {
  max-width: 1300px;
  margin: auto;
  padding: 80px 20px;
}

/* LAYOUT */

.spx-shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
}

/* FILTER */

.spx-filter-panel {
  border: 2px solid #000;
  padding: 22px;
  height: fit-content;
}

.spx-filter-panel h3 {
  font-size: 20px;
  margin-bottom: 14px;
}

.spx-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.spx-filter-list li a {
  display: block;
  padding: 10px 12px;
  border: 2px solid transparent;
  color: #000;
  text-decoration: none;
  margin-bottom: 6px;
  font-size: 14px;
}

.spx-filter-list li a:hover,
.spx-filter-list li a.active {
  border-color: #000;
  background: #facc15;
}

/* PRODUCTS */

.spx-product-area {
  min-height: 200px;
}

/* EMPTY */

.spx-empty-state {
  border: 2px solid #000;
  padding: 40px;
  max-width: 520px;
}

.spx-empty-state strong {
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
}

/* GRID */

.spx-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* CARD */

.spx-product-card {
  border: 2px solid #000;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.spx-product-link {
  text-decoration: none;
  color: inherit;
  flex-grow: 1;
}

/* IMAGE */

.spx-product-image {
  border-bottom: 2px solid #000;
  padding: 24px;
  position: relative;
  background: #ffffff;
  perspective: 900px;
}

.spx-product-image::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  opacity: 0.08;
}

.spx-product-image img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  position: relative;
  z-index: 1;

  transform: translateZ(40px);
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.18),
    0 4px 0 rgba(0, 0, 0, 0.25);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.spx-product-card:hover .spx-product-image img {
  transform: translateZ(70px) scale(1.03);
  box-shadow:
    0 28px 48px rgba(0, 0, 0, 0.25),
    0 6px 0 rgba(0, 0, 0, 0.35);
}

.spx-stock-label {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border: 2px solid #000;
  background: #ffffff;
}

.spx-stock-label.out {
  background: #fef2f2;
}

/* INFO */

.spx-product-info {
  padding: 16px;
}

.spx-product-info h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.spx-product-info p {
  font-size: 14px;
  color: #374151;
}

/* FOOTER */

.spx-product-footer {
  border-top: 2px solid #000;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spx-price {
  font-size: 16px;
  font-weight: 700;
}

/* BUTTONS */

.spx-add-btn {
  padding: 8px 14px;
  border: 2px solid #000;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.spx-add-btn:hover {
  background: #facc15;
  color: #000;
}

.spx-disabled-btn {
  padding: 8px 14px;
  border: 2px solid #000;
  background: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .spx-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .spx-shop-layout {
    grid-template-columns: 1fr;
  }

  .spx-product-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   CART — HARD BUSINESS UI
===================================================== */

.cart-hard {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111827;
}

/* HEADER */

.cart-header-hard {
  background: #0b0b0b;
  padding: 80px 20px 60px;
}

.cart-header-inner {
  max-width: 1200px;
  margin: auto;
}

.cart-header-inner h1 {
  font-size: 38px;
  color: #ffffff;
  margin-bottom: 8px;
}

.cart-header-inner p {
  font-size: 15px;
  color: #d1d5db;
}

/* BODY */

.cart-body-hard {
  max-width: 1200px;
  margin: auto;
  padding: 80px 20px;
}

/* EMPTY */

.cart-empty-hard {
  border: 2px solid #000;
  padding: 40px;
  max-width: 520px;
}

.cart-empty-hard strong {
  display: block;
  font-size: 22px;
  margin-bottom: 12px;
}

.cart-empty-hard p {
  margin-bottom: 20px;
}

/* LAYOUT */

.cart-layout-hard {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 50px;
}

/* TABLE */

.cart-table-hard {
  border: 2px solid #000;
}

.cart-table-head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  background: #f3f4f6;
  padding: 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.cart-row-hard {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding: 18px 14px;
  border-top: 1px solid #e5e7eb;
  align-items: center;
}

/* PRODUCT */

.cart-product-hard {
  display: flex;
  gap: 14px;
  align-items: center;
}

.cart-product-hard img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
}

/* QTY */

.cart-qty-hard form {
  display: flex;
  gap: 6px;
}

.cart-qty-hard input {
  width: 70px;
  padding: 8px;
  border: 2px solid #000;
  box-sizing: border-box;
}

.cart-qty-hard button {
  padding: 8px 10px;
  border: 2px solid #000;
  background: #ffffff;
  font-size: 12px;
  cursor: pointer;
}

.cart-qty-hard button:hover {
  background: #facc15;
}

/* PRICE */

.cart-price-hard strong {
  display: block;
  margin-bottom: 6px;
}

.cart-remove-hard {
  background: none;
  border: none;
  color: #b91c1c;
  font-size: 13px;
  cursor: pointer;
}

.cart-remove-hard:hover {
  text-decoration: underline;
}

/* SUMMARY */

.cart-summary-hard {
  border: 2px solid #000;
  padding: 26px;
}

.cart-summary-hard h2 {
  font-size: 22px;
  margin-bottom: 22px;
}

.summary-row-hard {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 12px;
}

.summary-row-hard.total {
  font-size: 17px;
  font-weight: 700;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
  margin-top: 14px;
}

/* BUTTON */

.cart-btn-hard {
  display: inline-block;
  padding: 14px 18px;
  border: 2px solid #000;
  text-decoration: none;
  font-weight: 700;
  color: #000;
}

.cart-btn-hard.primary {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.cart-btn-hard:hover {
  background: #facc15;
}

/* TRUST */

.cart-trust-hard {
  font-size: 13px;
  margin-top: 18px;
  color: #374151;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .cart-layout-hard {
    grid-template-columns: 1fr;
  }

  .cart-table-head {
    display: none;
  }

  .cart-row-hard {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.cart-btn-hard {
  box-sizing: border-box;
}

/* =====================================================
   CATEGORY PAGE
===================================================== */

.category-page {
  background: #ffffff;
}

/* HERO */
.category-hero {
  background: linear-gradient(180deg, #f5f5f7, #ffffff);
  padding: 90px 0 70px;
  text-align: center;
}

.category-hero h1 {
  font-size: 40px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 12px;
}

.category-hero p {
  font-size: 16px;
  color: #374151;
  max-width: 640px;
  margin: 0 auto;
}

/* CONTENT */
.category-content {
  padding: 70px 0 100px;
}

/* INFO */
.category-info {
  max-width: 760px;
  margin: 0 auto 50px;
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
}

/* EMPTY */
.category-empty {
  text-align: center;
  font-size: 15px;
  color: #6e6e73;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .category-hero h1 {
    font-size: 32px;
  }
}

/* =====================================================
   POLICY PAGES (PRIVACY, TERMS, REFUND, ETC.)
===================================================== */

.policy-page {
  padding: 90px 0;
  background: #ffffff;
}

.policy-title {
  font-size: 38px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 6px;
}

.policy-updated {
  font-size: 13px;
  color: #6e6e73;
  margin-bottom: 40px;
}

.policy-content {
  max-width: 900px;
  line-height: 1.7;
}

.policy-content h2 {
  font-size: 22px;
  margin-top: 36px;
  margin-bottom: 10px;
  color: #1d1d1f;
}

.policy-content p {
  font-size: 15px;
  color: #374151;
  margin-bottom: 12px;
}

.policy-content ul {
  padding-left: 20px;
  margin-bottom: 14px;
}

.policy-content li {
  font-size: 15px;
  color: #374151;
  margin-bottom: 6px;
}

.policy-contact {
  margin-top: 16px;
  font-size: 15px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .policy-title {
    font-size: 32px;
  }
}

.shop-search-note {
  font-size: 14px;
  color: #6e6e73;
  margin-bottom: 30px;
}

/* HP Link */
.hp-partner {
  max-width: 150px;
  cursor: pointer;
  margin-bottom: 8px;
}

/* Popup styles */
.hp-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.hp-popup {
  background: #fff;
  padding: 25px;
  max-width: 420px;
  width: 90%;
  border-radius: 6px;
  text-align: center;
}

.hp-popup-actions {
  margin-top: 20px;
}

.hp-popup-actions button {
  padding: 8px 18px;
  margin: 0 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#hpProceed {
  background: #0076ce;
  color: #fff;
}

#hpCancel {
  background: #ccc;
}