/*
Theme Name: DCS Dog Paw
Theme URI: https://dcsdogpaw.com
Author: BeBrand
Description: Bespoke, lightweight theme for DCS Dog Paw. Pixel-faithful reproduction of the current design, WooCommerce-ready, i18n-ready (translatable via DeepL plugin). Replaces Impreza + WPBakery.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: dcsdogpaw
Tags: ecommerce, custom-colors, translation-ready, block-styles
*/

/* Work Sans a functions.php-ben van enqueue-lva (wp_enqueue_style 'dcsdogpaw-fonts'). */

:root{
  /* Brandbook-hu zold paletta (#19 korrekcio, 2026-08-19): a korabbi neon-sargas
     extrakcio helyett a BRANDBOOK.md mester-palettaja. forest=#1B5E2F, lime=#D6E24E,
     sage=#7DAE7F, near-black=#1A1A1A. */
  --lime:#d6e24e; --lime-bg:#d6e24e; --accent:#1b5e2f;
  --forest:#1b5e2f; --dark-sec:#1b5e2f; --footer:#123c22; --green-hero:#1b5e2f;
  --sage:#7dae7f;
  --cream:#fcffeb; --btn:#d6e24e; --btn-orange:#f07d1e; --card-q:#1b5e2f;
  --near-black:#1a1a1a;
  /* highlight-lime a szoveg-kiemelesekhez + a lime benefit-blokk (brandbook lime) */
  --acc-lime:#d6e24e; --benefit-bg:#d6e24e; --contact-green:#1b5e2f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Work Sans',system-ui,-apple-system,sans-serif;color:#1d1d1d;background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.5px;line-height:1.05}
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
.acc{color:var(--accent)}
.btn{display:inline-block;background:var(--btn);color:#1a2a12;font-weight:700;font-size:15px;padding:13px 30px;border-radius:40px;border:none;cursor:pointer;transition:.2s}
.btn:hover{filter:brightness(1.05)}
.btn-dark{background:#1c2b13;color:#fff}

/* Top bar */
.topbar{background:var(--lime);font-size:13px;font-weight:600;color:#1a1a1a}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:7px 26px}
/* #3: leaf (bal) + envelope (jobb) ikon a szoveg elott, near-black a lime savon */
.topbar-l,.topbar-r{display:inline-flex;align-items:center;gap:7px}
.topbar .tb-ic{display:inline-flex;align-items:center}
.topbar .tb-ic svg{display:block}

/* Header */
.site-header{background:#fbfbe7;position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 26px}
.site-logo img{height:46px}
.main-nav{display:flex;align-items:center;gap:34px}
.main-nav a{font-weight:600;font-size:15px;color:#26331c}
.main-nav a.active,.main-nav .current-menu-item>a{color:var(--accent)}
/* #19: a ref-en a 'Contact Us' nav-gomb LIME pill sotet szoveggel (nem forest+feher) */
.main-nav .btn{padding:11px 26px;font-size:14px;background:var(--lime);color:var(--forest)}
.nav-toggle{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:#26331c}

/* Hero (front page photo hero) */
/* #1a: magasabb hero + lejjebb tolt object-position, hogy a kep alja (jars talpa) NE legyen levagva (ref 02) */
.hero{position:relative;background:#2a2f1e center/cover no-repeat;min-height:620px;display:flex;align-items:center;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:0}
.hero:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,transparent 28%,var(--near-black))}
.hero .wrap{position:relative;z-index:2;width:100%;display:flex;justify-content:flex-end}
.hero .hero-card{max-width:560px;color:#fff;padding:40px 0;transform:translateX(34px)}
.hero h1{font-size:56px;font-weight:900;line-height:1.02}
.hero h1 .acc{color:var(--lime)}
.hero p{margin:20px 0 26px;font-size:16px;line-height:1.6}
.hero .btn{background:var(--lime);color:var(--forest)}

/* About hero (green) */
.about-hero{background:var(--green-hero);padding:56px 0 70px}
.about-hero h1{color:#fff;font-size:52px;font-weight:900;margin-bottom:34px}
.about-hero h1 .acc{color:var(--lime)}
.about-hero .row{display:grid;grid-template-columns:.85fr 1fr;gap:56px;align-items:center}
.about-hero .row img{border-radius:16px;width:100%;object-fit:cover}
.about-hero h2{color:#fff;font-size:34px;font-weight:900;line-height:1.12;margin-bottom:22px}
.about-hero h2 .acc{color:var(--lime)}
.about-hero p{color:#eef3e2;font-size:15px;line-height:1.7;max-width:520px}

/* Products (a lime szekcio mogott a valodi hattergrafika) */
/* #5: a hatter-minta TOP-hoz horgonyozva (nem center/cover) -> szures/magassag-valtozaskor NEM ugral. #1b: nagyobb szekcio-padding a termek-surites ellen. */
.products{background:var(--lime-bg) url('assets/img/products-bg-scaled.webp') center top/cover no-repeat;padding:72px 0 92px}
.products h2{text-align:center;font-size:42px;color:var(--forest);margin-bottom:34px}
.filters{display:flex;justify-content:center;gap:10px;margin-bottom:38px;flex-wrap:wrap}
.filters button{background:transparent;border:none;font-family:inherit;font-weight:700;font-size:16px;color:var(--forest);padding:11px 26px;border-radius:40px;cursor:pointer}
.filters button.active{background:#fff;color:var(--forest)}
/* 4-oszlopos, EGYENLO-MAGASSAGU racs (a live pontos elrendezese; nincs masonry-csuszas) */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;align-items:stretch}
.pcard{background:#fff;border-radius:16px;padding:22px;text-align:center;box-shadow:0 2px 14px rgba(0,0,0,.05);display:flex;flex-direction:column;height:100%}
.pcard .ph{height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.pcard .ph img{max-height:180px;width:auto}
.pcard h3{font-size:16px;color:#1a1a1a;font-weight:700;margin:6px 0 10px;line-height:1.25}
.pcard p{font-size:13px;color:#555;line-height:1.5;margin-bottom:16px}
.pcard .btn{padding:10px 30px;font-size:14px;margin-top:auto;align-self:center}
/* 'Have a question?' = a racs UTOLSO cellaja (nem kulon blokk) */
.pcard-q{background:var(--card-q);border-radius:16px;padding:30px 24px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%}
.pcard-q h3{font-size:24px;font-weight:800;margin-bottom:18px;color:#fff}
/* Reszponziv lepcso: desktop 4 -> 3 -> 2 -> 1 (a live fluiditasa; desktop-target 4-oszlop) */
@media(max-width:1200px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pgrid{grid-template-columns:1fr}}

/* Lifestyle rows */
.life{background:var(--cream);padding:60px 0}
.life .row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:60px}
.life .row:last-child{margin-bottom:0}
.life h2{font-size:38px;font-weight:900;color:#1a2a12;margin-bottom:18px;line-height:1.08}
/* highlight = ELENK lime (ref #c7f015), NEM a sotet olajzold */
.life h2 .acc{color:var(--acc-lime)}
.life p{font-size:15px;color:#3a3a3a;line-height:1.7;margin-bottom:22px;max-width:460px}
.life .imgwrap{position:relative}
.life .imgwrap img{border-radius:18px;width:100%;object-fit:cover}
/* A lifestyle-ikonok (icon-1/2/3.svg) MAR teljes kor-badge-ek (sajat zold korrel).
   #6/#12/#13: nagyobb + a kep also szelere 'matricakent' ratolva (translateY straddle),
   ahogy a referencian (03/01) -- philosophy/Our Story/Collaborate egyseges .life .badge. */
.life .badge{position:absolute;width:104px;height:104px;transform:translateY(30%);filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));z-index:2}
.life .badge img{width:104px;height:104px;display:block}
/* #11: az Our Story (story-life) kepek kisebbek + a kulso szelhez igazitva (ref 03) */
.story-life .row .imgwrap{max-width:452px}
.story-life .row:nth-child(odd) .imgwrap{justify-self:end}
.story-life .row:nth-child(even) .imgwrap{justify-self:start}
.qa{margin-bottom:16px}
.qa h4{font-size:15px;font-weight:800;color:#1a2a12;margin-bottom:2px}
.qa p{font-size:14.5px;color:#3a3a3a;line-height:1.6;max-width:none}

/* Benefits (ref: sargas-lime blokk, BAL=cim+kep, JOBB=lista+gomb) */
.benefits{background:var(--benefit-bg);padding:56px 0}
.benefits .row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* #7: 'The benefits' near-black, a '.acc' resz (provided by our company) forest-zold */
.benefits h2{font-size:40px;font-weight:900;color:#1a1a1a;margin-bottom:22px;line-height:1.06;max-width:440px}
.benefits h2 .acc{color:var(--forest)}
/* #8: a pipa-lista feljebb (a sor tetejehez igazitva) + nagyobb betu */
.benefits .bwrap{align-self:start}
.benefits .btext .pic{margin-top:6px}
.benefits .pic img{border-radius:16px;width:100%}
.blist{list-style:none;display:flex;flex-direction:column;gap:20px;margin-bottom:26px}
.blist li{display:flex;gap:14px;align-items:center;font-size:17.5px;font-weight:700;color:var(--forest);line-height:1.42}
/* A tick.svg MAR maga a zold pipa-badge (60x60, #447316) -> nincs doboz-hatter */
.blist .tk{flex:none;width:30px;height:30px}
.blist .tk img{width:30px;height:30px;display:block}

/* Contact form */
.contact{background:var(--dark-sec);padding:70px 0}
.contact .card{background:var(--lime-bg);border-radius:22px;padding:46px;display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.contact h2{font-size:34px;font-weight:900;color:var(--contact-green);margin-bottom:18px}
.contact .lead{font-size:20px;font-weight:800;color:#1a1a1a;line-height:1.35}
.cform{display:flex;flex-direction:column;gap:14px}
.cform input,.cform textarea{font-family:inherit;font-size:14px;padding:14px 16px;border:none;border-radius:8px;background:#fff;color:#333;width:100%}
.cform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform textarea{min-height:120px;resize:vertical}
.cform .chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--contact-green);line-height:1.2}
.cform .chk input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--btn-orange)}
.cform .hp{position:absolute;left:-9999px}
.cform .send{background:var(--btn-orange);color:#fff;font-weight:700;padding:11px 30px;border:none;border-radius:6px;align-self:flex-start;cursor:pointer;font-family:inherit}
.cform .form-msg{font-size:14px;font-weight:600;color:#1c2b12}

/* Footer */
.site-footer{background:var(--footer);color:#dfe8cf;padding:52px 0 26px}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;align-items:start}
.site-footer .flogo img{height:56px}
.site-footer h4{color:var(--lime);font-size:16px;font-weight:800;margin-bottom:14px}
.site-footer a,.site-footer p{color:#dfe8cf;font-size:14px;line-height:2}
.site-footer .soc a{display:flex;align-items:center;gap:10px;margin-bottom:6px}
/* #10: nincs lime KOR -> maga az IKON lime (kor nelkul), a platform-nev vilagos szoveg-cimke (ref) */
.site-footer .soc .sic{flex:none;width:20px;height:20px;background:none;border-radius:0;color:var(--lime);display:inline-flex;align-items:center;justify-content:center}
.site-footer .soc .sic svg{width:18px;height:18px}
.site-footer .soc a:hover{color:#fff}
.site-footer .badges{display:flex;justify-content:center;margin:34px 0 18px}
.site-footer .badges img{height:74px}
.site-footer hr{border:none;border-top:1px solid #3f5a20;margin:26px 0}
.site-footer .copy{text-align:center;color:var(--lime);font-size:13px}

/* #20: 'Added to cart' sav (globalis, a WC add-to-cart AJAX-eventre; JS a main.js-ben) */
.dcsdp-cartbar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,150%);z-index:1200;display:flex;align-items:center;gap:16px;background:#1b5e2f;color:#fff;padding:13px 16px 13px 20px;border-radius:14px;box-shadow:0 16px 40px -12px rgba(0,0,0,.5);transition:transform .3s ease;max-width:calc(100% - 32px)}
.dcsdp-cartbar.show{transform:translate(-50%,0)}
.dcsdp-cartbar .cb-msg{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.dcsdp-cartbar .cb-msg svg{color:var(--lime)}
.dcsdp-cartbar .cb-open{background:var(--lime);color:var(--forest);font-weight:800;font-size:14px;text-decoration:none;padding:9px 18px;border-radius:40px;white-space:nowrap}
.dcsdp-cartbar .cb-close{background:none;border:none;color:#cfe0c8;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.dcsdp-cartbar .cb-close:hover{color:#fff}

@media(max-width:900px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .hero .wrap{justify-content:center}
  .hero h1{font-size:38px}
  .about-hero .row,.life .row,.benefits .row,.contact .card{grid-template-columns:1fr;gap:28px}
  .products h2,.life h2,.benefits h2,.about-hero h1{font-size:30px}
  .about-hero h2,.life h2{font-size:26px}
  .site-footer .cols{grid-template-columns:1fr 1fr}
}