/**
 * Ori Peptides WordPress Theme — main.css
 * Matches blog-detail.html design reference.
 */

/* ─────────────────────────────────────────────
   Design Tokens
───────────────────────────────────────────── */
:root {
  --brand-100: #d6e5ff;
  --brand-700: #042b77;
  --brand-800: #021437;
  --brand-main: #044efc;
  --brand-light: rgba(176,203,255,0.4);
  --yellow-500: #ff9100;
  --text-title: #1b1c1d;
  --text-body: #363d45;
  --text-secondary: #6b7989;
  --border-light: #e8eaed;
  --border-lighter: #f1f2f4;
  --border-disabled: #dde0e4;
  --neutrals-500: #98a2ae;
  --red: #d32f2f;
  /* Backward-compat aliases */
  --navy-900: #021437;
  --navy-800: #042B77;
  --navy-600: #044EFC;
  --navy-50: #EEF4FF;
  --neutral-900: #1A1B1D;
  --neutral-800: #353D44;
  --neutral-700: #363D45;
  --neutral-500: #6B7989;
  --neutral-400: #98A2AE;
  --neutral-200: #E8EAED;
  --neutral-150: #F1F2F4;
  --neutral-100: #F9F9FA;
  --font-heading: 'DM Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* ─────────────────────────────────────────────
   Base Reset
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
ul { list-style: none; }
.heading-font { font-family: 'DM Sans', sans-serif; font-variation-settings: "opsz" 14; }

/* ─────────────────────────────────────────────
   Promo Bar / Banner
───────────────────────────────────────────── */
.promo-bar,
.banner {
  background: var(--brand-700);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-size: 14px;
}
.promo-bar .dot,
.banner .dot {
  width: 6px; height: 6px; border-radius: 3px; background: #fff; display: inline-block;
}
.promo-bar .shop-now,
.banner-link {
  display: flex; align-items: center; gap: 4px;
  font-weight: 600; color: var(--yellow-500);
  text-decoration: none; font-size: 14px;
}
.promo-bar .shop-now img,
.banner-link svg { width: 16px; height: 16px; }

/* ─────────────────────────────────────────────
   Navbar
───────────────────────────────────────────── */
.navbar-wrap { background: var(--brand-700); position: relative; }

nav.site-nav,
.navbar {
  background: #fff;
  border-radius: 24px 24px 0 0;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
}
nav.site-nav .logo img { height: 48px; width: 229px; }
nav.site-nav .links,
.navbar-links {
  display: flex; align-items: center; gap: 32px;
}
nav.site-nav .links a,
.navbar-links a {
  font-size: 14px; color: var(--text-title); white-space: nowrap;
  text-decoration: none; transition: color 0.15s;
}
nav.site-nav .links a:hover,
nav.site-nav .links a.active,
.navbar-links a:hover,
.navbar-links a.active { color: var(--brand-main); }
nav.site-nav .links a.active,
.navbar-links a.active { font-weight: 600; }

nav.site-nav .actions,
.navbar-actions {
  display: flex; align-items: center; gap: 12px;
}
.navbar-actions .btn-primary svg { display: none; }
.navbar-menu-btn {
  display: none;
  background: none; border: none; cursor: pointer; padding: 0;
}

/* Cart button */
.cart-btn,
a.btn-cart,
.btn-cart {
  position: relative !important;
  width: 48px; height: 44px;
  border-radius: 20px;
  background: #fff;
  border: 1.5px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  overflow: visible !important;
}
.cart-btn img,
.btn-cart svg { width: 20px; height: 20px; }

/* Cart badge */
.cart-badge,
.btn-cart .cart-badge,
#cartBadge {
  position: absolute !important;
  top: -6px !important; right: -3px !important;
  min-width: 18px !important; height: 18px !important;
  border-radius: 9px !important;
  background: var(--red) !important; color: #fff !important;
  font-size: 11px !important; font-weight: 700 !important;
  line-height: 16.5px;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 4px !important;
  z-index: 10;
  opacity: 0; transform: scale(0);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
  box-sizing: border-box !important;
}
.cart-badge.visible,
.btn-cart .cart-badge.visible,
#cartBadge.visible { opacity: 1 !important; transform: scale(1) !important; }

/* Primary / Account button */
.btn-account,
.btn-primary {
  height: 44px; border-radius: 20px; background: var(--brand-main);
  color: #fff; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; padding: 10px 20px;
  border: none; cursor: pointer; text-decoration: none;
  font-family: var(--font-body);
}

/* Language switcher */
.lang-switch {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500;
  text-decoration: none; color: var(--text-title);
}
.lang-switch-label { font-size: 13px; font-weight: 600; }

/* ─────────────────────────────────────────────
   Hero Section (Blog Detail)
───────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(to bottom, rgba(249,250,251,0), var(--brand-light));
  border-bottom: 1px solid var(--border-lighter);
  padding: 56px 80px 49px;
  display: flex;
  gap: 80px;
}
.hero-left {
  flex: 1 1 0; max-width: 550px;
  display: flex; flex-direction: column; gap: 24px;
}
.hero-right { flex: 1 1 0; }

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.breadcrumb span,
.breadcrumb a {
  font-size: 14px; color: var(--text-secondary);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--brand-main); }
.breadcrumb svg { width: 20px; height: 20px; color: var(--text-secondary); flex-shrink: 0; }
/* Yoast/Rank Math breadcrumb override */
.post-breadcrumb { padding: 0; margin-bottom: 24px; }
.post-breadcrumb-inner { font-size: 14px; color: var(--text-secondary); }
.post-breadcrumb-inner a { color: var(--text-secondary); text-decoration: none; }
.post-breadcrumb-inner a:hover { color: var(--brand-main); }

/* Meta row */
.meta-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.meta-badge {
  background: #fff; border: 1px solid var(--border-light); border-radius: 8px;
  height: 28px; display: flex; align-items: center; padding: 8px 17px;
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  color: var(--text-title); text-decoration: none;
}
.meta-badge:hover { border-color: var(--brand-main); color: var(--brand-main); }
.meta-dot {
  width: 5px; height: 5px; border-radius: 100px; background: var(--neutrals-500);
}
.meta-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-body);
}
.meta-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Hero title and lede */
.hero-left h1 {
  font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-title);
}
.hero-left .lede {
  font-size: 16px; line-height: 24px; color: var(--text-secondary);
}

/* Hero image */
.hero-image-wrap {
  aspect-ratio: 750 / 420; border-radius: 16px; overflow: hidden; width: 100%;
}
.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ─────────────────────────────────────────────
   Article Section
───────────────────────────────────────────── */
.article-section {
  padding: 80px 80px 64px 40px;
}
.article-grid {
  display: flex; align-items: flex-start; padding-bottom: 40px; gap: 0;
}

/* Sidebar */
.article-sidebar {
  flex: 0 0 300px; max-width: 400px;
  padding-right: 40px;
  display: flex; flex-direction: column; gap: 40px;
  position: sticky; top: 24px;
}

/* Share */
.share-title {
  font-size: 16px; font-weight: 600; color: var(--text-title); margin-bottom: 16px;
}
.share-buttons { display: flex; gap: 24px; }
.share-buttons a,
.share-buttons button {
  width: 48px; height: 48px; border-radius: 16px; background: var(--border-lighter);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; text-decoration: none; color: var(--text-body);
  transition: background 0.15s;
}
.share-buttons a:hover,
.share-buttons button:hover { background: var(--border-light); }
.share-buttons svg { width: 24px; height: 24px; }

/* Author box */
.author-box { display: flex; gap: 12px; align-items: flex-start; }
.author-avatar {
  width: 40px; height: 40px; border-radius: 100px; background: var(--brand-100);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  overflow: hidden;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.author-avatar .initials {
  font-size: 14px; font-weight: 700; color: var(--brand-main);
}
.author-meta .label { font-size: 14px; color: var(--text-secondary); }
.author-meta .name { font-size: 14px; font-weight: 600; color: var(--text-title); margin-bottom: 8px; }
.author-meta .bio { font-size: 12px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }

/* Article main */
.article-main {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 40px;
  max-width: 920px; min-width: 0;
}
.article-main > .intro {
  font-size: 16px; line-height: 24px; color: #000;
}

/* Content blocks */
.descriptions-block,
.article-main .wp-content-block {
  border-bottom: 1px solid var(--border-disabled);
  padding-bottom: 40px;
  display: flex; flex-direction: column; gap: 16px;
  color: var(--text-title);
}
.descriptions-block h2,
.article-main h2 {
  font-size: 28px; line-height: 36px; font-weight: 600;
  font-family: var(--font-heading);
  margin-top: 16px;
}
.descriptions-block p,
.article-main p {
  font-size: 16px; line-height: 24px; color: var(--text-body);
}
.descriptions-block p b,
.article-main p b,
.article-main strong { font-weight: 700; }

.article-body-image {
  aspect-ratio: 750 / 420; border-radius: 16px; overflow: hidden;
}
.article-body-image img { width: 100%; height: 100%; object-fit: cover; }

.article-main h3 {
  font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-title);
  font-family: var(--font-heading); margin-top: 8px;
}
.article-main h4 {
  font-size: 18px; line-height: 26px; font-weight: 600; color: var(--text-title);
  font-family: var(--font-heading); margin-top: 8px;
}

/* Article body rich content (the_content output) */
.article-main ul,
.article-main ol {
  padding-left: 24px; margin: 8px 0;
  list-style: disc;
}
.article-main ol { list-style: decimal; }
.article-main li {
  font-size: 16px; line-height: 24px; margin-bottom: 6px; color: var(--text-body);
}
.article-main a {
  color: var(--brand-main); text-decoration: underline;
  text-underline-offset: 2px;
}
.article-main a:hover { text-decoration: none; }

.article-main blockquote {
  border-left: 4px solid var(--brand-main);
  padding: 16px 24px;
  margin: 16px 0;
  background: var(--border-lighter);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text-title);
}
.article-main blockquote p { font-size: 16px; line-height: 26px; }

.article-main pre {
  background: var(--text-title); color: #e0e0e0;
  padding: 20px 24px; border-radius: 12px;
  overflow-x: auto; font-size: 13px; line-height: 1.6;
  margin: 16px 0;
}
.article-main code {
  background: var(--border-lighter); color: var(--text-title);
  padding: 2px 6px; border-radius: 4px; font-size: 14px;
}
.article-main pre code {
  background: none; color: inherit; padding: 0; border-radius: 0; font-size: inherit;
}

.article-main table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: 14px; overflow-x: auto; display: block;
}
.article-main thead th {
  background: var(--border-lighter); font-weight: 600; color: var(--text-title);
  text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--border-light);
  white-space: nowrap;
}
.article-main tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--border-lighter);
  color: var(--text-body); vertical-align: top;
}
.article-main tbody tr:hover { background: var(--border-lighter); }

.article-main img {
  border-radius: 12px; margin: 16px 0;
}
.article-main figure {
  margin: 16px 0;
}
.article-main figcaption {
  font-size: 13px; color: var(--text-secondary); text-align: center;
  margin-top: 8px;
}
.article-main hr {
  border: none; border-top: 1px solid var(--border-light); margin: 32px 0;
}

/* wp_link_pages pagination */
.wp-link-pages {
  margin-top: 32px; padding: 16px 0;
  border-top: 1px solid var(--border-light);
  font-size: 14px; color: var(--text-secondary);
}
.wp-link-pages a {
  color: var(--brand-main); font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
}
.wp-link-pages a:hover { background: var(--brand-100); }
.wp-link-pages .post-page-numbers.current {
  background: var(--brand-main); color: #fff;
  padding: 4px 10px; border-radius: 6px; font-weight: 600;
}

/* ─────────────────────────────────────────────
   Related Articles
───────────────────────────────────────────── */
.related-section {
  background: linear-gradient(to bottom, rgba(249,250,251,0), var(--brand-light));
  border-bottom: 1px solid var(--border-lighter);
  padding: 56px 80px 49px;
}
.related-section > h2 {
  font-size: 24px; line-height: 32px; font-weight: 600;
  color: var(--text-title); margin-bottom: 24px;
}
.related-grid {
  display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap;
}
.related-card {
  flex: 1 1 0; min-width: 260px;
  display: flex; flex-direction: column; gap: 16px;
  text-decoration: none; transition: transform 0.2s;
}
.related-card:hover { transform: translateY(-2px); }
.related-thumb {
  aspect-ratio: 370.33 / 190; background: var(--border-lighter);
  border-radius: 10px; width: 100%; overflow: hidden;
}
.related-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s;
}
.related-card:hover .related-thumb img { transform: scale(1.04); }
.related-card h3 {
  font-size: 16px; font-weight: 600; line-height: 24px; color: var(--text-title);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.related-card p.desc {
  font-size: 14px; line-height: 20px; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.related-author { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.related-author .avatar {
  width: 32px; height: 32px; border-radius: 100px; background: var(--brand-100);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.related-author .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.related-author .avatar .initials { font-size: 11px; font-weight: 700; color: var(--brand-main); }
.related-author .name { font-size: 12px; font-weight: 600; color: var(--text-body); }
.related-author .date { font-size: 12px; color: var(--text-secondary); }

/* ─────────────────────────────────────────────
   Newsletter
───────────────────────────────────────────── */
.newsletter,
.subscribe-section {
  background: var(--brand-800);
  padding: 48px 80px;
  display: flex; align-items: center; gap: 80px;
}
.subscribe-inner {
  width: 100%;
  display: flex; align-items: center; gap: 80px;
}
.newsletter-copy,
.subscribe-left {
  flex: 600 0 0; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.subscribe-right {
  flex: 600 0 0; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.newsletter-copy h2,
.subscribe-title {
  font-family: var(--font-heading);
  font-size: 36px; line-height: 48px; font-weight: 600; color: #fff;
}
.newsletter-copy h2 .accent,
.subscribe-title .accent { color: var(--brand-main); }
.newsletter-copy h2 .light,
.subscribe-title .light { font-weight: 300; }
.newsletter-copy p,
.subscribe-desc { font-size: 14px; color: #fff; }

.newsletter-form,
.subscribe-field {
  flex: 600 0 0; min-width: 0;
  background: #fff; border-radius: 16px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.newsletter-form input,
.subscribe-input {
  flex: 1; border: none; outline: none;
  font-size: 14px; color: var(--text-title); font-family: var(--font-body);
  background: transparent;
}
.newsletter-form input::placeholder,
.subscribe-input::placeholder { color: var(--neutrals-500); }
.newsletter-form button,
.btn-subscribe {
  background: var(--brand-main); color: #fff; border: none; border-radius: 16px;
  height: 44px; padding: 10px 20px; display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body);
}
.newsletter-form button svg,
.btn-subscribe svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ─────────────────────────────────────────────
   Footer
───────────────────────────────────────────── */
footer.site-footer,
.footer-details { padding: 48px 80px 32px; }
.footer-top {
  border-bottom: 1px solid var(--neutral-200);
  grid-template-columns: 308px 1fr;
  gap: 124px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  display: grid;
}
.footer-brand { display: flex; flex-direction: column; gap: 40px; flex-shrink: 0; }
.footer-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 32px 24px;
}
.footer-brand img,
.footer-logo img { height: 48px; width: 229px; object-fit: contain; }
.footer-brand .buttons,
.footer-social { display: flex; gap: 8px; }
.footer-brand .btn-contact,
.footer-social-btn.filled {
  flex: 1; height: 36px; border-radius: 16px; background: var(--brand-main); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; text-decoration: none; border: none;
}
.footer-brand .btn-signin,
.footer-social-btn.outline {
  flex: 1; height: 36px; border-radius: 16px; background: #fff;
  border: 1.5px solid var(--border-light);
  color: var(--text-title); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.footer-col h4 {
  font-family: var(--font-heading); font-variation-settings: "opsz" 14;
  font-size: 14px; font-weight: 600; color: var(--text-title);
  letter-spacing: 0.5px; margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
  font-size: 14px; color: var(--text-body); text-decoration: none;
  transition: color 0.15s;
}
.footer-col ul li a:hover { color: var(--brand-main); }

.footer-disclaimer {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 41px;
}
.footer-disclaimer p {
  font-size: 14px; color: var(--text-body); margin-top: 8px;
}
.footer-disclaimer p:first-child { margin-top: 0; }

.footer-bottom {
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom .copyright,
.footer-copyright {
  font-size: 12px; color: var(--text-body);
}
.footer-bottom .links,
.footer-bottom-links {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.footer-bottom .links a,
.footer-bottom-links a {
  font-size: 12px; font-weight: 600; color: var(--text-body);
  text-decoration: none; transition: color 0.15s;
}
.footer-bottom .links a:hover,
.footer-bottom-links a:hover { color: var(--brand-main); }
.footer-bottom .links .dot,
.footer-bottom-links .dot {
  width: 6px; height: 6px; border-radius: 3px; background: var(--neutrals-500);
  display: inline-block;
}

/* ─────────────────────────────────────────────
   Cart Drawer
───────────────────────────────────────────── */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  z-index: 40;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 388px; max-width: 92vw;
  background: #fff; border-left: 1px solid var(--border-light);
  box-shadow: 0px 6px 12px 0px rgba(28,28,28,0.1);
  transform: translateX(100%); transition: transform 0.25s ease;
  z-index: 41; display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }

.cart-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 32px 16px 16px; position: relative;
}
.cart-header .icon-box {
  width: 36px; height: 36px; border-radius: 12px; background: var(--border-lighter);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cart-header .icon-box svg { width: 20px; height: 20px; }
.cart-header h2 {
  font-family: var(--font-heading); font-variation-settings: "opsz" 14;
  font-size: 20px; font-weight: 600; color: var(--text-title);
}
.cart-header .count { font-size: 16px; color: var(--text-secondary); }
.cart-close {
  position: absolute; top: 12px; right: 0; width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; background: none;
}
.cart-close svg { width: 20px; height: 20px; }

.cart-items {
  flex: 1; overflow-y: auto; padding: 0 16px;
  display: flex; flex-direction: column; gap: 24px;
}
.cart-item {
  display: flex; gap: 16px; align-items: flex-start;
  border-bottom: 1px solid var(--border-lighter); padding-bottom: 25px;
}
.cart-item .thumb {
  width: 56px; height: 56px; border-radius: 12px; background: var(--border-lighter);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cart-item .thumb img { width: 45px; height: 45px; object-fit: contain; }
.cart-item .details {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px;
}
.cart-item .details .item-name { font-size: 18px; font-weight: 600; color: var(--text-title); }
.cart-item .details .unit-price { font-size: 16px; color: var(--text-title); }
.qty-control { display: flex; align-items: center; gap: 12px; }
.qty-control button {
  width: 40px; height: 40px; border-radius: 12px; background: var(--border-lighter);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.qty-control button svg { width: 20px; height: 20px; }
.qty-control .qty {
  min-width: 28px; text-align: center;
  font-size: 18px; font-weight: 600; color: var(--text-title);
}
.cart-item .line-total {
  width: 84px; text-align: right;
  font-size: 16px; font-weight: 600; color: var(--text-title);
}

.cart-rows { padding: 0 16px; }
.cart-row {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border-disabled); padding: 17px 0;
}
.cart-row:last-child { border-bottom: 1px solid var(--border-disabled); }
.cart-row span { font-size: 14px; font-weight: 600; color: var(--text-title); }
.cart-row .total { font-size: 16px; }

.cart-footer {
  padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 15px;
}
.btn-checkout {
  height: 52px; border-radius: 24px; background: #1a6aad; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 16px; font-weight: 600; border: none; cursor: pointer;
  font-family: var(--font-body); text-decoration: none;
}
.btn-checkout svg { width: 20px; height: 20px; }
.btn-continue {
  background: none; border: none; padding: 8px;
  text-align: center; font-size: 12px; color: var(--text-body); cursor: pointer;
}

/* ─────────────────────────────────────────────
   WordPress Block Overrides
───────────────────────────────────────────── */
.article-main .alignwide { margin-left: -40px; margin-right: -40px; max-width: calc(100% + 80px); }
.article-main .alignfull { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; width: 100vw; }
.article-main .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.article-main .alignleft { float: left; margin: 4px 24px 16px 0; }
.article-main .alignright { float: right; margin: 4px 0 16px 24px; }

.article-main .wp-block-button__link {
  background: var(--brand-main); color: #fff;
  border: none; padding: 10px 20px; border-radius: 20px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  text-decoration: none; display: inline-block;
}

.article-main .wp-block-table { overflow-x: auto; }
.article-main .wp-block-image img { border-radius: 12px; }
.article-main .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 12px; }
.article-main .wp-block-embed { margin: 24px 0; }
.article-main .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; }
.article-main .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; }

.article-main .wp-block-quote {
  border-left: 4px solid var(--brand-main); padding: 16px 24px;
  background: var(--border-lighter); border-radius: 0 8px 8px 0;
  margin: 16px 0;
}
.article-main .wp-block-pullquote {
  border-top: 4px solid var(--brand-main); border-bottom: 4px solid var(--brand-main);
  padding: 24px 0; margin: 24px 0; text-align: center;
}
.article-main .wp-block-pullquote blockquote { border: none; background: none; padding: 0; }

.article-main .wp-caption { max-width: 100%; }
.article-main .wp-caption-text { font-size: 13px; color: var(--text-secondary); text-align: center; margin-top: 8px; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  nav.site-nav, .navbar { padding: 0 32px; border-radius: 16px 16px 0 0; }
  .hero-section { padding: 40px 40px 36px; gap: 40px; }
  .article-section { padding: 48px 40px 48px 32px; }
  .article-sidebar { flex: 0 0 240px; padding-right: 32px; }
  .related-section { padding: 48px 40px; }
  .newsletter, .subscribe-section { padding: 48px 32px; gap: 40px; }
  footer.site-footer, .footer-details { padding: 40px 32px 24px; }
  .footer-cols { grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 28px 20px; }
}

/* Hamburger */
@media (max-width: 960px) {
  nav.site-nav .links,
  .navbar-links { display: none; }
  .navbar-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; padding: 16px 16px 24px; gap: 16px;
    border-top: 1px solid var(--border-light);
    z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }
  .navbar-menu-btn { display: flex; align-items: center; justify-content: center; }
  .navbar-wrap { position: relative; }

  .hero-section { flex-direction: column; gap: 32px; }
  .hero-left { max-width: none; }
  .article-grid { flex-direction: column; }
  .article-sidebar { flex: none; max-width: none; padding-right: 0; position: static; flex-direction: row; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-light); margin-bottom: 32px; }
  .newsletter, .subscribe-section { flex-direction: column; align-items: stretch; }
  .subscribe-inner { flex-direction: column; align-items: stretch; gap: 24px; }
}

/* Mobile */
@media (max-width: 767px) {
  /* Banner */
  .promo-bar, .banner { height: 36px; padding: 0 12px; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
  .promo-bar > span:first-child,
  .banner > span:first-child { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
  .promo-bar .dot, .banner .dot { display: none; }
  .promo-bar .shop-now, .banner-link { flex-shrink: 0; font-size: 12px; white-space: nowrap; }

  /* Navbar */
  nav.site-nav, .navbar { padding: 0 16px; height: 56px; border-radius: 16px 16px 0 0; }
  .navbar-actions { gap: 8px; }
  .cart-btn, a.btn-cart, .btn-cart { width: 40px; height: 40px; border-radius: 10px; }
  .btn-account, .btn-primary { width: 40px; height: 40px; padding: 0; border-radius: 10px; justify-content: center; }
  .btn-account span, .btn-primary span { display: none; }
  .btn-account svg, .btn-primary svg { display: block !important; width: 20px; height: 20px; }
  .navbar-menu-btn { width: 40px; height: 40px; border: 1.5px solid var(--border-light); border-radius: 10px; padding: 0; justify-content: center; }
  .lang-switch-label { display: none; }

  /* Hero */
  .hero-section { padding: 32px 20px 28px; }
  .hero-left h1 { font-size: 22px; line-height: 30px; }

  /* Article */
  .article-section { padding: 32px 20px; }
  .article-sidebar { flex-direction: column; gap: 24px; }
  .article-main p { font-size: 15px; }
  .article-main h2 { font-size: 22px; line-height: 30px; }

  /* Related */
  .related-section { padding: 40px 20px; }
  .related-grid { flex-direction: column; }
  .related-card { min-width: 0; }

  /* Newsletter */
  .newsletter, .subscribe-section { padding: 40px 16px; }
  .newsletter-copy h2, .subscribe-title { font-size: 26px; line-height: 34px; }
  .newsletter-form, .subscribe-field { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .newsletter-form button, .btn-subscribe { width: 100%; justify-content: center; }

  /* Footer */
  footer.site-footer, .footer-details { padding: 32px 16px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-bottom .links, .footer-bottom-links { flex-wrap: wrap; gap: 8px 12px; }

  /* WP blocks */
  .article-main .alignwide { margin-left: 0; margin-right: 0; max-width: 100%; }
  .article-main .alignleft, .article-main .alignright { float: none; margin: 16px 0; }
}