/*
Theme Name: QGC Local Theme
Description: Self-hosted QGC website theme. Remote management and automatic replacement are disabled.
Version: 1.36.58
Author: QGC
Author URI: https://qgc.zos.sa
Theme URI: https://qgc.zos.sa
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qgc-local
Domain Path: /languages
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.4
Tags:
*/

body {
  margin: 0;
  color: var(--color-foreground, var(--foreground));
  background-color: var(--color-background, var(--background));
}

/* QGC branded full-screen loader: prevents the compiled skeleton from flashing. */
body.qgc-loading {
  overflow: hidden !important;
}

#qgc-site-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 420ms ease;
}

#qgc-site-loader.qgc-loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.qgc-loader__stage {
  position: relative;
  width: clamp(210px, 18vw, 270px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.qgc-loader__logo {
  position: relative;
  z-index: 3;
  width: clamp(118px, 10vw, 155px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(18, 35, 30, 0.1));
}

.qgc-loader__ring {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: qgc-loader-spin 1.65s linear infinite;
}

.qgc-loader__ring--green {
  inset: 4%;
  border-top-color: #147a50;
  border-right-color: #147a50;
  transform: rotate(20deg);
}

.qgc-loader__ring--red {
  inset: 12%;
  border-bottom-color: #c73d45;
  border-left-color: #c73d45;
  animation-direction: reverse;
  animation-duration: 1.35s;
}

.qgc-loader__dots {
  position: absolute;
  bottom: -32px;
  z-index: 4;
  display: flex;
  gap: 5px;
}

.qgc-loader__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #147a50;
  animation: qgc-loader-pulse 1.15s ease-in-out infinite alternate;
}

.qgc-loader__dots span:nth-child(2) {
  background: #c73d45;
  animation-delay: 160ms;
}

.qgc-loader__dots span:nth-child(3) {
  background: #af7a18;
  animation-delay: 320ms;
}

@keyframes qgc-loader-spin {
  to { transform: rotate(380deg); }
}

@keyframes qgc-loader-pulse {
  from { opacity: 0.45; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .qgc-loader__ring,
  .qgc-loader__dots span {
    animation-duration: 4s;
  }
}

/* Product catalog CTA: same disc-to-pill interaction with brand-gold resting text. */
#core-product-families {
  padding-top: 2.25rem !important;
}

@media (max-width: 767px) {
  #core-product-families {
    padding-top: 2rem !important;
  }
}

@media (max-width: 1023px) {
  button,
  [role="button"],
  a[data-slot="button"] {
    min-height: 44px !important;
  }

  #header button[aria-label="فتح القائمة الرئيسية"],
  #header button[aria-label="إغلاق القائمة الرئيسية"] {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #header button[aria-label="بحث"],
  .qgc-mobile-menu-dialog button[aria-label="بحث"] {
    width: 44px !important;
    min-width: 44px !important;
  }

  #header input[type="search"],
  .qgc-mobile-menu-dialog input[type="search"] {
    padding-left: 3rem !important;
  }

  .qgc-mobile-menu-dialog a[href] {
    min-height: 44px;
  }

  .qgc-mobile-menu-close {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--qgc-gold-dark, #96671c);
    background: var(--qgc-off-white, #f7f7f5);
    border: 1px solid rgba(150, 103, 28, 0.38);
    cursor: pointer;
    transition: color 220ms ease, background-color 220ms ease,
      border-color 220ms ease;
  }

  .qgc-mobile-menu-close span {
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-1px);
  }

  .qgc-mobile-menu-close:hover,
  .qgc-mobile-menu-close:focus-visible {
    color: var(--qgc-off-white, #f7f7f5);
    background: var(--qgc-gold-dark, #96671c);
    border-color: var(--qgc-gold-dark, #96671c);
  }

  #need-a-document form > input {
    min-width: 0 !important;
  }
}

@media (max-width: 639px) {
  .qgc-product-footer-actions {
    width: 100% !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .qgc-product-footer-actions > a,
  .qgc-product-footer-actions > a > button {
    width: 100% !important;
  }
}

#core-product-families a.qgc-catalog-morph-action {
  position: relative !important;
  top: 40px;
  isolation: isolate;
  width: 238px !important;
  min-width: 238px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  overflow: hidden;
  direction: ltr;
  color: var(--qgc-gold) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  #core-product-families a.qgc-catalog-morph-action {
    top: 20px;
  }
}

#core-product-families a.qgc-catalog-morph-action::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: auto;
  width: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--qgc-gold) 0%, #b1843d 100%);
  transition: width 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    top 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    right 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    bottom 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    box-shadow 500ms ease;
}

#core-product-families .qgc-catalog-morph-label {
  position: absolute;
  z-index: 2;
  left: 4px;
  direction: rtl;
  white-space: nowrap;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--qgc-gold);
  transform: translateX(0);
  transition: color 400ms ease,
    transform 620ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

#core-product-families .qgc-catalog-morph-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 14px;
  width: 26px !important;
  height: 16px !important;
  fill: none;
  stroke: var(--qgc-off-white);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate3d(0, -50%, 0);
  transition: transform 620ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

#core-product-families a.qgc-catalog-morph-action:hover,
#core-product-families a.qgc-catalog-morph-action:focus-visible {
  color: var(--qgc-off-white) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#core-product-families a.qgc-catalog-morph-action:hover::before,
#core-product-families a.qgc-catalog-morph-action:focus-visible::before {
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  box-shadow: 0 16px 34px rgba(5, 5, 6, 0.2),
    inset 0 1px 0 rgba(247, 247, 245, 0.18);
}

#core-product-families a.qgc-catalog-morph-action:hover .qgc-catalog-morph-label,
#core-product-families a.qgc-catalog-morph-action:focus-visible .qgc-catalog-morph-label {
  color: var(--qgc-off-white);
  transform: translateX(50px);
}

#core-product-families a.qgc-catalog-morph-action:hover .qgc-catalog-morph-arrow,
#core-product-families a.qgc-catalog-morph-action:focus-visible .qgc-catalog-morph-arrow {
  transform: translate3d(-184px, -50%, 0);
}

@media (max-width: 359px) {
  #core-product-families a.qgc-catalog-morph-action {
    width: 238px !important;
    min-width: 238px !important;
  }

  #core-product-families a.qgc-catalog-morph-action:hover .qgc-catalog-morph-arrow,
  #core-product-families a.qgc-catalog-morph-action:focus-visible .qgc-catalog-morph-arrow {
    transform: translate3d(-184px, -50%, 0);
  }
}

/* About page story: original QGC facility image on the left, full copy on the right. */
#our-story .qgc-our-story-image {
  object-position: center center !important;
  filter: none !important;
}

#our-story .qgc-our-story-heading {
  margin-bottom: 2rem !important;
}

@media (min-width: 1024px) {
  #our-story .qgc-our-story-layout {
    direction: ltr;
  }

  #our-story .qgc-our-story-media {
    order: 1;
    direction: rtl;
  }

  #our-story .qgc-our-story-copy {
    order: 2;
    direction: rtl;
    text-align: right;
  }
}

.site {
  color: var(--color-foreground, var(--foreground));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1 1 auto;
}

/* =========================
   SITE CHROME / LAYOUT
   ========================= */
.container,
.content-container,
.header-container,
.footer-container {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.site-main {
  background-color: var(--color-background, var(--background));
  min-height: 60vh;
  padding: 2rem 0;
}

.content-layout {
  display: grid;
  gap: 2rem;
}

.content-layout--with-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .content-layout--with-sidebar {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.content-layout--split {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .content-layout--split {
    flex-direction: row;
  }

  .content-layout--split > .content-area {
    flex: 1 1 auto;
  }
}

.posts-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site-header {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border-bottom: 1px solid var(--color-border, var(--border));
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.site-title a {
  color: var(--color-foreground, var(--foreground));
  text-decoration: none;
}

.site-title a:hover {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.site-description {
  color: var(--color-muted-foreground, var(--muted-foreground));
  font-size: 0.875rem;
  margin: 0;
}

.main-navigation {
  display: flex;
  align-items: center;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  color: var(--color-primary-foreground, var(--primary-foreground));
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.5rem;
  cursor: pointer;
}

.menu-toggle:hover {
  background-color: color-mix(in srgb, var(--color-primary, var(--primary, var(--color-primary-500))) 90%, transparent);
}

.menu-icon {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.menu-icon span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: currentColor;
}

.primary-menu,
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-menu {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }

  .primary-menu {
    display: flex;
  }
}

.primary-menu a,
.footer-menu a,
.menu-link {
  color: var(--color-foreground, var(--foreground));
  text-decoration: none;
  font-weight: 500;
}

.primary-menu a:hover,
.footer-menu a:hover,
.menu-link:hover {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.site-footer {
  background-color: var(--color-foreground, var(--foreground));
  color: var(--color-background, var(--background));
  padding: 2rem 0;
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--color-background, var(--background)) 20%, transparent);
  padding-top: 1.5rem;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .footer-info {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-footer a {
  color: var(--color-background, var(--background));
}

.site-footer a:hover {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.page-header,
.post-header {
  background-color: var(--color-muted, var(--muted));
  border-bottom: 1px solid var(--color-border, var(--border));
  padding: 1.5rem;
}

.page-title,
.post-title {
  color: var(--color-foreground, var(--foreground));
  margin: 0 0 0.75rem;
}

.page-header .page-title,
.post-header .post-title {
  font-size: 2rem;
  font-weight: 700;
}

.archive-description,
.post-meta {
  color: var(--color-muted-foreground, var(--muted-foreground));
  font-size: 0.875rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

article.post-card,
article.single-post,
article.page,
section.error-404 {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, var(--radius, 0.5rem));
  /*overflow: hidden;*/
}

article.post-card:hover {
  border-color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.post-card-body,
.page-content,
.post-content {
  padding: 1.5rem;
}

.post-thumbnail img,
.page-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

article.post-card .post-thumbnail img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Primary button — .btn on <button>, submit inputs, or <a> CTAs */
.btn,
.wp-element-button,
.search-submit,
.comment-form .form-submit input[type="submit"],
.comment-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--color-primary, var(--primary));
  color: var(--color-primary-foreground, var(--primary-foreground));
  border: 1px solid transparent;
  border-radius: var(--radius-md, calc(var(--radius, 0.5rem) - 2px));
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  outline: none;
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.btn:hover,
.btn:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.search-submit:hover,
.comment-form .form-submit input[type="submit"]:hover,
.comment-form input[type="submit"]:hover {
  background-color: var(--color-foreground, var(--foreground));
  color: var(--color-background, var(--background));
  text-decoration: none;
}

.btn:focus-visible,
.wp-element-button:focus-visible,
.search-submit:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ring, var(--ring)) 50%, transparent);
}

.btn.read-more,
a.read-more.btn {
  display: inline-flex;
  width: 100%;
  margin-top: 0.75rem;
  padding: 1.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-widest, 0.1em);
  text-transform: uppercase;
}

.related-posts {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, var(--radius, 0.5rem));
}

.related-posts-grid {
  margin-top: 1rem;
}

.search-form-wrap {
  max-width: 28rem;
  margin: 1rem auto 0;
}

.page-links-title {
  font-weight: 600;
  margin-right: 0.5rem;
}

.product-details {
  margin-top: 2rem;
}

.no-results,
section.error-404 {
  padding: 2rem;
  text-align: center;
}

.no-results {
  background-color: var(--color-muted, var(--muted));
}

.post-footer,
.page-links {
  border-top: 1px solid var(--color-border, var(--border));
  background-color: var(--color-muted, var(--muted));
  padding: 1rem 1.5rem;
}

.post-navigation,
.product-navigation {
  margin-top: 2rem;
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, var(--radius, 0.5rem));
  overflow: hidden;
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
}

.post-navigation .nav-links,
.product-navigation .nav-links {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .post-navigation .nav-links,
  .product-navigation .nav-links {
    flex-direction: row;
  }
}

.nav-previous,
.nav-next {
  flex: 1 1 auto;
  padding: 1.5rem;
}

.nav-previous {
  background-color: var(--color-muted, var(--muted));
}

.nav-next {
  background-color: color-mix(in srgb, var(--color-secondary, var(--secondary, var(--color-secondary-500))) 15%, transparent);
}

.nav-subtitle {
  display: block;
  font-size: 0.875rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
  margin-bottom: 0.25rem;
}

.nav-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-foreground, var(--foreground));
}

.nav-previous a,
.nav-next a,
.post-navigation a,
.product-navigation a {
  color: inherit;
  text-decoration: none;
}

.nav-previous a:hover .nav-title,
.nav-next a:hover .nav-title {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.author-bio,
.product-summary-card,
.comments-shell {
  margin-top: 2rem;
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, var(--radius, 0.5rem));
  padding: 1.5rem;
}

.author-bio {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.author-avatar img {
  border-radius: 9999px;
  border: 2px solid var(--color-border, var(--border));
}

.post-featured-text,
.product-featured-text {
  margin-top: 1rem;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--color-secondary, var(--secondary, var(--color-secondary-500))) 15%, transparent);
  border-left: 4px solid var(--color-secondary, var(--secondary, var(--color-secondary-500)));
  border-radius: var(--radius-md, 0.375rem);
}

.post-type-badge {
  display: inline-block;
  background-color: color-mix(in srgb, var(--color-primary, var(--primary, var(--color-primary-500))) 12%, transparent);
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.product-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .product-layout {
    flex-direction: row;
  }

  .product-images {
    flex: 1 1 28rem;
    max-width: 28rem;
  }

  .product-summary {
    flex: 1 1 auto;
  }
}

.widget-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.widget-panel {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, var(--radius, 0.5rem));
  padding: 1.5rem;
}

.widget-list a {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
  text-decoration: none;
}

.widget-list a:hover {
  color: color-mix(in srgb, var(--color-primary, var(--primary, var(--color-primary-500))) 80%, transparent);
}

.widget-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border, var(--border));
}

.widget-list li:last-child {
  border-bottom: 0;
}

.widget-count {
  font-size: 0.75rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
  background-color: var(--color-muted, var(--muted));
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm, 0.25rem);
}

.empty-page-container {
  min-height: calc(100vh - 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
}

.empty-page-content {
  text-align: left;
  max-width: 48rem;
  margin: 0 auto;
}

.empty-page-heading {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--color-foreground, var(--foreground));
  margin: 0 0 1.5rem;
  line-height: 1.15;
}

.empty-page-text {
  font-size: 1.25rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
  line-height: 1.4;
  margin: 0;
}

.comment-body {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, var(--radius, 0.5rem));
  overflow: hidden;
}

.comment-body .comment-meta {
  padding: 1rem;
  background-color: var(--color-muted, var(--muted));
  border-bottom: 1px solid var(--color-border, var(--border));
}

.comment-author.vcard {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.comment-author-info {
  flex: 1 1 auto;
  min-width: 0;
}

.comment-body .comment-content {
  padding: 1rem;
}

.comment-author-avatar img {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 2px solid var(--color-border, var(--border));
}

.comment-author-info .fn {
  font-weight: 700;
  color: var(--color-foreground, var(--foreground));
}

.comment-awaiting-moderation {
  display: block;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: color-mix(in srgb, var(--color-warning, var(--warning)) 15%, transparent);
  border: 1px solid var(--color-warning, var(--warning));
  border-radius: var(--radius-md, 0.375rem);
  color: var(--color-foreground, var(--foreground));
  font-size: 0.875rem;
}

.comment-body .reply {
  padding: 1rem;
  background-color: var(--color-muted, var(--muted));
  border-top: 1px solid var(--color-border, var(--border));
}

.reply-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  color: var(--color-primary-foreground, var(--primary-foreground));
  border-radius: var(--radius-md, 0.375rem);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.reply-link:hover {
  background-color: color-mix(in srgb, var(--color-primary, var(--primary, var(--color-primary-500))) 90%, transparent);
}

.comments-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border, var(--border));
}

.comments-title .post-title-highlight {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.no-comments {
  background-color: var(--color-muted, var(--muted));
  border-left: 4px solid var(--color-border, var(--border));
  padding: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}

.comment-form-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, var(--border));
}

.comment-reply-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

/* :is(.prose, .card-content, .page-content, .post-content, .entry-content,
      .comment-content, .woocommerce-product-details__short-description,
      .woocommerce-Tabs-panel, .wp-block-post-content) */

/* =========================
   WooCommerce color overrides
   (colors only, with !important)
   ========================= */
/* 1) WooCommerce colors applied on components below (no :root var definitions) */

/* 2) Buttons — dual body-class support */
.wvc-woocommerce a.button,
.wvc-woocommerce button.button,
.wvc-woocommerce input.button,
.wvc-woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--color-secondary, var(--secondary, var(--color-secondary-500))) !important;
  color: var(--color-secondary-foreground, var(--secondary-foreground)) !important;
}

.wvc-woocommerce a.button:hover,
.wvc-woocommerce button.button:hover,
.wvc-woocommerce input.button:hover,
.wvc-woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: color-mix(in srgb, var(--color-secondary, var(--secondary, var(--color-secondary-500))) 90%, transparent) !important;
  color: var(--color-secondary-foreground, var(--secondary-foreground)) !important;
}

/* Primary buttons */
.wvc-woocommerce a.button.alt,
.wvc-woocommerce button.button.alt,
.wvc-woocommerce input.button.alt,
.wvc-woocommerce #respond input#submit.alt,
.wvc-woocommerce #add_payment_method .wc-proceed-to-checkout a.checkout-button,
.wvc-woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wvc-woocommerce-checkout .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce #add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--color-primary, var(--primary, var(--color-primary-500))) !important;
  color: var(--color-primary-foreground, var(--color-primary-foreground, var(--primary-foreground))) !important;
}

.wvc-woocommerce a.button.alt:hover,
.wvc-woocommerce button.button.alt:hover,
.wvc-woocommerce input.button.alt:hover,
.wvc-woocommerce #respond input#submit.alt:hover,
.wvc-woocommerce #add_payment_method .wc-proceed-to-checkout a.checkout-button:hover,
.wvc-woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.wvc-woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #add_payment_method .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: color-mix(in srgb, var(--color-primary, var(--primary, var(--color-primary-500))) 90%, transparent) !important;
  color: var(--color-primary-foreground, var(--color-primary-foreground, var(--primary-foreground))) !important;
}

/* WooCommerce block cart submit button (Tailwind-like primary button) */
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained,
.woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,
.woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0;
  background-color: var(--color-primary, var(--primary, var(--color-primary-500))) !important;
  color: var(--color-primary-foreground, var(--color-primary-foreground, var(--primary-foreground))) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.25rem !important;
  text-decoration: none !important;
  transition: background-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease !important;
}

.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:hover,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:hover,
.woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:hover,
.woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:hover {
  background-color: color-mix(in srgb, var(--color-primary, var(--primary, var(--color-primary-500))) 90%, transparent) !important;
  color: var(--color-primary-foreground, var(--color-primary-foreground, var(--primary-foreground))) !important;
}

.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:focus-visible,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:focus-visible,
.woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:focus-visible,
.woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--color-card, var(--card, var(--color-background, var(--background)))), 0 0 0 4px var(--color-primary, var(--primary, var(--color-primary-500))) !important;
}

.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:disabled,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained[aria-disabled="true"],
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:disabled,
.wvc-woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained[aria-disabled="true"],
.woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:disabled,
.woocommerce .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained[aria-disabled="true"],
.woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:disabled,
.woocommerce .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained[aria-disabled="true"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Disabled buttons */
.wvc-woocommerce a.button:disabled,
.wvc-woocommerce button.button:disabled,
.wvc-woocommerce input.button:disabled,
.wvc-woocommerce #respond input#submit:disabled,
.wvc-woocommerce a.button.disabled,
.wvc-woocommerce button.button.disabled,
.wvc-woocommerce input.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled {
  background-color: var(--color-secondary, var(--secondary, var(--color-secondary-500))) !important;
  color: var(--color-secondary-foreground, var(--secondary-foreground)) !important;
}

/* 3) Notices */
.wvc-woocommerce-message,
.wvc-woocommerce-info,
.wvc-woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background)))) !important;
  color: var(--color-foreground, var(--foreground)) !important;
}

.wvc-woocommerce-message,
.woocommerce-message { border-top-color: var(--color-success, var(--success)) !important; }
.wvc-woocommerce-info,
.woocommerce-info { border-top-color: var(--color-info, var(--info)) !important; }
.wvc-woocommerce-error,
.woocommerce-error { border-top-color: var(--color-destructive, var(--destructive, var(--color-error, var(--error)))) !important; }

.wvc-woocommerce-message::before,
.woocommerce-message::before { color: var(--color-success, var(--success)) !important; }
.wvc-woocommerce-info::before,
.woocommerce-info::before { color: var(--color-info, var(--info)) !important; }
.wvc-woocommerce-error::before,
.woocommerce-error::before { color: var(--color-destructive, var(--destructive, var(--color-error, var(--error)))) !important; }

.wvc-woocommerce-warning,
.woocommerce-warning {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background)))) !important;
  color: var(--color-card-foreground, var(--card-foreground, var(--color-foreground, var(--foreground)))) !important;
  border-top-color: var(--color-warning, var(--warning)) !important;
}
.wvc-woocommerce-warning::before,
.woocommerce-warning::before {
  color: var(--color-warning, var(--warning)) !important;
}



/* 4) Sale badge */
.wvc-woocommerce span.onsale,
.woocommerce span.onsale {
  background-color: var(--color-accent, var(--accent)) !important;
  color: var(--color-accent-foreground, var(--accent-foreground)) !important;
}

/* 5) Remove link */
.wvc-woocommerce a.remove,
.woocommerce a.remove {
  color: var(--color-destructive, var(--destructive, var(--color-error, var(--error)))) !important;
}
.wvc-woocommerce a.remove:hover,
.woocommerce a.remove:hover {
  background-color: var(--color-destructive-foreground, var(--destructive-foreground)) !important;
  color: var(--color-card, var(--card, var(--color-background, var(--background)))) !important;
}

/* 6) Product price */
.wvc-woocommerce div.product p.price,
.wvc-woocommerce div.product span.price,
.wvc-woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--color-accent, var(--accent)) !important;
}

/* 7) Store notice */
.wvc-woocommerce-store-notice,
.wvc-woocommerce p.demo_store,
.woocommerce-store-notice,
.woocommerce p.demo_store {
  background-color: var(--color-primary, var(--primary, var(--color-primary-500))) !important;
  color: var(--color-primary-foreground, var(--color-primary-foreground, var(--primary-foreground))) !important;
}
.wvc-woocommerce-store-notice a,
.wvc-woocommerce p.demo_store a,
.woocommerce-store-notice a,
.woocommerce p.demo_store a {
  color: var(--color-primary-foreground, var(--color-primary-foreground, var(--primary-foreground))) !important;
}

/* 8) Checkout payment box */
.wvc-woocommerce-checkout #payment div.payment_box,
.wvc-woocommerce #add_payment_method #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box,
.woocommerce #add_payment_method #payment div.payment_box {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background)))) !important;
  color: var(--color-foreground, var(--foreground)) !important;
}
.wvc-woocommerce-checkout #payment div.payment_box::before,
.wvc-woocommerce #add_payment_method #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce #add_payment_method #payment div.payment_box::before {
  border-bottom-color: var(--color-card, var(--card, var(--color-background, var(--background)))) !important;
}

/* 9) WooCommerce block text inputs */
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-text-input input[type="password"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-textarea {
  color: var(--color-foreground, var(--foreground)) !important;
  background-color: var(--color-background, var(--background)) !important;
  border-color: var(--color-input, var(--input, var(--color-border, var(--border)))) !important;
}

.wc-block-components-form .wc-block-components-text-input input[type="email"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="number"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="password"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="text"]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type="url"]::placeholder,
.wc-block-components-text-input input[type="email"]::placeholder,
.wc-block-components-text-input input[type="number"]::placeholder,
.wc-block-components-text-input input[type="password"]::placeholder,
.wc-block-components-text-input input[type="tel"]::placeholder,
.wc-block-components-text-input input[type="text"]::placeholder,
.wc-block-components-text-input input[type="url"]::placeholder,
.wc-block-components-textarea::placeholder {
  color: var(--color-muted-foreground, var(--muted-foreground)) !important;
}

.wc-block-components-form .wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="number"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="password"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="url"]:focus,
.wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-text-input input[type="number"]:focus,
.wc-block-components-text-input input[type="password"]:focus,
.wc-block-components-text-input input[type="tel"]:focus,
.wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-text-input input[type="url"]:focus,
.wc-block-components-textarea:focus {
  border-color: var(--color-ring, var(--color-primary, var(--primary, var(--color-primary-500)))) !important;
  box-shadow: 0 0 0 1px var(--color-ring, var(--color-primary, var(--primary, var(--color-primary-500)))) !important;
  outline: none !important;
}

.wc-blocks-components-select__select {
  color: var(--color-foreground, var(--foreground)) !important;
  background-color: var(--color-background, var(--background)) !important;
  border-color: var(--color-input, var(--input, var(--color-border, var(--border)))) !important;
}

.wc-blocks-components-select__select:focus {
  border-color: var(--color-ring, var(--color-primary, var(--primary, var(--color-primary-500)))) !important;
  box-shadow: 0 0 0 1px var(--color-ring, var(--color-primary, var(--primary, var(--color-primary-500)))) !important;
  outline: none !important;
}

.wc-block-components-radio-control__input {
  color: var(--color-primary, var(--primary, var(--color-primary-500))) !important;
  background-color: var(--color-background, var(--background)) !important;
  border-color: var(--color-input, var(--input, var(--color-border, var(--border)))) !important;
  accent-color: var(--color-primary, var(--primary, var(--color-primary-500))) !important;
  padding: 0 !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
}

.wc-block-components-radio-control__input:focus {
  border-color: var(--color-ring, var(--color-primary, var(--primary, var(--color-primary-500)))) !important;
  box-shadow: 0 0 0 1px var(--color-ring, var(--color-primary, var(--primary, var(--color-primary-500)))) !important;
  outline: none !important;
}

.wc-block-components-radio-control__input:checked {
  border-color: var(--color-primary, var(--primary, var(--color-primary-500))) !important;
  background-color: var(--color-background, var(--background)) !important;
}

.wc-block-components-checkbox__input,
.wc-block-components-checkbox input[type="checkbox"] {
  color: var(--color-primary, var(--primary, var(--color-primary-500))) !important;
  background-color: var(--color-background, var(--background)) !important;
  border-color: var(--color-input, var(--input, var(--color-border, var(--border)))) !important;
  accent-color: var(--color-primary, var(--primary, var(--color-primary-500))) !important;
  padding: 0 !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  line-height: 1 !important;
  border-radius: var(--radius-sm, 0.25rem) !important;
}

.wc-block-components-checkbox__input:focus,
.wc-block-components-checkbox input[type="checkbox"]:focus {
  border-color: var(--color-ring, var(--color-primary, var(--primary, var(--color-primary-500)))) !important;
  box-shadow: 0 0 0 1px var(--color-ring, var(--color-primary, var(--primary, var(--color-primary-500)))) !important;
  outline: none !important;
}

/* =========================
   WooCommerce layout polish
   ========================= */
.wvc-woocommerce ul.products,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wvc-woocommerce ul.products li.product,
.woocommerce ul.products li.product {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.wvc-woocommerce ul.products li.product img,
.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  display: block;
}

.wvc-woocommerce .woocommerce-result-count,
.wvc-woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  color: var(--color-muted-foreground, var(--muted-foreground));
  margin-bottom: 1rem;
}

.wvc-woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
  color: var(--color-foreground, var(--foreground));
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.375rem 0.75rem;
}

.wvc-woocommerce .woocommerce-pagination ul,
.woocommerce .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.wvc-woocommerce .woocommerce-pagination .page-numbers,
.woocommerce .woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border, var(--border));
  color: var(--color-foreground, var(--foreground));
  text-decoration: none;
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
}

.wvc-woocommerce .woocommerce-pagination .page-numbers.current,
.wvc-woocommerce .woocommerce-pagination .page-numbers:hover,
.woocommerce .woocommerce-pagination .page-numbers.current,
.woocommerce .woocommerce-pagination .page-numbers:hover {
  background-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  border-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  color: var(--color-primary-foreground, var(--color-primary-foreground, var(--primary-foreground)));
}

.wvc-woocommerce div.product .summary,
.woocommerce div.product .summary {
  color: var(--color-foreground, var(--foreground));
}

.wvc-woocommerce div.product form.cart .quantity .qty,
.woocommerce div.product form.cart .quantity .qty {
  color: var(--color-foreground, var(--foreground));
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.375rem 0.5rem;
  width: 4rem;
}

.wvc-woocommerce table.variations,
.woocommerce table.variations {
  width: 100%;
  margin-bottom: 1rem;
}

.wvc-woocommerce table.variations select,
.woocommerce table.variations select {
  width: 100%;
  color: var(--color-foreground, var(--foreground));
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.375rem 0.75rem;
}

.wvc-woocommerce .woocommerce-tabs,
.woocommerce .woocommerce-tabs {
  margin-top: 2rem;
}

.wvc-woocommerce .woocommerce-tabs ul.tabs,
.woocommerce .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border-bottom: 1px solid var(--color-border, var(--border));
}

.wvc-woocommerce .woocommerce-tabs ul.tabs li a,
.woocommerce .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
  text-decoration: none;
}

.wvc-woocommerce .woocommerce-tabs ul.tabs li.active a,
.wvc-woocommerce .woocommerce-tabs ul.tabs li a:hover,
.woocommerce .woocommerce-tabs ul.tabs li.active a,
.woocommerce .woocommerce-tabs ul.tabs li a:hover {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.wvc-woocommerce .woocommerce-Tabs-panel,
.woocommerce .woocommerce-Tabs-panel {
  padding-top: 0.5rem;
}

.wvc-woocommerce .related.products,
.wvc-woocommerce .upsells.products,
.woocommerce .related.products,
.woocommerce .upsells.products {
  margin-top: 2.5rem;
}

.wvc-woocommerce table.shop_table,
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-foreground, var(--foreground));
}

.wvc-woocommerce table.shop_table th,
.wvc-woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--color-border, var(--border));
  padding: 0.75rem;
  text-align: left;
}

.wvc-woocommerce .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .cart_totals {
  background-color: var(--color-muted, var(--muted));
  padding: 1rem;
  border: 1px solid var(--color-border, var(--border));
}

.wvc-woocommerce .woocommerce-MyAccount-navigation ul,
.woocommerce .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 1px solid var(--color-sidebar-border, var(--sidebar-border, var(--color-border, var(--border))));
  background-color: var(--color-sidebar, var(--sidebar, var(--color-card, var(--card))));
}

.wvc-woocommerce .woocommerce-MyAccount-navigation li a,
.woocommerce .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--color-sidebar-foreground, var(--sidebar-foreground, var(--color-foreground, var(--foreground))));
  text-decoration: none;
  border-bottom: 1px solid var(--color-sidebar-border, var(--sidebar-border, var(--color-border, var(--border))));
}

.wvc-woocommerce .woocommerce-MyAccount-navigation li.is-active a,
.wvc-woocommerce .woocommerce-MyAccount-navigation li a:hover,
.woocommerce .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce .woocommerce-MyAccount-navigation li a:hover {
  background-color: var(--color-sidebar-accent, var(--sidebar-accent, var(--color-muted, var(--muted))));
  color: var(--color-sidebar-primary, var(--sidebar-primary, var(--color-primary, var(--primary))));
}


.wvc-woocommerce .woocommerce-form-login,
.wvc-woocommerce .woocommerce-form-register,
.woocommerce .woocommerce-form-login,
.woocommerce .woocommerce-form-register {
  max-width: 28rem;
}

.wvc-woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
  color: var(--color-muted-foreground, var(--muted-foreground));
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.wvc-woocommerce .woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
  text-decoration: none;
}

.wvc-woocommerce .star-rating,
.woocommerce .star-rating {
  color: var(--color-accent, var(--accent));
}

.wvc-woocommerce .widget_shopping_cart .mini_cart_item,
.woocommerce .widget_shopping_cart .mini_cart_item {
  color: var(--color-foreground, var(--foreground));
}

.checkout.woocommerce-checkout {
  grid-template-columns: auto;
}

wrapper[data-processed="true"] {
  display: none !important;
}

/* =========================
   1. HEADINGS (h1-h6)
   ========================= */
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) h1 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.25rem;
  margin-top: 0;
  margin-bottom: 1rem;
  display: block;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) h2 {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  display: block;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) h2:first-child,
h2:first-child {
  margin-top: 0;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) h3 {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  display: block;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) h4 {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  display: block;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) h5 {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  display: block;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) h6 {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* =========================
   2. PARAGRAPHS
   ========================= */
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.625;
}

/* =========================
   3. LISTS
   ========================= */
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) ul {
  list-style: disc;
  list-style-type: disc;
  list-style-image: none;
  padding-left: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) ul li {
  display: list-item;
  list-style: disc;
  list-style-type: disc;
  list-style-position: outside;
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
  padding-left: 0.25rem;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) ul li::marker {
  color: inherit;
  font-size: 1em;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) ol li {
  display: list-item;
  list-style-type: decimal;
  list-style-position: outside;
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
  padding-left: 0.25rem;
}

/* =========================
   4. TEXT FORMATTING
   ========================= */
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) strong,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) b,
strong {
  font-weight: 700;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) em,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) i,
em {
  font-style: italic;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) mark {
  background-color: color-mix(in srgb, var(--color-accent, var(--accent)) 25%, transparent);
  color: inherit;
  padding: 0.1em 0.2em;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) del {
  text-decoration: line-through;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) ins {
  text-decoration: underline;
  background-color: color-mix(in srgb, var(--color-success, var(--success)) 15%, transparent);
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) small {
  font-size: 0.875em;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) sub,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* =========================
   5. LINKS
   ========================= */
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) a:not(.btn):not(.wp-element-button):not(.read-more):not(.search-submit) {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) a:not(.btn):not(.wp-element-button):not(.read-more):not(.search-submit):hover {
  color: color-mix(in srgb, var(--color-primary, var(--primary, var(--color-primary-500))) 90%, transparent);
}

/* =========================
   6. IMAGES / MEDIA / TABLES / CODE
   ========================= */
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) img,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) video,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) iframe,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) embed,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) object {
  max-width: 100%;
  height: auto;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) figure {
  margin: 1.5rem 0;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) figcaption {
  color: var(--color-muted-foreground, var(--muted-foreground));
  font-size: 0.875rem;
  margin-top: 0.5rem;
  text-align: center;
}

.wp-block-embed__wrapper,
.wp-has-aspect-ratio .wp-block-embed__wrapper {
  position: relative;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  color: var(--color-foreground, var(--foreground));
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) th,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) td,
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--color-border, var(--border));
  padding: 0.625rem 0.75rem;
  text-align: left;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) thead th,
.wp-block-table thead th {
  background-color: var(--color-muted, var(--muted));
  font-weight: 600;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) code,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) kbd,
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) samp {
  font-family: var(--font-mono, var(--font-family-mono, monospace));
  font-size: 0.875em;
  background-color: var(--color-muted, var(--muted));
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm, 0.25rem);
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) pre {
  font-family: var(--font-mono, var(--font-family-mono, monospace));
  font-size: 0.875rem;
  background-color: var(--color-muted, var(--muted));
  color: var(--color-foreground, var(--foreground));
  padding: 1rem;
  overflow-x: auto;
  border-radius: var(--radius-md, 0.375rem);
  margin: 1.5rem 0;
  border: 1px solid var(--color-border, var(--border));
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) pre code {
  background: transparent;
  padding: 0;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) dl {
  margin: 1rem 0;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) dt {
  font-weight: 600;
  margin-top: 0.75rem;
}

:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) dd {
  margin-left: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

/* Alignments */
.alignnone {
  margin: 5px 20px 5px 0;
}

.aligncenter {
  display: block;
  margin: 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 5px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 5px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 5px 20px;
}

a img.alignnone {
  margin: 5px 20px 5px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 5px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  max-width: min(100%, 72rem);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.wp-caption {
  background: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 5px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 5px 0;
}

.wp-caption.alignright {
  margin: 5px 0 5px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  max-width: 98.5%;
  padding: 0;
  margin: 0;
}

.wp-caption p.wp-caption-text,
.wp-caption-text,
.gallery-caption {
  color: var(--color-muted-foreground, var(--muted-foreground));
  font-size: 0.8125rem;
  line-height: 1.4;
  padding: 0 4px 5px;
  margin: 0.35rem 0 0;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

.gallery-item {
  margin: 0;
  text-align: center;
}

.gallery-icon img {
  max-width: 100%;
  height: auto;
  display: block;
}

.bypostauthor > .comment-body {
  border-left: 3px solid var(--color-primary, var(--primary, var(--color-primary-500)));
  padding-left: 0.75rem;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border-radius: var(--radius-sm, 0.25rem);
  box-shadow: var(--shadow-sm);
  clip: auto !important;
  clip-path: none;
  color: var(--color-foreground, var(--foreground));
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  height: auto;
  left: 0.5rem;
  line-height: normal;
  padding: 0.75rem 1rem;
  text-decoration: none;
  top: 0.5rem;
  width: auto;
  z-index: 100000;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  background: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border, var(--border));
}

/* =========================
   7. BLOCKQUOTE
   ========================= */
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) blockquote {
  margin: 1.5rem 0 1.5rem 1.5rem;
  padding-left: 1rem;
  border-left: 4px solid var(--color-border, var(--border));
  font-style: italic;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

/* =========================
   8. HORIZONTAL RULE
   ========================= */
:is(.prose, .card-content, .page-content, .post-content, .entry-content, .comment-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .wp-block-post-content) hr {
  border: 0;
  border-top: 1px solid var(--color-border, var(--border));
  margin: 2rem 0;
}

/* =========================
   9. FORMS (WP + plugins)
   ========================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select {
  color: var(--color-foreground, var(--foreground));
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.5rem 0.75rem;
  font: inherit;
  line-height: 1.5;
  max-width: 100%;
  transition: border-color 150ms, box-shadow 150ms;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500))))));
  box-shadow: 0 0 0 1px var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500))))));
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  width: 1rem;
  height: 1rem;
}

label {
  color: var(--color-foreground, var(--foreground));
}

fieldset {
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  padding: 1rem;
  margin: 0 0 1rem;
}

legend {
  padding: 0 0.35rem;
  font-weight: 600;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.search-form label {
  flex: 1 1 auto;
  min-width: 10rem;
}

.search-field {
  width: 100%;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
}

.required {
  color: var(--color-destructive, var(--destructive, var(--color-error, var(--error))));
}

.error,
.wpcf7-not-valid-tip,
.gform_validation_errors,
.wpforms-error-container {
  color: var(--color-destructive, var(--destructive, var(--color-error, var(--error))));
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.wpcf7-not-valid,
.gfield_error input,
.wpforms-error {
  border-color: var(--color-destructive, var(--destructive, var(--color-error, var(--error)))) !important;
}

.wpcf7-form input[type="submit"],
.gform_button,
.wpforms-submit {
  background-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  color: var(--color-primary-foreground, var(--color-primary-foreground, var(--primary-foreground)));
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover,
.gform_button:hover,
.wpforms-submit:hover {
  background-color: color-mix(in srgb, var(--color-primary, var(--primary, var(--color-primary-500))) 90%, transparent);
}

.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select,
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select,
.wpforms-form input,
.wpforms-form textarea,
.wpforms-form select {
  border-color: var(--color-border, var(--border));
  color: var(--color-foreground, var(--foreground));
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus,
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus,
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
  border-color: var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500))))));
  box-shadow: 0 0 0 1px var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500))))));
  outline: none;
}

/* =========================
   10. GUTENBERG BLOCKS
   ========================= */
.wp-block-group,
.wp-block-columns {
  margin: 1.5rem 0;
}

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.wp-block-column {
  flex: 1 1 14rem;
  min-width: 0;
}

.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--color-border, var(--border));
  margin: 2rem auto;
  width: 100%;
}

.wp-block-separator.is-style-wide {
  width: 100%;
}

.wp-block-separator.is-style-dots {
  border: 0;
  text-align: center;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.wp-block-spacer {
  clear: both;
}

.wp-block-quote {
  margin: 1.5rem 0 1.5rem 1.5rem;
  padding-left: 1rem;
  border-left: 4px solid var(--color-border, var(--border));
  font-style: italic;
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.wp-block-pullquote {
  border-top: 4px solid var(--color-border, var(--border));
  border-bottom: 4px solid var(--color-border, var(--border));
  margin: 2rem 0;
  padding: 1.5rem;
  text-align: center;
  color: var(--color-foreground, var(--foreground));
}

.wp-block-verse,
.wp-block-preformatted {
  font-family: var(--font-mono, var(--font-family-mono, monospace));
  white-space: pre-wrap;
  background-color: var(--color-muted, var(--muted));
  padding: 1rem;
  border-radius: var(--radius-md, 0.375rem);
}

.wp-block-code {
  background-color: var(--color-muted, var(--muted));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  padding: 1rem;
  overflow-x: auto;
}

.wp-block-image {
  margin: 1.5rem 0;
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

.wp-block-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  padding: 1.5rem;
  color: #fff;
  background-color: var(--color-foreground, var(--foreground));
}

.wp-block-media-text {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

@media (min-width: 600px) {
  .wp-block-media-text {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.wp-block-video video,
.wp-block-audio audio {
  width: 100%;
  max-width: 100%;
}

.wp-block-file a:not(.wp-block-file__button) {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.wp-block-file__button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary, var(--primary));
  color: var(--color-primary-foreground, var(--primary-foreground)) !important;
  border: 1px solid transparent;
  border-radius: var(--radius-md, calc(var(--radius, 0.5rem) - 2px));
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.5s ease, color 0.5s ease;
}

.wp-block-file__button:hover,
.wp-block-button__link:hover {
  background-color: var(--color-foreground, var(--foreground));
  color: var(--color-background, var(--background)) !important;
}

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-primary, var(--primary, var(--color-primary-500))) !important;
  border-color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.wp-block-details {
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.wp-block-details summary {
  cursor: pointer;
  font-weight: 600;
}

.wp-block-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.wp-block-query {
  margin: 1.5rem 0;
}

.wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.wp-block-post-title {
  margin: 0 0 0.5rem;
}

.wp-block-post-title a {
  color: var(--color-foreground, var(--foreground));
  text-decoration: none;
}

.wp-block-post-title a:hover {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.wp-block-post-excerpt {
  color: var(--color-muted-foreground, var(--muted-foreground));
}

.wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.wp-block-tag-cloud a,
.tagcloud a {
  display: inline-block;
  margin: 0.2rem;
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
  text-decoration: none;
}

/* =========================
   11. COMMENTS / PAGINATION / NAV
   ========================= */
.comments-area {
  color: var(--color-foreground, var(--foreground));
  box-shadow: var(--shadow-sm);
}

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

.comment-list .comment,
.comment-list .pingback,
.comment-list .trackback {
  margin-bottom: 1.5rem;
}

.comment-meta {
  color: var(--color-muted-foreground, var(--muted-foreground));
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.comment-content {
  color: var(--color-foreground, var(--foreground));
}

.comment-content a {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

.reply a,
.comment-reply-link {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
  font-size: 0.875rem;
  text-decoration: none;
}

.nav-links,
.pagination,
.posts-navigation,
.post-navigation,
.pagination-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1.5rem 0;
}

.page-numbers,
.nav-previous a,
.nav-next a,
.post-navigation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border, var(--border));
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  text-decoration: none;
  border-radius: var(--radius-md, 0.375rem);
}

.page-numbers.current,
.page-numbers:hover,
.nav-previous a:hover,
.nav-next a:hover,
.post-navigation a:hover {
  background-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  border-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  color: var(--color-primary-foreground, var(--color-primary-foreground, var(--primary-foreground)));
}

.breadcrumb,
.yoast-breadcrumb,
.rank-math-breadcrumb {
  color: var(--color-muted-foreground, var(--muted-foreground));
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.breadcrumb a,
.yoast-breadcrumb a,
.rank-math-breadcrumb a {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
  text-decoration: none;
}

/* =========================
   12. WIDGETS
   ========================= */
.widget {
  margin-bottom: 1.5rem;
  color: var(--color-sidebar-foreground, var(--sidebar-foreground, var(--color-foreground, var(--foreground))));
  background-color: var(--color-sidebar, var(--sidebar, var(--color-card, var(--card))));
  border: 1px solid var(--color-sidebar-border, var(--sidebar-border, var(--color-border, var(--border))));
  padding: 1rem;
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: var(--shadow-sm);
}

.widget-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--color-sidebar-foreground, var(--sidebar-foreground, var(--color-foreground, var(--foreground))));
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget ul li {
  margin-bottom: 0.5rem;
}

.widget a {
  color: var(--color-sidebar-primary, var(--sidebar-primary, var(--color-primary, var(--primary))));
  text-decoration: none;
}

.widget a:hover {
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}


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

.calendar_wrap th,
.calendar_wrap td {
  text-align: center;
  padding: 0.35rem;
  border: 1px solid var(--color-border, var(--border));
}

/* =========================
   13. RADIX / DATA-SLOT
   ========================= */
[data-slot="input"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  transition: border-color 150ms, box-shadow 150ms;
}

[data-slot="input"]::placeholder {
  color: var(--color-muted-foreground, var(--muted-foreground));
}

[data-slot="input"]:focus-visible {
  border-color: var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500))))));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500)))))) 20%, transparent);
  outline: none;
}

[data-slot="input"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-slot="textarea"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  transition: border-color 150ms, box-shadow 150ms;
}

[data-slot="textarea"]::placeholder {
  color: var(--color-muted-foreground, var(--muted-foreground));
}

[data-slot="textarea"]:focus-visible {
  border-color: var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500))))));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500)))))) 20%, transparent);
  outline: none;
}

[data-slot="textarea"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-slot="checkbox"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1.5px solid var(--color-border, var(--border));
  border-radius: var(--radius-sm, 0.25rem);
  transition: background-color 150ms, border-color 150ms;
}

[data-slot="checkbox"][data-state="checked"],
[data-slot="checkbox"][data-state="indeterminate"] {
  background-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  border-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  color: var(--color-primary-foreground, var(--primary-foreground, #fff));
}

[data-slot="checkbox"]:focus-visible {
  border-color: var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500))))));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500)))))) 20%, transparent);
  outline: none;
}

[data-slot="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-slot="radio-group-item"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1.5px solid var(--color-border, var(--border));
  border-radius: 9999px;
  transition: border-color 150ms;
}

[data-slot="radio-group-item"][data-state="checked"] {
  border-color: var(--color-primary, var(--primary, var(--color-primary-500)));
  color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

[data-slot="radio-group-item"]:focus-visible {
  border-color: var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500))))));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500)))))) 20%, transparent);
  outline: none;
}

[data-slot="radio-group-item"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-slot="switch"] {
  background-color: var(--color-muted, var(--muted));
  border: 1px solid transparent;
  border-radius: 9999px;
  transition: background-color 150ms;
}

[data-slot="switch"][data-state="checked"] {
  background-color: var(--color-primary, var(--primary, var(--color-primary-500)));
}

[data-slot="switch"]:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500)))))) 20%, transparent);
  outline: none;
}

[data-slot="switch"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-slot="label"] {
  color: var(--color-foreground, var(--foreground));
}

[data-slot="select-trigger"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  color: var(--color-foreground, var(--foreground));
  transition: border-color 150ms, box-shadow 150ms;
}

[data-slot="select-trigger"]:focus-visible {
  border-color: var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500))))));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring, var(--ring, var(--color-primary, var(--color-primary, var(--primary, var(--color-primary-500)))))) 20%, transparent);
}

[data-slot="select-trigger"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-slot="select-content"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 12%, transparent);
  z-index: 50;
}

[data-slot="select-item"] {
  background-color: transparent;
  color: var(--color-foreground, var(--foreground));
  border-radius: var(--radius-sm, 0.25rem);
}

[data-slot="select-item"]:hover,
[data-slot="select-item"][data-highlighted] {
  background-color: var(--color-muted, var(--muted, #f3f4f6));
  color: var(--color-foreground, var(--foreground));
  outline: none;
}

[data-slot="select-item"][data-state="checked"] {
  font-weight: 500;
}

[data-slot="select-label"] {
  color: var(--color-muted-foreground, var(--muted-foreground));
}

[data-slot="select-separator"] {
  background-color: var(--color-border, var(--border));
}

[data-slot="select-scroll-up-button"],
[data-slot="select-scroll-down-button"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-muted, var(--muted));
}

[data-slot="dropdown-menu-content"],
[data-slot="dropdown-menu-sub-content"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 12%, transparent);
  z-index: 50;
}

[data-slot="dropdown-menu-item"],
[data-slot="dropdown-menu-checkbox-item"],
[data-slot="dropdown-menu-radio-item"] {
  background-color: transparent;
  color: var(--color-foreground, var(--foreground));
  border-radius: var(--radius-sm, 0.25rem);
}

[data-slot="dropdown-menu-item"]:hover,
[data-slot="dropdown-menu-item"][data-highlighted],
[data-slot="dropdown-menu-checkbox-item"]:hover,
[data-slot="dropdown-menu-checkbox-item"][data-highlighted],
[data-slot="dropdown-menu-radio-item"]:hover,
[data-slot="dropdown-menu-radio-item"][data-highlighted] {
  background-color: var(--color-muted, var(--muted, #f3f4f6));
  color: var(--color-foreground, var(--foreground));
  outline: none;
}

[data-slot="dropdown-menu-label"] {
  color: var(--color-muted-foreground, var(--muted-foreground));
}

[data-slot="dropdown-menu-separator"] {
  background-color: var(--color-border, var(--border));
}

[data-slot="popover-content"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 12%, transparent);
  z-index: 50;
}

[data-slot="context-menu-content"],
[data-slot="context-menu-sub-content"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 12%, transparent);
  z-index: 50;
}

[data-slot="context-menu-item"]:hover,
[data-slot="context-menu-item"][data-highlighted] {
  background-color: var(--color-muted, var(--muted, #f3f4f6));
  color: var(--color-foreground, var(--foreground));
  outline: none;
}

[data-slot="menubar-content"],
[data-slot="menubar-sub-content"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 12%, transparent);
  z-index: 50;
}

[data-slot="menubar-item"]:hover,
[data-slot="menubar-item"][data-highlighted] {
  background-color: var(--color-muted, var(--muted, #f3f4f6));
  color: var(--color-foreground, var(--foreground));
  outline: none;
}

[data-slot="tooltip-content"] {
  background-color: var(--color-foreground, var(--foreground));
  color: var(--color-background, var(--background));
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 8%, transparent);
  z-index: 50;
}

[data-slot="dialog-overlay"],
[data-slot="alert-dialog-overlay"] {
  background-color: color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 50%, transparent);
  z-index: 50;
}

[data-slot="dialog-content"],
[data-slot="alert-dialog-content"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, var(--radius, 0.5rem));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 18%, transparent);
  z-index: 50;
}

[data-slot="sheet-overlay"] {
  background-color: color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 50%, transparent);
  z-index: 50;
}

[data-slot="sheet-content"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border-color: var(--color-border, var(--border));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 18%, transparent);
  z-index: 50;
}

[data-slot="hover-card-content"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-foreground, var(--foreground, #111)) 12%, transparent);
  z-index: 50;
}

[data-slot="command"] {
  background-color: var(--color-card, var(--card, var(--color-background, var(--background))));
  color: var(--color-foreground, var(--foreground));
}

[data-slot="command-input"] {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border, var(--border));
}

[data-slot="command-item"]:hover,
[data-slot="command-item"][data-selected="true"] {
  background-color: var(--color-muted, var(--muted, #f3f4f6));
  color: var(--color-foreground, var(--foreground));
}

/* =========================================================
   QGC local header and full-width products mega menu
   ========================================================= */
#header {
  --qgc-header-height: 108px;
  isolation: isolate;
  overflow: visible !important;
  z-index: 1000 !important;
  background: transparent !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background-color 220ms ease, box-shadow 220ms ease,
    border-color 220ms ease;
}

#header:hover,
#header:has([data-slot="navigation-menu-trigger"][data-state="open"]),
#header:has([data-slot="navigation-menu-content"]) {
  background: #fff !important;
  border-color: rgba(15, 70, 55, 0.12) !important;
  box-shadow: 0 10px 30px rgba(9, 30, 25, 0.1) !important;
}

body.home #header {
  position: absolute !important;
  inset: 0 0 auto 0;
}

#header > div {
  min-height: 108px !important;
  height: 108px !important;
  align-items: flex-start !important;
  padding-top: 24px !important;
  box-sizing: border-box;
  overflow: visible !important;
}

#header img[alt="Logo"],
#header img[data-qgc-header-logo] {
  display: block;
  width: 154px !important;
  height: auto !important;
  max-height: 82px !important;
  object-fit: contain;
  transform: translateY(-16px);
}

#header [data-qgc-header-logo-stack="true"] {
  display: grid !important;
  place-items: start;
  overflow: visible !important;
  isolation: isolate;
}

#header [data-qgc-header-logo-stack="true"] img[data-qgc-header-logo] {
  grid-area: 1 / 1;
  transition: opacity 360ms cubic-bezier(0.22, 0.72, 0.28, 1) !important;
}

#header img[data-qgc-header-logo="transparent"] {
  opacity: 0;
  filter: drop-shadow(0 2px 5px rgba(5, 5, 6, 0.3));
}

#header img[data-qgc-header-logo="surface"] {
  opacity: 1;
}

body.home #header img[data-qgc-header-logo="transparent"] {
  opacity: 1;
}

body.home #header img[data-qgc-header-logo="surface"] {
  opacity: 0;
}

body.home #header:hover img[data-qgc-header-logo="transparent"],
body.home #header[data-qgc-away-from-top="true"] img[data-qgc-header-logo="transparent"],
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) img[data-qgc-header-logo="transparent"] {
  opacity: 0;
}

body.home #header:hover img[data-qgc-header-logo="surface"],
body.home #header[data-qgc-away-from-top="true"] img[data-qgc-header-logo="surface"],
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) img[data-qgc-header-logo="surface"] {
  opacity: 1;
}

#header [data-slot="navigation-menu"],
#header [data-slot="navigation-menu"] > div,
#header [data-slot="navigation-menu-list"],
#header [data-slot="navigation-menu-item"] {
  position: static !important;
}

#header [data-slot="navigation-menu-trigger"] > svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px;
  margin-right: 8px !important;
  margin-left: 0 !important;
}

#header [data-slot="navigation-menu-list"] {
  direction: rtl !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
}

#header [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] {
  flex: 0 0 auto !important;
  min-width: max-content;
}

#header [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a,
#header [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button {
  min-width: max-content;
  padding-inline: clamp(9px, 0.65vw, 12px) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  flex-wrap: nowrap !important;
}

body.home #header [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a,
body.home #header [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

body.home #header [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a:hover,
body.home #header [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button:hover,
body.home #header [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button[data-state="open"] {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body.home #header:hover [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a,
body.home #header:hover [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button,
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a,
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button,
body.home #header:has([data-slot="navigation-menu-content"]) [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a,
body.home #header:has([data-slot="navigation-menu-content"]) [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button {
  color: #17372e !important;
  text-shadow: none !important;
}

body.home #header:hover [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a:hover,
body.home #header:hover [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button:hover,
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) [data-slot="navigation-menu-trigger"][data-state="open"] {
  color: #0b7a58 !important;
  background: rgba(11, 122, 88, 0.08) !important;
}

body.home #header input[type="search"] {
  color: #fff !important;
  background: rgba(38, 35, 30, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

body.home #header input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.78) !important;
}

body.home #header:hover input[type="search"],
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) input[type="search"],
body.home #header:has([data-slot="navigation-menu-content"]) input[type="search"] {
  color: #17372e !important;
  background: #f3f7f5 !important;
  border-color: rgba(15, 70, 55, 0.18) !important;
}

body.home #header:hover input[type="search"]::placeholder,
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) input[type="search"]::placeholder,
body.home #header:has([data-slot="navigation-menu-content"]) input[type="search"]::placeholder {
  color: #667a73 !important;
}

/* Gypsemna-inspired panel: full width, ending near the middle of the viewport. */
#header [data-slot="navigation-menu-content"] {
  position: fixed !important;
  top: calc(var(--qgc-header-height) - 1px) !important;
  right: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: clamp(330px, calc(50vh - var(--qgc-header-height)), 460px) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  transform: none !important;
}

/* Hide the fixed panel immediately while its React state closes on scroll. */
#header.qgc-mega-scroll-closing [data-slot="navigation-menu-content"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#header [data-slot="navigation-menu-content"] > div {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  color: #1f2937 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 55px rgba(9, 30, 25, 0.22) !important;
  overflow: hidden !important;
}

#header [data-slot="navigation-menu-content"] > div > div:first-child:not(.grid) {
  display: none !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid {
  width: min(1600px, 100%);
  height: 100% !important;
  min-height: 0 !important;
  margin-inline: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  overflow: hidden;
}

#header [data-slot="navigation-menu-content"] > div > .grid > * {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(1) {
  grid-column: span 2 / span 2 !important;
  background: #fff !important;
  border: 0 !important;
  padding: 26px 32px !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(1) .space-y-1 > * {
  padding: 10px 12px !important;
  font-size: 16px !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) {
  grid-column: span 4 / span 4 !important;
  background: #fff !important;
  border: 0 !important;
  padding: 26px 32px !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) {
  grid-column: span 6 / span 6 !important;
  background: #fff !important;
  border: 0 !important;
  padding: 24px 42px !important;
}

/* Remove the card-like explanatory blocks; the reference menu is deliberately sparse. */
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(1) > .mt-4,
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) > a,
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) p,
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) .space-y-3 > div:first-child,
#header [data-slot="navigation-menu-content"] > div > :last-child:not(.grid) {
  display: none !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  max-height: none !important;
  overflow: visible !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] > a {
  padding: 9px 12px !important;
  background: transparent !important;
  color: #273b35 !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] > a:hover,
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] > a.bg-muted,
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] > a.qgc-product-active {
  color: #0b7a58 !important;
  background: transparent !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] > a.bg-muted::before {
  content: none !important;
  display: none !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] span:first-child {
  font-size: 13px !important;
  font-weight: 500 !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] span[class*="text-[10px]"] {
  display: none !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) .space-y-3 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) .aspect-4\/3 {
  width: min(700px, 100%);
  height: min(350px, calc(100% - 42px));
  aspect-ratio: auto !important;
  border: 0 !important;
  padding: 8px !important;
  background: #fff !important;
  box-sizing: border-box;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) h4 {
  font-size: 16px !important;
  color: #0b7a58 !important;
}

#header [data-slot="navigation-menu-content"] a,
#header [data-slot="navigation-menu-content"] button,
#header [data-slot="navigation-menu-content"] p,
#header [data-slot="navigation-menu-content"] span,
#header [data-slot="navigation-menu-content"] h4 {
  text-shadow: none !important;
}

#header [data-slot="navigation-menu-content"] img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
  transition: opacity 180ms ease-out !important;
  will-change: opacity;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) img {
  object-fit: cover !important;
  object-position: center bottom !important;
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  transition: none !important;
}

@media (max-width: 1280px) and (min-width: 1024px) {
  #header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(1) {
    grid-column: span 3 / span 3 !important;
  }

  #header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) {
    grid-column: span 4 / span 4 !important;
  }

  #header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) {
    grid-column: span 5 / span 5 !important;
  }
}

/* Stable mega-menu layout restored after the internal redesign rollback. */

@media (max-height: 800px) and (min-width: 1024px) {
  #header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"]:has(> a:nth-child(7)) {
    gap: 0 !important;
  }

  #header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"]:has(> a:nth-child(7)) > a {
    min-height: 27px !important;
    padding: 3px 10px !important;
  }

  #header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"]:has(> a:nth-child(7)) span:first-child {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
}

/* Full-screen local video hero. */
#hero {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
}

#hero .qgc-hero-media {
  opacity: 1 !important;
  transform: none !important;
}

#hero .qgc-hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

#hero .qgc-hero-video + div {
  background: linear-gradient(90deg, rgba(7, 29, 25, 0.14), rgba(7, 29, 25, 0.48)) !important;
}

#hero .qgc-hero-video + div + div {
  background: transparent !important;
}

#hero .qgc-hero-inner {
  padding-top: 118px !important;
  padding-bottom: 42px !important;
}

#hero .qgc-hero-layout {
  display: block !important;
}

#hero .qgc-hero-copy {
  width: min(660px, 100%);
  gap: 1rem !important;
  transform: translateY(clamp(48px, 7vh, 62px));
}

#hero .qgc-hero-copy > :nth-child(-n + 3) {
  position: relative;
  top: -24px;
}

#hero .qgc-hero-copy > div:first-child {
  transform: translateY(18px) !important;
}

#hero .qgc-hero-copy h1 {
  font-size: clamp(2.6rem, 5.4vw, 5.1rem) !important;
}

#hero .qgc-hero-badge-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: #d2a342;
  background: rgba(10, 92, 69, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 0 0 1px rgba(210, 163, 66, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(7px);
}

#hero .qgc-hero-badge-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: qgc-morph-arrow-idle-spin 8s ease-in-out 1.1s infinite both;
}

#hero .qgc-hero-primary-action .qgc-hero-speed-arrow {
  width: 38px !important;
  height: 20px !important;
  flex: 0 0 38px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
}

#hero .qgc-hero-primary-action .qgc-arrow-main {
  stroke-width: 1.8;
}

#hero .qgc-hero-primary-action .qgc-arrow-trail {
  stroke-width: 1.25;
  stroke: #e0bc6b;
  opacity: 0.34;
}

#hero .qgc-hero-primary-action .qgc-arrow-trail-2 {
  opacity: 0.18;
}

#hero .qgc-hero-primary-action:hover .qgc-arrow-main {
  animation: none;
}

#hero .qgc-hero-primary-action:hover .qgc-arrow-trail {
  animation: none;
}

#hero a.qgc-hero-primary-action {
  --qgc-magnetic-x: 0px;
  --qgc-magnetic-y: 0px;
  position: relative !important;
  isolation: isolate;
  min-width: 224px;
  min-height: 56px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px !important;
  padding: 0 24px !important;
  overflow: hidden;
  color: #fff !important;
  background: rgba(6, 67, 51, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 34px rgba(2, 29, 22, 0.22) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: none !important;
  transition: border-color 480ms ease, box-shadow 480ms ease,
    background-color 480ms ease !important;
}

#hero a.qgc-hero-primary-action::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1px;
  background: linear-gradient(110deg, #0a654c 0%, #0b7d5b 52%, #0a654c 100%);
  transform: translateY(-104%);
  transform-origin: top center;
  transition: transform 560ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

#hero a.qgc-hero-primary-action::after {
  content: none;
  display: none;
}

#hero a.qgc-hero-primary-action:hover,
#hero a.qgc-hero-primary-action:focus-visible {
  color: #fff !important;
  border-color: rgba(224, 188, 107, 0.65) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 18px 42px rgba(2, 29, 22, 0.3) !important;
}

#hero a.qgc-hero-primary-action:hover::before,
#hero a.qgc-hero-primary-action:focus-visible::before {
  transform: translateY(0);
}

#hero a.qgc-hero-primary-action.qgc-magnetic-active {
  transform: none !important;
}

#hero .qgc-hero-primary-action .qgc-hero-cta-label {
  position: relative;
  z-index: 2;
  font-weight: 700;
  letter-spacing: 0.01em;
}

@keyframes qgc-hero-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(-5px); }
}

@keyframes qgc-hero-arrow-trail {
  0%, 100% { opacity: 0.22; transform: translateX(0); }
  45% { opacity: 0.72; transform: translateX(4px); }
}

#hero .qgc-hero-side,
#hero .qgc-hero-meta,
#hero .qgc-hero-secondary-action {
  display: none !important;
}

@media (max-width: 1023px) {
  #header {
    --qgc-header-height: 88px;
  }

  #header > div {
    min-height: 88px !important;
    height: 88px !important;
    padding-top: 10px !important;
  }

  #header img[alt="Logo"],
  #header img[data-qgc-header-logo] {
    width: 112px !important;
    max-height: 66px !important;
    transform: translateY(-8px);
  }

  body.home #header {
    position: absolute !important;
  }

  #hero .qgc-hero-inner {
    padding-top: 96px !important;
    padding-bottom: 28px !important;
  }

  #hero .qgc-hero-copy h1 {
    font-size: clamp(2.25rem, 11vw, 4rem) !important;
  }

  #hero .qgc-hero-copy {
    transform: translateY(32px);
  }

  #hero .qgc-hero-copy > :nth-child(-n + 3) {
    top: -16px;
  }
}

@media (max-height: 680px) and (min-width: 1024px) {
  #hero .qgc-hero-copy {
    transform: translateY(28px);
  }
}

/* =========================================================
   QGC client identity palette — 2026 demo
   ========================================================= */
html:root,
html:root.light,
html:root body.light {
  --qgc-black: #050506;
  --qgc-gold: #96671c;
  --qgc-warm-gold: #967546;
  --qgc-light-gray: #9e9c9c;
  --qgc-dark-gray: #262527;
  --qgc-green: #3b7c56;
  --qgc-red: #c51e2e;
  --qgc-off-white: #f7f7f5;

  --background: var(--qgc-off-white);
  --foreground: var(--qgc-black);
  --card: #ffffff;
  --card-foreground: var(--qgc-black);
  --popover: #ffffff;
  --popover-foreground: var(--qgc-black);
  --primary: var(--qgc-gold);
  --primary-foreground: var(--qgc-off-white);
  --secondary: var(--qgc-dark-gray);
  --secondary-foreground: var(--qgc-off-white);
  --muted: #ecebe8;
  --muted-foreground: #686667;
  --accent: #eee8df;
  --accent-foreground: var(--qgc-black);
  --destructive: var(--qgc-red);
  --destructive-foreground: var(--qgc-off-white);
  --border: #d8d5cf;
  --input: #cbc7c0;
  --ring: var(--qgc-warm-gold);
  --success: var(--qgc-green);
  --error: var(--qgc-red);
  --warning: var(--qgc-warm-gold);
  --chart-1: var(--qgc-gold);
  --chart-2: var(--qgc-green);
  --chart-3: var(--qgc-red);
  --chart-4: var(--qgc-warm-gold);
  --chart-5: var(--qgc-light-gray);
  --sidebar: #efeeeb;
  --sidebar-foreground: var(--qgc-black);
  --sidebar-primary: var(--qgc-gold);
  --sidebar-primary-foreground: var(--qgc-off-white);
  --sidebar-accent: #e5dfd6;
  --sidebar-accent-foreground: var(--qgc-black);
  --sidebar-border: #d3cfc8;
  --sidebar-ring: var(--qgc-warm-gold);
  --color-logo: var(--qgc-black);
}

::selection {
  color: var(--qgc-off-white);
  background: var(--qgc-gold);
}

#qgc-site-loader {
  background: var(--qgc-off-white);
}

.qgc-loader__logo {
  filter: drop-shadow(0 8px 22px rgba(5, 5, 6, 0.14));
}

.qgc-loader__ring--green {
  border-top-color: var(--qgc-green);
  border-right-color: var(--qgc-green);
}

.qgc-loader__ring--red {
  border-bottom-color: var(--qgc-red);
  border-left-color: var(--qgc-red);
}

.qgc-loader__dots span {
  background: var(--qgc-green);
}

.qgc-loader__dots span:nth-child(2) {
  background: var(--qgc-red);
}

.qgc-loader__dots span:nth-child(3) {
  background: var(--qgc-gold);
}

#header:hover,
#header:has([data-slot="navigation-menu-trigger"][data-state="open"]),
#header:has([data-slot="navigation-menu-content"]) {
  background: var(--qgc-off-white) !important;
  border-color: rgba(150, 103, 28, 0.2) !important;
  box-shadow: 0 12px 34px rgba(5, 5, 6, 0.13) !important;
}

body.home #header:hover [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a,
body.home #header:hover [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button,
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a,
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button,
body.home #header:has([data-slot="navigation-menu-content"]) [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a,
body.home #header:has([data-slot="navigation-menu-content"]) [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button {
  color: var(--qgc-black) !important;
}

body.home #header:hover [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a:hover,
body.home #header:hover [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button:hover,
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) [data-slot="navigation-menu-trigger"][data-state="open"] {
  color: var(--qgc-gold) !important;
  background: rgba(150, 103, 28, 0.09) !important;
}

body.home #header:hover input[type="search"],
body.home #header:has([data-slot="navigation-menu-trigger"][data-state="open"]) input[type="search"],
body.home #header:has([data-slot="navigation-menu-content"]) input[type="search"] {
  color: var(--qgc-black) !important;
  background: #ffffff !important;
  border-color: rgba(150, 103, 28, 0.3) !important;
}

#header [data-slot="navigation-menu-content"] > div,
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(1),
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2),
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3),
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) .aspect-4\/3 {
  background: var(--qgc-off-white) !important;
}

#header [data-slot="navigation-menu-content"] > div {
  color: var(--qgc-black) !important;
  box-shadow: 0 24px 55px rgba(5, 5, 6, 0.2) !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] > a {
  color: var(--qgc-dark-gray) !important;
}

#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] > a:hover,
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] > a.bg-muted,
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(2) [class*="max-h"] > a.qgc-product-active,
#header [data-slot="navigation-menu-content"] > div > .grid > :nth-child(3) h4 {
  color: var(--qgc-gold) !important;
}

#hero .qgc-hero-video + div {
  background: linear-gradient(90deg, rgba(5, 5, 6, 0.18), rgba(5, 5, 6, 0.7)) !important;
}

#hero .qgc-hero-badge-icon {
  color: var(--qgc-off-white);
  background: rgba(5, 5, 6, 0.56);
  border-color: rgba(247, 247, 245, 0.88);
  box-shadow: inset 0 0 0 1px rgba(247, 247, 245, 0.12),
    0 8px 22px rgba(5, 5, 6, 0.22);
}

#hero a.qgc-hero-primary-action {
  color: var(--qgc-off-white) !important;
  background: rgba(5, 5, 6, 0.24) !important;
  border-color: rgba(217, 185, 121, 0.72) !important;
  margin-top: -18px !important;
  box-shadow: inset 0 1px 0 rgba(247, 247, 245, 0.12),
    0 16px 38px rgba(5, 5, 6, 0.22) !important;
}

#hero a.qgc-hero-primary-action::before {
  background: linear-gradient(180deg, rgba(150, 117, 70, 0.56) 0%, rgba(150, 103, 28, 0.42) 100%);
}

#hero a.qgc-hero-primary-action:hover,
#hero a.qgc-hero-primary-action:focus-visible {
  color: var(--qgc-off-white) !important;
  border-color: rgba(217, 185, 121, 0.68) !important;
  box-shadow: inset 0 1px 0 rgba(247, 247, 245, 0.16),
    0 14px 30px rgba(5, 5, 6, 0.24) !important;
}

#hero .qgc-hero-primary-action .qgc-arrow-trail {
  stroke: #d9b979;
}

footer {
  border-color: rgba(150, 103, 28, 0.22) !important;
}

footer img[alt="Logo"] {
  width: 38px !important;
  height: auto !important;
  max-height: 24px !important;
  object-fit: contain;
}

/* Brand lockup beside the Saudi-industry statement needs stronger presence. */
footer span[data-wvc-role="logo"] {
  width: auto !important;
  height: 54px !important;
}

footer span[data-wvc-role="logo"] img[alt="Logo"] {
  width: auto !important;
  height: 54px !important;
  max-height: 54px !important;
}

/* Calm top-down gold hover shared with the primary hero action. */
.qgc-calm-hover-action {
  overflow: hidden;
  color: var(--qgc-gold) !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    rgba(150, 117, 70, 0.56) 0%,
    rgba(150, 103, 28, 0.42) 100%
  ) !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 0 !important;
  border-color: var(--qgc-gold) !important;
  transform: none !important;
  transition: background-size 560ms cubic-bezier(0.22, 0.72, 0.28, 1),
    color 480ms ease, border-color 480ms ease, box-shadow 480ms ease !important;
}

.qgc-calm-hover-action:hover,
.qgc-calm-hover-action:focus-visible {
  color: var(--qgc-off-white) !important;
  background-color: transparent !important;
  background-size: 100% 100% !important;
  border-color: rgba(150, 117, 70, 0.78) !important;
  box-shadow: 0 10px 24px rgba(5, 5, 6, 0.16) !important;
  transform: none !important;
}

/* Match each secondary CTA hover fill to its paired primary CTA gold. */
:is(#introduction-to-qgc, #featured-product-platinum-board) .qgc-calm-hover-action {
  background-image: linear-gradient(
    180deg,
    var(--qgc-gold) 0%,
    var(--qgc-gold) 100%
  ) !important;
}

/* Complementary About CTA: a soft off-white layer descending from the top. */
:is(#introduction-to-qgc, #featured-product-platinum-board, #building-solutions) .qgc-light-hover-action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--qgc-off-white) !important;
  background-color: var(--qgc-gold) !important;
  background-image: none !important;
  border: 1px solid var(--qgc-gold) !important;
  transform: none !important;
  transition: color 460ms ease, border-color 460ms ease,
    box-shadow 460ms ease !important;
}

:is(#introduction-to-qgc, #featured-product-platinum-board, #building-solutions) .qgc-light-hover-action::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(247, 247, 245, 1) 0%,
    rgba(255, 255, 255, 0.98) 100%
  );
  transform: translateY(-101%);
  transition: transform 560ms cubic-bezier(0.22, 0.72, 0.28, 1);
  pointer-events: none;
}

:is(#introduction-to-qgc, #featured-product-platinum-board, #building-solutions) .qgc-light-hover-action:hover,
:is(#introduction-to-qgc, #featured-product-platinum-board, #building-solutions) .qgc-light-hover-action:focus-visible {
  color: var(--qgc-gold) !important;
  background-color: var(--qgc-gold) !important;
  border-color: rgba(150, 103, 28, 0.82) !important;
  box-shadow: 0 10px 24px rgba(5, 5, 6, 0.14) !important;
  transform: none !important;
}

:is(#introduction-to-qgc, #featured-product-platinum-board, #building-solutions) .qgc-light-hover-action:hover::before,
:is(#introduction-to-qgc, #featured-product-platinum-board, #building-solutions) .qgc-light-hover-action:focus-visible::before {
  transform: translateY(0);
}

/* Keep the About image clean and give it a restrained, premium hover. */
#introduction-to-qgc .qgc-about-meta-row {
  display: none !important;
}

#introduction-to-qgc .qgc-about-copy-column {
  position: relative;
  top: 0;
  overflow: visible !important;
  clip-path: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

#introduction-to-qgc .qgc-about-copy-column:hover {
  border-color: transparent !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

#introduction-to-qgc .qgc-about-eyebrow {
  position: relative;
  top: -10px;
}

@media (max-width: 767px) {
  #introduction-to-qgc .qgc-about-copy-column {
    top: 0;
  }

  #introduction-to-qgc .qgc-about-eyebrow {
    top: -7px;
  }
}

html.qgc-about-sync-pending #introduction-to-qgc > div > div > div:last-child:not([data-qgc-about-image-reveal="visible"]):not([data-qgc-about-image-reveal="complete"]),
html.qgc-motion-ready #introduction-to-qgc [data-qgc-about-image-reveal="pending"] {
  opacity: 0 !important;
  visibility: hidden;
  transform: translate3d(-110px, 0, 0) !important;
  clip-path: inset(0 12% 0 0 round 2px);
  will-change: opacity, transform, clip-path;
}

html.qgc-motion-ready #introduction-to-qgc [data-qgc-about-image-reveal="visible"] {
  opacity: 1 !important;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
  clip-path: inset(0 0 0 0 round 0);
  transition: opacity 880ms ease,
    transform 1200ms cubic-bezier(0.22, 0.72, 0.28, 1),
    clip-path 1050ms cubic-bezier(0.22, 0.72, 0.28, 1) !important;
  will-change: opacity, transform, clip-path;
}

html.qgc-motion-ready #introduction-to-qgc [data-qgc-about-image-reveal="complete"] {
  opacity: 1 !important;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
  clip-path: none !important;
  will-change: auto;
}

#introduction-to-qgc [data-qgc-typewriter="active"]::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.86em;
  margin-inline-start: 0.14em;
  vertical-align: -0.08em;
  background: var(--qgc-gold);
  border-radius: 2px;
  animation: qgc-about-type-caret 760ms steps(1, end) infinite;
}

@keyframes qgc-about-type-caret {
  0%, 46% {
    opacity: 1;
  }

  47%, 100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.qgc-motion-ready #introduction-to-qgc [data-qgc-about-image-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  #introduction-to-qgc [data-qgc-typewriter]::after {
    content: none !important;
    animation: none !important;
  }
}

@media (max-width: 767px) {
  html.qgc-motion-ready #introduction-to-qgc [data-qgc-about-image-reveal="pending"] {
    transform: translate3d(-56px, 0, 0) !important;
  }
}

#introduction-to-qgc .qgc-about-image-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(5, 5, 6, 0.12);
  transition: box-shadow 700ms cubic-bezier(0.22, 0.72, 0.28, 1),
    transform 700ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

#introduction-to-qgc .qgc-about-image-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    112deg,
    transparent 22%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(217, 185, 121, 0.24) 49%,
    rgba(255, 255, 255, 0.1) 58%,
    transparent 76%
  );
  transform: translateX(-125%);
  transition: transform 900ms cubic-bezier(0.22, 0.72, 0.28, 1);
  pointer-events: none;
}

#introduction-to-qgc .qgc-about-image {
  transform: scale(1);
  transform-origin: 50% 50%;
  filter: grayscale(8%) saturate(0.96) brightness(0.99) !important;
  transition: transform 900ms cubic-bezier(0.22, 0.72, 0.28, 1),
    filter 750ms ease !important;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  #introduction-to-qgc .qgc-about-image-frame:hover .qgc-about-image {
    transform: scale(1.045) translateY(-2px);
    filter: grayscale(0) saturate(1.06) brightness(1.025) contrast(1.015) !important;
  }

  #introduction-to-qgc .qgc-about-image-frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 52px rgba(5, 5, 6, 0.2),
      0 0 0 1px rgba(217, 185, 121, 0.2);
  }

  #introduction-to-qgc .qgc-about-image-frame:hover::after {
    transform: translateX(125%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #introduction-to-qgc .qgc-about-image {
    transition: filter 200ms ease !important;
  }

  #introduction-to-qgc .qgc-about-image-frame,
  #introduction-to-qgc .qgc-about-image-frame::after {
    transition: none !important;
  }
}

@media (max-width: 639px) {
  footer span[data-wvc-role="logo"],
  footer span[data-wvc-role="logo"] img[alt="Logo"] {
    height: 46px !important;
    max-height: 46px !important;
  }
}

/* Hero products CTA concept: separate gold disc morphs into a full pill. */
#hero a.qgc-hero-primary-action {
  width: 214px !important;
  min-width: 214px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  overflow: hidden;
  direction: ltr;
  color: var(--qgc-gold) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#hero a.qgc-hero-primary-action::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: auto;
  width: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--qgc-gold) 0%, #b1843d 100%);
  transform: none;
  transition: width 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    top 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    right 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    bottom 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    box-shadow 500ms ease;
}

#hero .qgc-hero-primary-action .qgc-hero-cta-label {
  position: absolute;
  z-index: 2;
  left: 4px;
  direction: rtl;
  white-space: nowrap;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--qgc-off-white);
  transform: translateX(0);
  transition: color 400ms ease,
    transform 620ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

#hero .qgc-hero-primary-action .qgc-hero-speed-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 14px;
  width: 26px !important;
  height: 16px !important;
  color: var(--qgc-off-white);
  transform: translate3d(0, -50%, 0);
  transition: transform 620ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

#hero .qgc-hero-primary-action .qgc-arrow-main {
  stroke-width: 2.2;
}

#hero .qgc-hero-primary-action .qgc-arrow-trail {
  display: none;
}

#hero .qgc-hero-primary-action .qgc-unified-arrow__rotor,
#core-product-families .qgc-catalog-morph-action .qgc-unified-arrow__rotor,
#building-solutions .qgc-catalog-morph-action .qgc-unified-arrow__rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: qgc-morph-arrow-idle-spin 8s ease-in-out infinite;
}

@keyframes qgc-morph-arrow-idle-spin {
  0%, 22% {
    transform: rotate(0deg);
  }

  78%, 100% {
    transform: rotate(360deg);
  }
}

#hero a.qgc-hero-primary-action:hover,
#hero a.qgc-hero-primary-action:focus-visible {
  color: var(--qgc-off-white) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#hero a.qgc-hero-primary-action:hover::before,
#hero a.qgc-hero-primary-action:focus-visible::before {
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  transform: none;
  box-shadow: 0 16px 34px rgba(5, 5, 6, 0.26),
    inset 0 1px 0 rgba(247, 247, 245, 0.18);
}

#hero a.qgc-hero-primary-action:hover .qgc-hero-cta-label,
#hero a.qgc-hero-primary-action:focus-visible .qgc-hero-cta-label {
  color: var(--qgc-off-white);
  transform: translateX(50px);
}

#hero a.qgc-hero-primary-action:hover .qgc-hero-speed-arrow,
#hero a.qgc-hero-primary-action:focus-visible .qgc-hero-speed-arrow {
  transform: translate3d(-160px, -50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  #hero a.qgc-hero-primary-action::before,
  #hero .qgc-hero-primary-action .qgc-hero-cta-label,
  #hero .qgc-hero-primary-action .qgc-hero-speed-arrow {
    transition-duration: 1ms !important;
  }

  #hero .qgc-hero-primary-action .qgc-unified-arrow__rotor,
  #core-product-families .qgc-catalog-morph-action .qgc-unified-arrow__rotor,
  #building-solutions .qgc-catalog-morph-action .qgc-unified-arrow__rotor {
    animation: none !important;
  }

  #hero .qgc-hero-badge-icon svg {
    animation: none !important;
  }
}

/* Corporate editorial treatment for the About section. */
#introduction-to-qgc .qgc-about-facts {
  display: grid;
  grid-template-columns: 0.72fr 1.25fr 1.35fr;
  margin: 0 0 2.5rem;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--qgc-border);
}

#introduction-to-qgc .qgc-about-fact {
  min-width: 0;
  padding: 0 1.35rem;
  border-inline-start: 1px solid var(--qgc-border);
}

#introduction-to-qgc .qgc-about-fact:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

#introduction-to-qgc .qgc-about-fact strong,
#introduction-to-qgc .qgc-about-fact span {
  display: block;
}

#introduction-to-qgc .qgc-about-fact strong {
  margin-bottom: 0.45rem;
  color: var(--qgc-gold);
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
}

#introduction-to-qgc .qgc-about-fact span {
  color: var(--qgc-dark-gray);
  font-size: 0.82rem;
  line-height: 1.55;
  font-weight: 500;
}

#introduction-to-qgc .qgc-about-image-card {
  position: relative;
  isolation: isolate;
  padding: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

#introduction-to-qgc > div > div > div:last-child > div:first-child::before,
#introduction-to-qgc .qgc-about-image-card::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 1;
  top: 18px;
  right: auto;
  bottom: auto;
  left: -42px;
  width: calc(100% + 18px) !important;
  max-width: none;
  height: calc(100% + 20px) !important;
  box-sizing: border-box;
  background-image: var(
    --qgc-about-decorative-image,
    url("/wp-content/uploads/2026/08/qgc_about_decorative_backdrop.webp")
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left 72%;
  border: 1px solid rgba(150, 103, 28, 0.34);
  box-shadow: 0 20px 46px rgba(38, 37, 39, 0.14);
  pointer-events: none;
  user-select: none;
  transition: transform 720ms cubic-bezier(0.22, 0.72, 0.28, 1),
    border-color 420ms ease,
    box-shadow 620ms ease;
}

#introduction-to-qgc .qgc-about-image-card::after,
#introduction-to-qgc .qgc-about-decorative-backdrop {
  content: none !important;
  display: none !important;
}

#introduction-to-qgc .qgc-about-image-card .qgc-about-image-frame {
  position: relative;
  z-index: 2;
  aspect-ratio: 1122 / 1100 !important;
  border: 1px solid rgba(150, 103, 28, 0.2) !important;
  outline: 0;
  box-shadow: 0 18px 44px rgba(5, 5, 6, 0.13) !important;
  transition: box-shadow 700ms cubic-bezier(0.22, 0.72, 0.28, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  #introduction-to-qgc .qgc-about-image-card:hover::before {
    transform: translate3d(-3px, 3px, 0);
    border-color: rgba(150, 117, 70, 0.54);
    box-shadow: 0 26px 58px rgba(38, 37, 39, 0.17);
  }

  #introduction-to-qgc .qgc-about-image-card:hover .qgc-about-image-frame {
    box-shadow: 0 28px 64px rgba(5, 5, 6, 0.2) !important;
  }
}

@media (max-width: 639px) {
  #introduction-to-qgc > div > div > div:last-child > div:first-child::before,
  #introduction-to-qgc .qgc-about-image-card::before {
    top: 12px;
    left: -20px;
    width: calc(100% + 8px) !important;
    height: calc(100% + 10px) !important;
  }
}

#introduction-to-qgc .qgc-about-image-frame::after {
  content: none !important;
  display: none !important;
}

#introduction-to-qgc .qgc-about-image-frame,
#introduction-to-qgc .qgc-about-image-frame:hover {
  transform: none !important;
}

#introduction-to-qgc .qgc-about-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1) !important;
  filter: none !important;
  transition: transform 700ms cubic-bezier(0.22, 0.72, 0.28, 1) !important;
  will-change: transform;
}

#introduction-to-qgc .qgc-about-video {
  display: block;
  background: #e9e5dc;
}

@media (hover: hover) and (pointer: fine) {
  #introduction-to-qgc .qgc-about-image-frame:hover .qgc-about-image {
    transform: scale(1.018) !important;
    filter: none !important;
  }
}

/* About QGC image: restrained gold frame with open architectural corners. */
#introduction-to-qgc .qgc-about-image-card .qgc-about-image-frame {
  --qgc-about-frame-gold: rgba(184, 130, 38, 0.96);
  --qgc-about-frame-corner: clamp(34px, 8vw, 58px);
  border-color: rgba(184, 130, 38, 0.7) !important;
  box-shadow: 0 14px 34px rgba(24, 21, 16, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

#introduction-to-qgc .qgc-about-image-card .qgc-about-image-frame::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  background:
    linear-gradient(var(--qgc-about-frame-gold), var(--qgc-about-frame-gold)) left top / var(--qgc-about-frame-corner) 1.5px no-repeat,
    linear-gradient(var(--qgc-about-frame-gold), var(--qgc-about-frame-gold)) left top / 1.5px var(--qgc-about-frame-corner) no-repeat,
    linear-gradient(var(--qgc-about-frame-gold), var(--qgc-about-frame-gold)) right top / var(--qgc-about-frame-corner) 1.5px no-repeat,
    linear-gradient(var(--qgc-about-frame-gold), var(--qgc-about-frame-gold)) right top / 1.5px var(--qgc-about-frame-corner) no-repeat,
    linear-gradient(var(--qgc-about-frame-gold), var(--qgc-about-frame-gold)) left bottom / var(--qgc-about-frame-corner) 1.5px no-repeat,
    linear-gradient(var(--qgc-about-frame-gold), var(--qgc-about-frame-gold)) left bottom / 1.5px var(--qgc-about-frame-corner) no-repeat,
    linear-gradient(var(--qgc-about-frame-gold), var(--qgc-about-frame-gold)) right bottom / var(--qgc-about-frame-corner) 1.5px no-repeat,
    linear-gradient(var(--qgc-about-frame-gold), var(--qgc-about-frame-gold)) right bottom / 1.5px var(--qgc-about-frame-corner) no-repeat;
  pointer-events: none;
}

#introduction-to-qgc .qgc-about-image-card .qgc-about-image-frame::after {
  content: "" !important;
  position: absolute;
  z-index: 3;
  inset: clamp(5px, 0.7vw, 8px);
  display: block !important;
  box-sizing: border-box;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: 0 0 0 1px rgba(80, 58, 24, 0.08);
  transform: none !important;
  transition: none !important;
  pointer-events: none;
}

@media (max-width: 639px) {
  #introduction-to-qgc .qgc-about-image-card .qgc-about-image-frame {
    --qgc-about-frame-corner: clamp(30px, 12vw, 44px);
  }

  #introduction-to-qgc .qgc-about-image-card .qgc-about-image-frame::after {
    inset: 5px;
  }
}

#introduction-to-qgc .qgc-about-location {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--qgc-off-white);
  border-top: 1px solid var(--qgc-border);
}

#introduction-to-qgc .qgc-about-location span {
  color: var(--qgc-gold);
  font-size: 0.7rem;
  line-height: 1.4;
  font-weight: 700;
  white-space: nowrap;
}

#introduction-to-qgc .qgc-about-location p {
  margin: 0;
  color: var(--qgc-black);
  font-size: 0.82rem;
  line-height: 1.55;
  font-weight: 600;
}

#introduction-to-qgc .qgc-about-meta-row {
  display: none !important;
}

@media (max-width: 767px) {
  #introduction-to-qgc .qgc-about-facts {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
  }

  #introduction-to-qgc .qgc-about-fact,
  #introduction-to-qgc .qgc-about-fact:first-child {
    padding: 1rem 0;
    border-inline-start: 0;
    border-bottom: 1px solid var(--qgc-border);
  }

  #introduction-to-qgc .qgc-about-fact:last-child {
    border-bottom: 0;
  }

  #introduction-to-qgc .qgc-about-location {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* Systems guide CTA: the same brand-gold disc-to-pill interaction. */
#building-solutions a.qgc-catalog-morph-action {
  position: relative !important;
  top: 40px;
  isolation: isolate;
  width: 294px !important;
  min-width: 294px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  overflow: hidden;
  direction: ltr;
  color: var(--qgc-gold) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  #building-solutions a.qgc-catalog-morph-action {
    top: 20px;
  }
}

#building-solutions a.qgc-catalog-morph-action::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: auto;
  width: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--qgc-gold) 0%, #b1843d 100%);
  transition: width 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    top 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    right 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    bottom 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    box-shadow 500ms ease;
}

#building-solutions .qgc-catalog-morph-label {
  position: absolute;
  z-index: 2;
  left: 4px;
  direction: rtl;
  white-space: nowrap;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--qgc-gold);
  transform: translateX(0);
  transition: color 400ms ease,
    transform 620ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

#building-solutions .qgc-catalog-morph-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 14px;
  width: 26px !important;
  height: 16px !important;
  fill: none;
  stroke: var(--qgc-off-white);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate3d(0, -50%, 0);
  transition: transform 620ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

#building-solutions a.qgc-catalog-morph-action:hover,
#building-solutions a.qgc-catalog-morph-action:focus-visible {
  color: var(--qgc-off-white) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#building-solutions a.qgc-catalog-morph-action:hover::before,
#building-solutions a.qgc-catalog-morph-action:focus-visible::before {
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  box-shadow: 0 16px 34px rgba(5, 5, 6, 0.2),
    inset 0 1px 0 rgba(247, 247, 245, 0.18);
}

#building-solutions a.qgc-catalog-morph-action:hover .qgc-catalog-morph-label,
#building-solutions a.qgc-catalog-morph-action:focus-visible .qgc-catalog-morph-label {
  color: var(--qgc-off-white);
  transform: translateX(50px);
}

#building-solutions a.qgc-catalog-morph-action:hover .qgc-catalog-morph-arrow,
#building-solutions a.qgc-catalog-morph-action:focus-visible .qgc-catalog-morph-arrow {
  transform: translate3d(-240px, -50%, 0);
}

@media (max-width: 399px) {
  #building-solutions a.qgc-catalog-morph-action {
    width: 274px !important;
    min-width: 274px !important;
  }

  #building-solutions .qgc-catalog-morph-label {
    font-size: 1.08rem;
  }

  #building-solutions a.qgc-catalog-morph-action:hover .qgc-catalog-morph-arrow,
  #building-solutions a.qgc-catalog-morph-action:focus-visible .qgc-catalog-morph-arrow {
    transform: translate3d(-220px, -50%, 0);
  }
}

@media (max-width: 359px) {
  #building-solutions a.qgc-catalog-morph-action {
    width: 264px !important;
    min-width: 264px !important;
  }

  #building-solutions .qgc-catalog-morph-label {
    font-size: 1rem;
  }

  #building-solutions a.qgc-catalog-morph-action:hover .qgc-catalog-morph-label,
  #building-solutions a.qgc-catalog-morph-action:focus-visible .qgc-catalog-morph-label {
    transform: translateX(50px);
  }

  #building-solutions a.qgc-catalog-morph-action:hover .qgc-catalog-morph-arrow,
  #building-solutions a.qgc-catalog-morph-action:focus-visible .qgc-catalog-morph-arrow {
    transform: translate3d(-210px, -50%, 0);
  }
}

/* Give product-family imagery more vertical presence without changing card widths. */
#core-product-families article > div[class*="aspect-16/10"] {
  height: 220px !important;
  min-height: 220px;
  aspect-ratio: auto !important;
}

#core-product-families article > div[class*="aspect-16/10"] > img {
  object-position: center center;
}

#footer .qgc-footer-credit {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

#footer .qgc-footer-credit a {
  color: var(--qgc-gold);
  font-weight: 700;
  text-decoration: none;
  transition: color 200ms ease;
}

#footer .qgc-footer-credit a:hover,
#footer .qgc-footer-credit a:focus-visible {
  color: var(--qgc-gold-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#footer .qgc-footer-social-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

#footer .qgc-footer-social-links,
#footer .qgc-footer-policy-links {
  justify-content: center;
}

/* Mirror the desktop footer columns while keeping every Arabic block RTL. */
@media (min-width: 1024px) {
  #footer .qgc-footer-columns {
    direction: ltr;
  }

  #footer .qgc-footer-columns > div {
    direction: rtl;
    text-align: right;
  }
}

/* Keep the featured product's bilingual name readable as one unit. */
#featured-product-platinum-board h2 > span {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  color: var(--qgc-gold) !important;
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
  font-size: 0.78em !important;
  line-height: 1.15;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  vertical-align: baseline;
}

@media (min-width: 1024px) {
  #featured-product-platinum-board div[class*="aspect-4/3"] {
    height: 360px !important;
    aspect-ratio: auto !important;
  }

  #featured-product-platinum-board div[class*="lg:col-span-5"] {
    align-self: start;
    margin-top: 1.25rem;
  }
}

@media (max-width: 639px) {
  #footer .qgc-footer-credit {
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* Mobile interaction safety: comfortable touch targets and wrapped CTA groups. */
@media (max-width: 767px) {
  button,
  [role="button"],
  a[data-slot="button"] {
    min-height: 44px !important;
  }

  #header button[aria-label="فتح القائمة الرئيسية"],
  #header button[aria-label="إغلاق القائمة الرئيسية"] {
    width: 44px !important;
    min-width: 44px !important;
  }

  .qgc-project-support-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .qgc-project-support-actions > a {
    width: 100% !important;
  }
}

@media (max-width: 639px) {
  #core-product-families article > div[class*="aspect-16/10"] {
    height: 210px !important;
    min-height: 210px;
  }
}

/* Direction-aware header: calm exit on scroll down, quick return on scroll up. */
#header[data-qgc-directional-header-ready="true"] {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
    opacity 420ms ease,
    background-color 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease !important;
}

body.home #header[data-qgc-directional-header-ready="true"] {
  position: fixed !important;
  inset: 0 0 auto 0;
}

#header[data-qgc-directional-header-ready="true"][data-qgc-scroll-state="hidden"] {
  transform: translate3d(0, calc(-100% - 10px), 0) !important;
  opacity: 0.98;
  pointer-events: none;
}

#header[data-qgc-directional-header-ready="true"][data-qgc-away-from-top="true"] {
  background: var(--qgc-off-white) !important;
  border-color: rgba(150, 103, 28, 0.18) !important;
  box-shadow: 0 10px 30px rgba(5, 5, 6, 0.12) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.home #header[data-qgc-away-from-top="true"] [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a,
body.home #header[data-qgc-away-from-top="true"] [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button {
  color: var(--qgc-black) !important;
  text-shadow: none !important;
}

body.home #header[data-qgc-away-from-top="true"] [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > a:hover,
body.home #header[data-qgc-away-from-top="true"] [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > button:hover,
body.home #header[data-qgc-away-from-top="true"] [data-slot="navigation-menu-trigger"][data-state="open"] {
  color: var(--qgc-gold) !important;
  background: rgba(150, 103, 28, 0.09) !important;
}

body.home #header[data-qgc-away-from-top="true"] input[type="search"] {
  color: var(--qgc-black) !important;
  background: #fff !important;
  border-color: rgba(150, 103, 28, 0.3) !important;
}

body.home #header[data-qgc-away-from-top="true"] input[type="search"]::placeholder {
  color: #6f7f79 !important;
}

@media (prefers-reduced-motion: reduce) {
  #header[data-qgc-directional-header-ready="true"] {
    transition-duration: 1ms !important;
  }

  #header [data-qgc-header-logo-stack="true"] img[data-qgc-header-logo] {
    transition-duration: 1ms !important;
  }
}

/* Unified directional arrow: crisp industrial linework and restrained motion. */
.qgc-unified-arrow {
  width: 30px !important;
  height: 18px !important;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: none;
  transform: translate3d(0, 0, 0);
  transition: transform 440ms cubic-bezier(0.22, 0.72, 0.28, 1),
    opacity 320ms ease;
}

.qgc-unified-arrow__outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-qgc-arrow-action="compact"] .qgc-unified-arrow {
  width: 20px !important;
  height: 12px !important;
}

#footer [data-qgc-arrow-action] .qgc-unified-arrow {
  opacity: 0;
  transform: translateX(-4px);
}

#footer [data-qgc-arrow-action] {
  justify-content: flex-start !important;
  gap: 0.45rem !important;
}

#footer [data-qgc-arrow-action]:hover .qgc-unified-arrow,
#footer [data-qgc-arrow-action]:focus-visible .qgc-unified-arrow {
  opacity: 1;
  transform: translateX(0);
}

#hero .qgc-hero-primary-action .qgc-unified-arrow,
#core-product-families .qgc-catalog-morph-action .qgc-unified-arrow,
#building-solutions .qgc-catalog-morph-action .qgc-unified-arrow {
  transition-duration: 620ms;
}

#hero .qgc-hero-primary-action .qgc-unified-arrow__outline,
#core-product-families .qgc-catalog-morph-action .qgc-unified-arrow__outline,
#building-solutions .qgc-catalog-morph-action .qgc-unified-arrow__outline {
  stroke: var(--qgc-off-white);
}

@media (prefers-reduced-motion: reduce) {
  .qgc-unified-arrow {
    transition-duration: 1ms !important;
  }
}

/* Site icon motion: staggered inner rotation without disturbing existing hover transforms. */
svg[data-qgc-site-icon-motion="true"] {
  overflow: visible;
}

svg[data-qgc-site-icon-motion="true"] > .qgc-site-icon-rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: qgc-site-icon-idle-spin 10.5s cubic-bezier(0.45, 0, 0.24, 1)
    var(--qgc-site-icon-delay, 0s) infinite both;
}

/* Search and social icons stay still; their controls keep their normal hover feedback. */
#header .lucide-search,
#header .lucide-search > .qgc-site-icon-rotor,
#footer a[aria-label] svg,
#footer a[aria-label] svg > .qgc-site-icon-rotor {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

@keyframes qgc-site-icon-idle-spin {
  0%, 28% {
    transform: rotate(0deg);
  }

  68%, 100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  svg[data-qgc-site-icon-motion="true"] > .qgc-site-icon-rotor {
    animation: none !important;
  }
}

/* Header support CTA: white at rest, brand gold on interaction. */
#header div:has(> a[data-qgc-support-action="true"]) {
  transform: none !important;
  scale: none !important;
  translate: none !important;
}

#header a[data-qgc-support-action="true"] {
  color: var(--qgc-gold) !important;
  background: #fff !important;
  border-color: var(--qgc-gold) !important;
  box-shadow: 0 6px 18px rgba(5, 5, 6, 0.1) !important;
  transform: none !important;
  scale: none !important;
  translate: none !important;
  transition: color 360ms ease,
    background-color 420ms cubic-bezier(0.22, 0.72, 0.28, 1),
    border-color 360ms ease,
    box-shadow 420ms ease !important;
}

#header a[data-qgc-support-action="true"]:hover,
#header a[data-qgc-support-action="true"]:focus-visible {
  color: var(--qgc-off-white) !important;
  background: var(--qgc-gold) !important;
  border-color: var(--qgc-gold) !important;
  box-shadow: 0 10px 24px rgba(150, 103, 28, 0.24) !important;
  transform: none !important;
  scale: none !important;
  translate: none !important;
}

#header a[data-qgc-support-action="true"] svg {
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px;
  overflow: visible;
  transform: scaleX(-1);
  transform-origin: center;
}

#header a[data-qgc-support-action="true"] svg path:last-child {
  transform-box: fill-box;
  transform-origin: 50% 54%;
  animation: qgc-support-phone-ring 3.6s ease-in-out infinite;
  will-change: transform;
}

#header a[data-qgc-support-action="true"] svg path:not(:last-child) {
  transform-box: fill-box;
  transform-origin: bottom left;
  stroke-width: 2.2;
  animation: qgc-support-phone-signal 3.6s ease-in-out infinite both;
  will-change: transform, opacity;
}

#header a[data-qgc-support-action="true"] svg path:first-child {
  animation-delay: 90ms;
}

@keyframes qgc-support-phone-ring {
  0%, 58%, 88%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  61% {
    transform: translate3d(-0.5px, 0, 0) rotate(-15deg);
  }

  64% {
    transform: translate3d(0.5px, 0, 0) rotate(14deg);
  }

  67% {
    transform: translate3d(-0.4px, 0, 0) rotate(-12deg);
  }

  70% {
    transform: translate3d(0.4px, 0, 0) rotate(11deg);
  }

  73% {
    transform: translate3d(-0.3px, 0, 0) rotate(-9deg);
  }

  76% {
    transform: translate3d(0.3px, 0, 0) rotate(8deg);
  }

  80% {
    transform: translate3d(-0.2px, 0, 0) rotate(-5deg);
  }

  84% {
    transform: translate3d(0.2px, 0, 0) rotate(3deg);
  }
}

@keyframes qgc-support-phone-signal {
  0%, 58%, 88%, 100% {
    opacity: 0.42;
    transform: scale(0.84) translate3d(-0.5px, 0.5px, 0);
  }

  63%, 72%, 81% {
    opacity: 1;
    transform: scale(1.12) translate3d(0, 0, 0);
  }

  67%, 76%, 85% {
    opacity: 0.34;
    transform: scale(0.9) translate3d(-0.35px, 0.35px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #header a[data-qgc-support-action="true"] svg path {
    animation: none !important;
  }
}

/* Site-wide motion language: staged, directional reveals without layout shifts. */
html.qgc-motion-ready [data-qgc-reveal] {
  --qgc-reveal-delay: 0ms;
  --qgc-reveal-x: 0px;
  --qgc-reveal-y: 28px;
  --qgc-reveal-scale: 0.985;
  opacity: 0.001;
  transform: translate3d(var(--qgc-reveal-x), var(--qgc-reveal-y), 0)
    scale(var(--qgc-reveal-scale));
  transition-property: opacity, transform;
  transition-duration: 820ms, 980ms;
  transition-timing-function: ease,
    cubic-bezier(0.22, 0.72, 0.28, 1);
  transition-delay: var(--qgc-reveal-delay);
}

html.qgc-motion-ready [data-qgc-reveal="title"] {
  --qgc-reveal-y: 34px;
  --qgc-reveal-scale: 1;
  transition-duration: 760ms, 1040ms;
}

html.qgc-motion-ready [data-qgc-reveal="copy"] {
  --qgc-reveal-y: 22px;
  --qgc-reveal-scale: 1;
}

html.qgc-motion-ready [data-qgc-reveal="action"] {
  --qgc-reveal-y: 18px;
  --qgc-reveal-scale: 0.97;
}

html.qgc-motion-ready [data-qgc-reveal="media"] {
  --qgc-reveal-y: 20px;
  --qgc-reveal-scale: 1.035;
  clip-path: inset(9% 0 9% 0 round 2px);
  transition-property: opacity, transform, clip-path;
  transition-duration: 850ms, 1200ms, 1100ms;
}

html.qgc-motion-ready [data-qgc-reveal].qgc-motion-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  clip-path: inset(0 0 0 0 round 0);
}

html.qgc-motion-ready [data-qgc-hero-enter="true"] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
}

html.qgc-motion-ready.qgc-motion-entered [data-qgc-hero-enter="true"] {
  animation: qgc-hero-content-enter 1050ms cubic-bezier(0.22, 0.72, 0.28, 1)
    var(--qgc-hero-delay, 120ms) both;
}

@keyframes qgc-hero-content-enter {
  0% {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (hover: hover) and (pointer: fine) {
  html.qgc-motion-ready [data-qgc-reveal][data-qgc-motion-card="true"] {
    transition-property: opacity, transform, box-shadow,
      border-color, background-color;
    transition-duration: 820ms, 980ms, 520ms, 420ms, 420ms;
    transition-delay: var(--qgc-reveal-delay), var(--qgc-reveal-delay),
      0ms, 0ms, 0ms;
  }

  [data-qgc-motion-card="true"] {
    transition: box-shadow 520ms ease, border-color 420ms ease,
      background-color 420ms ease;
  }

  [data-qgc-motion-card="true"]:hover {
    border-color: rgba(150, 103, 28, 0.32);
    box-shadow: 0 22px 52px rgba(5, 5, 6, 0.12),
      0 0 0 1px rgba(150, 103, 28, 0.06);
  }
}

@media (max-width: 767px) {
  html.qgc-motion-ready [data-qgc-reveal] {
    --qgc-reveal-x: 0px !important;
    --qgc-reveal-y: 22px;
    transition-property: opacity, transform;
    transition-duration: 680ms, 820ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.qgc-motion-ready [data-qgc-reveal],
  html.qgc-motion-ready [data-qgc-hero-enter="true"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Engineered-systems introduction: a quiet architectural image banner. */
#building-solutions > div > div:first-child {
  position: relative;
  isolation: isolate;
  min-height: clamp(220px, 19vw, 290px);
  align-items: center !important;
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.35rem, 4.5vw, 4.25rem) !important;
  overflow: hidden;
  background-color: var(--qgc-off-white);
  background-image:
    linear-gradient(
      90deg,
      rgba(247, 247, 245, 0.2) 0%,
      rgba(247, 247, 245, 0.56) 48%,
      rgba(247, 247, 245, 0.96) 100%
    ),
    url("/wp-content/uploads/2026/08/qgc_engineered_systems_intro_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px solid rgba(150, 103, 28, 0.26) !important;
  box-shadow: 0 18px 44px rgba(38, 37, 39, 0.1);
}

#building-solutions > div > div:first-child > * {
  position: relative;
  z-index: 1;
}

#building-solutions > div > div:first-child > :first-child {
  top: -24px;
}

#building-solutions > div > div:first-child p {
  color: rgba(38, 37, 39, 0.78) !important;
}

@media (max-width: 767px) {
  #building-solutions > div > div:first-child {
    min-height: 360px;
    padding: 2rem 1.25rem !important;
    background-image:
      linear-gradient(
        90deg,
        rgba(247, 247, 245, 0.76) 0%,
        rgba(247, 247, 245, 0.9) 55%,
        rgba(247, 247, 245, 0.97) 100%
      ),
      url("/wp-content/uploads/2026/08/qgc_engineered_systems_intro_bg.png");
    background-position: 42% center;
  }

  #building-solutions > div > div:first-child > :first-child {
    top: -10px;
  }
}

/* Product-family introduction: a restrained architectural image banner. */
#core-product-families > div > div:first-child {
  position: relative;
  isolation: isolate;
  min-height: clamp(220px, 19vw, 290px);
  align-items: center !important;
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.35rem, 4.5vw, 4.25rem) !important;
  overflow: hidden;
  background-color: var(--qgc-off-white);
  background-image:
    linear-gradient(
      90deg,
      rgba(247, 247, 245, 0.22) 0%,
      rgba(247, 247, 245, 0.58) 48%,
      rgba(247, 247, 245, 0.96) 100%
    ),
    url("/wp-content/uploads/2026/08/qgc_system_families_intro_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px solid rgba(150, 103, 28, 0.26) !important;
  box-shadow: 0 18px 44px rgba(38, 37, 39, 0.1);
}

#core-product-families > div > div:first-child > * {
  position: relative;
  z-index: 1;
}

#core-product-families > div > div:first-child > :first-child {
  top: -38px;
}

#core-product-families > div > div:first-child p {
  max-width: 680px;
  color: rgba(38, 37, 39, 0.78) !important;
}

@media (max-width: 767px) {
  #core-product-families > div > div:first-child {
    min-height: 360px;
    padding: 2rem 1.25rem !important;
    background-image:
      linear-gradient(
        90deg,
        rgba(247, 247, 245, 0.76) 0%,
        rgba(247, 247, 245, 0.9) 55%,
        rgba(247, 247, 245, 0.97) 100%
      ),
      url("/wp-content/uploads/2026/08/qgc_system_families_intro_bg.png");
    background-position: 42% center;
  }

  #core-product-families > div > div:first-child > :first-child {
    top: -16px;
  }
}

/* Product-family gallery: image-led cards with progressive detail disclosure. */
#core-product-families > div {
  width: 100%;
  max-width: 1560px !important;
}

#core-product-families .qgc-family-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

#core-product-families .qgc-family-card {
  position: relative;
  isolation: isolate;
  height: 620px;
  min-height: 620px;
  overflow: hidden;
  background: var(--qgc-black) !important;
  border: 1px solid rgba(150, 103, 28, 0.28) !important;
  box-shadow: 0 18px 46px rgba(5, 5, 6, 0.12);
  transition: border-color 520ms ease, box-shadow 620ms ease !important;
}

#core-product-families .qgc-family-card-accent {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: 2px !important;
  background: var(--qgc-gold) !important;
  opacity: 0.72;
}

#core-product-families .qgc-family-card-media {
  position: absolute !important;
  z-index: 0;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden;
  border: 0 !important;
}

#core-product-families .qgc-family-card-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  transition: transform 1100ms cubic-bezier(0.22, 0.72, 0.28, 1) !important;
}

#core-product-families .qgc-family-card-body {
  position: absolute !important;
  z-index: 2;
  inset: 0;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end !important;
  gap: 0 !important;
  padding: 1.55rem !important;
  color: var(--qgc-off-white);
  background: linear-gradient(
    0deg,
    rgba(5, 5, 6, 0.8) 0%,
    rgba(5, 5, 6, 0.54) 18%,
    rgba(5, 5, 6, 0.2) 36%,
    rgba(5, 5, 6, 0) 58%
  ) !important;
}

#core-product-families .qgc-family-card-intro {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

#core-product-families .qgc-family-card-heading > div {
  margin-bottom: 0.3rem;
  color: rgba(247, 247, 245, 0.68) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.055em;
}

#core-product-families .qgc-family-card-heading h3 {
  margin: 0;
  color: var(--qgc-off-white) !important;
  font-size: clamp(1.32rem, 1.7vw, 1.62rem) !important;
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(5, 5, 6, 0.48);
  transition: color 420ms ease !important;
}

#core-product-families .qgc-family-card-description {
  margin: 0.9rem 0 0;
  color: rgba(247, 247, 245, 0.84) !important;
  font-size: 0.91rem !important;
  line-height: 1.75 !important;
}

#core-product-families .qgc-family-card-details {
  margin-top: 1rem;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(247, 247, 245, 0.2) !important;
}

#core-product-families .qgc-family-card-specification {
  color: rgba(247, 247, 245, 0.84) !important;
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
  font-size: 0.76rem !important;
  line-height: 1.65;
}

#core-product-families .qgc-family-card-specification svg {
  color: #d9b979 !important;
}

#core-product-families .qgc-family-card-action {
  position: relative;
  z-index: 3;
  min-height: 42px;
  cursor: pointer;
  color: var(--qgc-off-white) !important;
  background: rgba(247, 247, 245, 0.08) !important;
  border: 1px solid rgba(247, 247, 245, 0.28) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: color 380ms ease, background-color 420ms ease,
    border-color 380ms ease !important;
}

#core-product-families .qgc-family-card-action:hover,
#core-product-families .qgc-family-card-action:focus-visible {
  color: var(--qgc-off-white) !important;
  background: var(--qgc-gold) !important;
  border-color: var(--qgc-gold) !important;
}

#core-product-families .qgc-family-card-code,
#core-product-families .qgc-family-card-icon {
  top: 1rem !important;
  bottom: auto !important;
  color: var(--qgc-off-white) !important;
  background: rgba(5, 5, 6, 0.58) !important;
  border: 1px solid rgba(217, 185, 121, 0.42) !important;
  backdrop-filter: none !important;
  box-shadow: 0 8px 22px rgba(5, 5, 6, 0.16) !important;
}

#core-product-families .qgc-family-card-code {
  right: 1rem !important;
  padding: 0.35rem 0.55rem !important;
  font-size: 0.7rem !important;
}

#core-product-families .qgc-family-card-icon {
  right: auto !important;
  left: 1rem !important;
  padding: 0.5rem !important;
  color: var(--qgc-off-white) !important;
}

@media (min-width: 700px) {
  #core-product-families .qgc-family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #core-product-families .qgc-family-card {
    height: 560px;
    min-height: 560px;
  }
}

@media (min-width: 1000px) {
  #core-product-families .qgc-family-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #core-product-families .qgc-family-card {
    height: 480px;
    min-height: 480px;
  }
}

@media (min-width: 1360px) {
  #core-product-families .qgc-family-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  #core-product-families .qgc-family-card-description,
  #core-product-families .qgc-family-card-details {
    max-height: 0;
    margin-top: 0;
    padding-top: 0 !important;
    overflow: hidden;
    opacity: 0;
    border-top-color: transparent !important;
    transform: translate3d(0, 18px, 0);
    transition: max-height 700ms cubic-bezier(0.22, 0.72, 0.28, 1),
      margin-top 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
      padding-top 620ms cubic-bezier(0.22, 0.72, 0.28, 1),
      opacity 420ms ease,
      transform 700ms cubic-bezier(0.22, 0.72, 0.28, 1),
      border-color 420ms ease;
  }

  #core-product-families .qgc-family-card:hover,
  #core-product-families .qgc-family-card:focus-within {
    border-color: rgba(217, 185, 121, 0.7) !important;
    box-shadow: 0 26px 62px rgba(5, 5, 6, 0.22),
      0 0 0 1px rgba(150, 103, 28, 0.12) !important;
  }

  #core-product-families .qgc-family-card:hover .qgc-family-card-image,
  #core-product-families .qgc-family-card:focus-within .qgc-family-card-image {
    transform: none !important;
    scale: 1 !important;
    filter: none !important;
  }

  #core-product-families .qgc-family-card:hover .qgc-family-card-heading h3,
  #core-product-families .qgc-family-card:focus-within .qgc-family-card-heading h3 {
    color: var(--qgc-off-white) !important;
  }

  #core-product-families .qgc-family-card:hover .qgc-family-card-description,
  #core-product-families .qgc-family-card:focus-within .qgc-family-card-description {
    max-height: 118px;
    margin-top: 0.9rem;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  #core-product-families .qgc-family-card:hover .qgc-family-card-details,
  #core-product-families .qgc-family-card:focus-within .qgc-family-card-details {
    max-height: 168px;
    margin-top: 1rem;
    padding-top: 1rem !important;
    opacity: 1;
    border-top-color: rgba(247, 247, 245, 0.2) !important;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #core-product-families .qgc-family-card,
  #core-product-families .qgc-family-card-image,
  #core-product-families .qgc-family-card-description,
  #core-product-families .qgc-family-card-details {
    transition: none !important;
  }
}

/* Certifications and sustainability — supplied industrial panorama backdrop. */
#certifications-sustainability {
  isolation: isolate;
  overflow: hidden;
  background-color: var(--background, #f7f7f5) !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(247, 247, 245, 0.2) 0%,
      rgba(247, 247, 245, 0.34) 31%,
      rgba(247, 247, 245, 0.82) 58%,
      rgba(247, 247, 245, 1) 82%
    ),
    url("/wp-content/uploads/2026/10/qgc-sustainable-industrial-panorama.png") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: max(100%, 1120px) auto !important;
}

#certifications-sustainability.qgc-certifications-has-video::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(460px, 43vw, 620px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(247, 247, 245, 0.16) 0%,
    rgba(247, 247, 245, 0.24) 42%,
    rgba(247, 247, 245, 0.82) 84%,
    rgba(247, 247, 245, 1) 100%
  );
}

#certifications-sustainability .qgc-certifications-video {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  height: clamp(460px, 43vw, 620px);
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  opacity: 0.94;
  filter: saturate(0.94) contrast(0.98) brightness(1.02);
}

#certifications-sustainability > :not(.qgc-certifications-video) {
  position: relative;
  z-index: 2;
}

/* Lift only the section introduction; accreditation cards keep their layout. */
#certifications-sustainability > div:first-of-type > div:first-child {
  position: relative;
  top: -50px;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  border-bottom: 0 !important;
}

#certifications-sustainability > div:first-of-type > div:first-child > div:first-child {
  width: 100%;
  max-width: 44rem !important;
}

#certifications-sustainability > div:first-of-type > div:first-child h2 {
  width: 100%;
  max-width: 44rem;
  padding-block: 0.12em 0.16em;
  overflow: visible !important;
  line-height: 1.28 !important;
  text-wrap: balance;
}

#certifications-sustainability > div:first-of-type > div:first-child > p {
  align-self: flex-start;
  max-width: 48rem !important;
  margin-top: 1.25rem;
  color: #45433f !important;
  text-wrap: balance;
}

@media (max-width: 767px) {
  #certifications-sustainability {
    background-position: left top !important;
    background-size: auto 420px !important;
  }

  #certifications-sustainability > div:first-of-type > div:first-child {
    top: -28px;
  }

  #certifications-sustainability > div:first-of-type > div:first-child > p {
    margin-top: 1rem;
  }

  #certifications-sustainability > div:first-of-type > div:first-child h2 {
    padding-block: 0.14em 0.18em;
    line-height: 1.35 !important;
  }

  #certifications-sustainability.qgc-certifications-has-video::after,
  #certifications-sustainability .qgc-certifications-video {
    height: 460px;
  }

  #certifications-sustainability .qgc-certifications-video {
    object-position: center center;
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  #certifications-sustainability .qgc-certifications-video {
    display: none;
  }
}