/*
Theme Name: Fox Optics
Theme URI: https://foxoptics.com
Author: FOX Optics
Author URI: https://foxoptics.com
Description: Представителна WordPress тема за ФОКС ООД (Оптики Фокс) — верига оптики в София. Изградена по корпоративния Brand Book на марката (лого, цветове PANTONE 201 C, типография).
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fox-optics
Tags: custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   0. CSS VARIABLES — Корпоративна идентичност (Brand Book)
   ========================================================= */
:root{
  /* Корпоративен цвят: PANTONE 201 C  (C0 M100 Y63 K29 / R179 G8 B56) */
  --fox-primary: #B30838;
  --fox-primary-dark: #8A0629;
  --fox-primary-darker: #6c0520;
  --fox-primary-light: #d94a6c;
  --fox-tint: #FBEAEE;          /* много светъл нюанс на основния цвят, за фонове */
  --fox-tint-2: #f6d9e0;

  /* Вторична палитра от Brand Book */
  --fox-dark: #4D4D4D;
  --fox-gray: #B3B3B3;
  --fox-light-gray: #E9E9E9;

  --fox-white: #FFFFFF;
  --fox-black: #201f1f;

  /* Типография — Museo Cyrl → Rubik / Foglihten No06 → Playfair Display */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --container-width: 1200px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(32,31,31,0.06);
  --shadow-md: 0 10px 30px rgba(32,31,31,0.10);
  --shadow-lg: 0 20px 50px rgba(32,31,31,0.16);

  --transition: 0.25s ease;
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fox-black);
  background: var(--fox-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--fox-primary); text-decoration:none; transition: color var(--transition); }
a:hover{ color: var(--fox-primary-dark); }
ul, ol{ padding-left: 1.25em; }
figure{ margin:0; }
button, input, textarea, select{ font-family: inherit; font-size: inherit; }
:focus-visible{ outline: 3px solid var(--fox-primary-light); outline-offset: 2px; }

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fox-black);
  margin: 0 0 0.5em;
}
h1{ font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2{ font-size: clamp(1.8rem, 3vw, 2.5rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }
p{ margin: 0 0 1.2em; }

.container{
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}
.section{ padding: 88px 0; }
.section--sm{ padding: 56px 0; }
.section--tint{ background: var(--fox-tint); }
.section--light{ background: var(--fox-light-gray); }
.section--dark{ background: var(--fox-dark); color: var(--fox-white); }
.section--primary{ background: linear-gradient(135deg, var(--fox-primary) 0%, var(--fox-primary-dark) 100%); color: var(--fox-white); }

.section-head{ text-align:center; max-width: 720px; margin: 0 auto 48px; }
.section-head .eyebrow{
  display:inline-block; color: var(--fox-primary); font-weight:700; letter-spacing:.14em;
  text-transform: uppercase; font-size: .82rem; margin-bottom: 10px;
}
.section-head h2{ margin-bottom: 14px; }
.section--dark .section-head .eyebrow,
.section--primary .section-head .eyebrow{ color: var(--fox-white); opacity:.85; }
.section--dark .section-head h2,
.section--primary .section-head h2{ color: var(--fox-white); }
.section-head p{ color:#5c5c5c; }
.section--dark .section-head p,
.section--primary .section-head p{ color: rgba(255,255,255,.85); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .98rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary{ background: var(--fox-primary); color: var(--fox-white); border-color: var(--fox-primary); }
.btn-primary:hover{ background: var(--fox-primary-dark); border-color: var(--fox-primary-dark); color:var(--fox-white); }
.btn-outline{ background: transparent; color: var(--fox-primary); border-color: var(--fox-primary); }
.btn-outline:hover{ background: var(--fox-primary); color: var(--fox-white); }
.btn-white{ background: var(--fox-white); color: var(--fox-primary); border-color:var(--fox-white); }
.btn-white:hover{ background:transparent; color: var(--fox-white); }
.btn-ghost-white{ background:transparent; color:var(--fox-white); border-color: rgba(255,255,255,.6); }
.btn-ghost-white:hover{ background: rgba(255,255,255,.15); border-color:#fff; color:#fff; }
.btn-sm{ padding: 9px 20px; font-size:.88rem; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* =========================================================
   2. TOP BAR
   ========================================================= */
.top-bar{
  background: var(--fox-black);
  color: rgba(255,255,255,.85);
  font-size: .86rem;
}
.top-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; }
.top-bar a{ color: rgba(255,255,255,.85); }
.top-bar a:hover{ color: var(--fox-white); }
.top-bar__contacts{ display:flex; gap:20px; flex-wrap:wrap; }
.top-bar__contacts span{ display:inline-flex; align-items:center; gap:6px; }
.top-bar__social{ display:flex; gap:12px; }
.top-bar__social a{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; }
.top-bar svg{ width:15px; height:15px; fill: currentColor; flex-shrink:0; }

/* =========================================================
   3. HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px; padding: 14px 24px;
}
.site-branding{ display:flex; align-items:center; }
.site-branding img{ height: 52px; width:auto; }
.site-branding a{ display:flex; align-items:center; }

.main-navigation{ flex:1; display:flex; justify-content:center; }
.main-navigation ul{ list-style:none; margin:0; padding:0; display:flex; gap:6px; align-items:center; }
.main-navigation li{ position:relative; }
.main-navigation a{
  display:block; padding: 12px 16px; color: var(--fox-black);
  font-weight:600; font-size:.98rem; border-radius: var(--radius-pill);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a{ color: var(--fox-primary); background: var(--fox-tint); }

.header-cta{ display:flex; align-items:center; gap:18px; }
.header-cta__phone{ display:flex; flex-direction:column; line-height:1.25; font-size:.85rem; color:var(--fox-dark); }
.header-cta__phone strong{ font-size:1.05rem; color: var(--fox-primary); font-family: var(--font-heading); }
.header-cta__phone a{ color: inherit; }

.menu-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  width:44px; height:44px; align-items:center; justify-content:center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; display:block; width:24px; height:2px; background: var(--fox-black);
  position:relative; transition: all var(--transition);
}
.menu-toggle span::before{ position:absolute; top:-8px; }
.menu-toggle span::after{ position:absolute; top:8px; }
.menu-toggle[aria-expanded="true"] span{ background: transparent; }
.menu-toggle[aria-expanded="true"] span::before{ top:0; transform: rotate(45deg); background:var(--fox-primary); }
.menu-toggle[aria-expanded="true"] span::after{ top:0; transform: rotate(-45deg); background:var(--fox-primary); }

@media (max-width: 900px){
  .main-navigation{
    position:fixed; inset: 0 0 0 auto; width:min(320px,86vw); height:100vh;
    background: var(--fox-white); box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform var(--transition);
    padding: 90px 28px 28px; overflow-y:auto; z-index: 499;
  }
  .main-navigation.is-open{ transform: translateX(0); }
  .main-navigation ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .main-navigation a{ padding:14px 10px; border-bottom:1px solid var(--fox-light-gray); border-radius:0; }
  .menu-toggle{ display:inline-flex; }
  .header-cta__phone{ display:none; }
  .nav-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:498; }
  .nav-overlay.is-open{ display:block; }
}

/* =========================================================
   4. HERO
   ========================================================= */
.hero{
  position:relative;
  background: linear-gradient(120deg, var(--fox-primary-dark) 0%, var(--fox-primary) 60%, var(--fox-primary) 100%);
  color: var(--fox-white);
  overflow:hidden;
  padding: 90px 0 130px;
}
.hero::after{
  content:"";
  position:absolute; right:-8%; top:50%; transform: translateY(-50%);
  width: 780px; height:780px; max-width: 70vw; max-height:70vw;
  background: url('assets/images/icon-fox-mark-white.png') center/contain no-repeat;
  opacity: 0.10; pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center; }
.hero h1{ color:#fff; margin-bottom:20px; }
.hero h1 em{ font-style:normal; color:#ffd9e2; }
.hero p.lead{ font-size:1.15rem; color:rgba(255,255,255,.9); max-width: 540px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-badges{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
.hero-badges div{ display:flex; flex-direction:column; }
.hero-badges strong{ font-family: var(--font-heading); font-size:1.7rem; }
.hero-badges span{ font-size:.85rem; color:rgba(255,255,255,.8); }
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-visual .hero-card{
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-lg); padding: 34px; backdrop-filter: blur(6px);
  width:100%; max-width:380px;
}
.hero-visual .hero-card img{ border-radius: var(--radius-md); margin-bottom:18px; background:#fff; }
.hero-wave{ display:block; width:100%; height:auto; margin-top:-2px; position:relative; z-index:2; }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-actions{ justify-content:center; }
  .hero-badges{ justify-content:center; }
  .hero-visual{ display:none; }
}

/* =========================================================
   5. USP / FEATURES
   ========================================================= */
.usp-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.usp-card{
  background: var(--fox-white); border-radius: var(--radius-md); padding: 30px 24px;
  box-shadow: var(--shadow-sm); text-align:center; transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid var(--fox-light-gray);
}
.usp-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.usp-icon{
  width:64px; height:64px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
  background: var(--fox-tint); border-radius:50%; color: var(--fox-primary);
}
.usp-icon svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; }
.usp-card h3{ font-size:1.15rem; margin-bottom:8px; }
.usp-card p{ font-size:.94rem; color:#666; margin-bottom:0; }

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

/* =========================================================
   6. SERVICES
   ========================================================= */
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.service-card{
  background: var(--fox-white); border: 1px solid var(--fox-light-gray); border-radius: var(--radius-md);
  padding: 32px 26px; transition: all var(--transition); position:relative; overflow:hidden;
}
.service-card:hover{ border-color: var(--fox-primary); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.service-card .usp-icon{ background: var(--fox-primary); color:#fff; }
.service-card h3{ font-size:1.2rem; }
.service-card p{ color:#666; font-size:.95rem; margin-bottom:14px; }
.service-card .service-link{ font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; }
.service-card .service-link svg{ width:14px; height:14px; fill:currentColor; transition: transform var(--transition); }
.service-card:hover .service-link svg{ transform: translateX(4px); }

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

/* =========================================================
   7. BRANCHES (Филиали)
   ========================================================= */
.branches-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.branch-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm);
  border:1px solid var(--fox-light-gray); display:flex; flex-direction:column; transition: box-shadow var(--transition), transform var(--transition);
}
.branch-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.branch-card__media{
  position:relative; aspect-ratio: 4/3; background: linear-gradient(135deg,var(--fox-tint),var(--fox-light-gray));
  display:flex; align-items:center; justify-content:center; color: var(--fox-primary); overflow:hidden;
}
.branch-card__media img{ width:100%; height:100%; object-fit:cover; }
.branch-card__media .placeholder-mark{ width:34%; opacity:.35; }
.branch-card__media .placeholder-label{
  position:absolute; bottom:10px; left:10px; background: rgba(32,31,31,.65); color:#fff;
  font-size:.72rem; padding:4px 10px; border-radius: var(--radius-pill);
}
.branch-card__body{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.branch-card__body h3{ font-size:1.1rem; margin-bottom:0; }
.branch-meta{ display:flex; gap:10px; font-size:.9rem; color:#555; align-items:flex-start; }
.branch-meta svg{ width:16px; height:16px; fill:none; stroke: var(--fox-primary); stroke-width:1.8; flex-shrink:0; margin-top:3px; }
.branch-card__actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; padding-top:8px; }

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

/* single branch */
.branch-hero{ background: var(--fox-tint); padding: 48px 0; }
.branch-hero h1{ margin-bottom:6px; }
.branch-single{ display:grid; grid-template-columns: 1.3fr .9fr; gap:40px; align-items:start; }
.branch-single__map{ border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--fox-light-gray); background:var(--fox-light-gray); aspect-ratio: 16/10; }
.branch-single__map iframe{ width:100%; height:100%; border:0; display:block; }
.branch-info-card{ background:#fff; border:1px solid var(--fox-light-gray); border-radius: var(--radius-md); padding:28px; box-shadow: var(--shadow-sm); }
.branch-info-card h3{ margin-bottom:16px; }
.branch-info-card .branch-meta{ margin-bottom:14px; }
@media (max-width: 900px){ .branch-single{ grid-template-columns:1fr; } }

/* =========================================================
   8. BRANDS STRIP
   ========================================================= */
.brands-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }
.brand-chip{
  padding: 12px 26px; border:1.5px dashed var(--fox-gray); border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight:700; letter-spacing:.03em; color: var(--fox-dark);
  font-size:1.05rem; background:#fff;
}
.brand-chip.is-real{ border-style:solid; border-color: var(--fox-primary); color: var(--fox-primary); }
.brand-chip--logo{ border-style:solid; border-color: var(--fox-light-gray); padding:10px 22px; }
.brand-chip--logo img{ display:block; height:28px; max-width:140px; width:auto; object-fit:contain; }

/* =========================================================
   9. CTA BANNER
   ========================================================= */
.cta-banner{ text-align:center; }
.cta-banner h2{ color:#fff; }
.cta-banner .cta-phone{ font-family: var(--font-heading); font-size: clamp(1.6rem,3vw,2.4rem); font-weight:700; display:block; margin: 6px 0 26px; color:#fff; }
.cta-banner .cta-phone a{ color:#fff; }

/* =========================================================
   10. GENERIC PAGE CONTENT (About/Services text pages)
   ========================================================= */
.page-hero{ background: var(--fox-tint); padding: 60px 0; text-align:center; }
.page-hero h1{ margin-bottom:8px; }
.page-hero .breadcrumb{ font-size:.9rem; color:#777; }
.page-hero .breadcrumb a{ color:#777; }
.entry-content{ padding: 64px 0; }
.entry-content .container{ max-width: 860px; }
.entry-content h2{ margin-top:1.4em; }
.entry-content ul{ margin-bottom:1.2em; }
.entry-content img{ border-radius: var(--radius-md); }
.entry-content .wp-block-gallery, .entry-content .gallery{ margin: 2em 0; }
.entry-content figure.wp-block-image{ margin: 1.5em 0; }
.entry-content blockquote{
  border-left: 4px solid var(--fox-primary); margin: 1.6em 0; padding: 6px 0 6px 22px;
  font-family: var(--font-heading); font-style: italic; font-size:1.15rem; color: var(--fox-dark);
}

/* Values / About grid (optional blocks used within pages) */
.values-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin: 2em 0; }
.value-card{ background: var(--fox-tint); border-radius: var(--radius-md); padding:24px; }
.value-card h3{ font-size:1.05rem; }
@media (max-width: 700px){ .values-grid{ grid-template-columns:1fr; } }

/* =========================================================
   11. CONTACT PAGE
   ========================================================= */
.contact-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
.contact-form{ background:#fff; border:1px solid var(--fox-light-gray); border-radius: var(--radius-md); padding: 34px; box-shadow: var(--shadow-sm); }
.form-row{ margin-bottom: 18px; }
.form-row label{ display:block; font-weight:600; margin-bottom:6px; font-size:.92rem; }
.form-row input, .form-row textarea{
  width:100%; padding: 13px 16px; border:1.5px solid var(--fox-light-gray); border-radius: var(--radius-sm);
  transition: border-color var(--transition); background:#fdfdfd;
}
.form-row input:focus, .form-row textarea:focus{ border-color: var(--fox-primary); outline:none; background:#fff; }
.form-row.form-hp{ position:absolute; left:-9999px; }
.form-notice{ padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom:20px; font-size:.94rem; }
.form-notice--success{ background:#e7f6ec; color:#1c6b34; border:1px solid #b7e4c7; }
.form-notice--error{ background:#fdecec; color:#a3231f; border:1px solid #f3bdbd; }
.contact-side{ display:flex; flex-direction:column; gap:20px; }
.contact-info-card{ background: var(--fox-tint); border-radius: var(--radius-md); padding:28px; }
.contact-info-card h3{ font-size:1.05rem; margin-bottom:16px; }
.contact-info-card .branch-meta{ margin-bottom:14px; color:var(--fox-dark); }
.contact-map{ border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--fox-light-gray); aspect-ratio:16/10; background:var(--fox-light-gray); }
.contact-map iframe{ width:100%; height:100%; border:0; }
@media (max-width: 900px){ .contact-layout{ grid-template-columns:1fr; } }

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer{ background: var(--fox-black); color: rgba(255,255,255,.78); padding-top: 72px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand img{ height:44px; margin-bottom:16px; }
.footer-brand p{ font-size:.92rem; color: rgba(255,255,255,.62); max-width:280px; }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.footer-social a:hover{ background: var(--fox-primary); }
.footer-social svg{ width:16px; height:16px; fill:currentColor; }
.site-footer h4{ color:#fff; font-family: var(--font-body); font-weight:700; font-size:1rem; letter-spacing:.03em; text-transform:uppercase; margin-bottom:20px; }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-links a{ color: rgba(255,255,255,.7); font-size:.95rem; }
.footer-links a:hover{ color:#fff; }
.footer-contact{ display:flex; flex-direction:column; gap:14px; font-size:.95rem; }
.footer-contact div{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg{ width:17px; height:17px; stroke: var(--fox-primary-light); fill:none; stroke-width:1.8; margin-top:3px; flex-shrink:0; }
.footer-contact a{ color: rgba(255,255,255,.78); }
.footer-bottom{ padding: 22px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.85rem; color: rgba(255,255,255,.55); }
.footer-bottom a{ color: rgba(255,255,255,.7); }

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

/* =========================================================
   13. 404 & MISC
   ========================================================= */
.error-404{ text-align:center; padding: 120px 0; }
.error-404 .code{ font-family: var(--font-heading); font-size: 7rem; color: var(--fox-primary); line-height:1; margin-bottom:10px; }

.skip-link{
  position:absolute; left:-9999px; top:0; background: var(--fox-primary); color:#fff; padding:14px 22px; z-index:9999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* WP alignment helpers */
.alignwide{ max-width: 1100px; margin-left:auto; margin-right:auto; }
.alignfull{ max-width:none; width:100%; }
.aligncenter{ margin-left:auto; margin-right:auto; display:block; }

/* Placeholder badge used across the theme wherever real content is pending */
.pending-badge{
  display:inline-flex; align-items:center; gap:6px; background:#fff3cd; color:#7a5b00;
  border:1px solid #ffe08a; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius: var(--radius-pill);
  text-transform:uppercase; letter-spacing:.04em;
}

/* =========================================================
   14. МАРКИ (страница "Марки" — page-templates/template-brands.php)
   ========================================================= */
.brands-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:22px; }
.brand-card{
  background:#fff; border:1px solid var(--fox-light-gray); border-radius: var(--radius-md);
  padding:26px; text-align:center; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition);
}
.brand-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.brand-card__logo{
  height:70px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.brand-card__logo img{ max-height:100%; max-width:100%; object-fit:contain; }
.brand-card__name-placeholder{ font-family: var(--font-heading); font-weight:700; color: var(--fox-gray); font-size:1.1rem; }
.brand-card h3{ font-size:1.05rem; margin-bottom:8px; }
.brand-card p{ font-size:.9rem; color:#666; margin-bottom:10px; }
.brand-card__link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.88rem; }
.brand-card__link svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }