/* =========================================================
Pets4Family shop — unified stylesheet
Generated from the 19 page mockups; merged & de-duplicated.
========================================================= */
/* =========================================================
Pets4Family — Design Tokens
========================================================= */
:root{
--coral:#3B9797;
--coral-dark:#2b7676;
--navy:#001F3F;
--navy-soft:#0a2e5c;
--green:#2d6a4f;
--green-hover:#1b4332;
--cream:#f4f7fa;
--pink:#a3c2e0;
--ink:#212529;
--muted:#5a626a;
--gray-btn-bg:#f0f3f6;
--gray-btn-text:#2d3748;
--gray-btn-hover:#52606d;
--white:#ffffff;
--border-color:#e2e8f0;
--shadow-soft:0 10px 30px -10px rgba(0,31,63,.12);
--font-display:'Roboto', system-ui, -apple-system, 'Segoe UI', BlinkMacSystemFont, sans-serif;
--font-body:'Roboto', system-ui, -apple-system, 'Segoe UI', BlinkMacSystemFont, sans-serif;
--ease:cubic-bezier(.22,.9,.32,1);
--green-dark:#3b853b;
--red:#d93838;
--radius-lg:0px;
--radius-md:0px;
--radius-sm:0px;
--grey-header:#e2e8f0;
--dark-grey:#2d3748;
--dark-grey-soft:#1a202c;
--gray-btn:#2d3748;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
margin:0;
font-family:var(--font-body);
color:var(--ink);
background:var(--white);
line-height:1.6;
font-size:15px;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
width:100%;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{
font-family:var(--font-display);
margin:0 0 .4em;
line-height:1.25;
font-weight:700;
color:var(--navy) !important;
}
p{margin:0 0 1em;}
button{font-family:inherit;cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent;}
.container{width:min(1320px,94%);margin-inline:auto;}
/* Exact 1.0cm spațiere */
.section{
padding-top: 1.0cm !important;
padding-bottom: 1.0cm !important;
}
.section-compact{
padding-top: 1.0cm !important;
padding-bottom: 1.0cm !important;
}
.center{text-align:center;margin-top:16px;}
.section-title{
font-size:clamp(1.35rem, 2.1vw, 1.75rem);
margin-bottom:20px;
text-align:left;
font-weight:700;
text-transform: uppercase;
letter-spacing: -0.2px;
}
/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
/* Buttons */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
padding:.7em 1.5em;
border-radius:0px;
font-weight:500;font-family:var(--font-display);
font-size:.95rem;transition:all .25s var(--ease);
white-space:nowrap;
min-height:42px;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--coral);color:#ffffff;box-shadow:0 6px 14px -4px rgba(59,151,151,.4);font-weight:700;}
.btn-primary:hover{background:var(--coral-dark);color:#fff;}
.btn-dark{background:var(--navy);color:#fff;}
.btn-dark:hover{background:var(--navy-soft);}
.btn-outline{background:transparent;color:var(--navy);border:1px solid var(--navy);padding:.6em 1.4em;}
.btn-outline:hover{background:var(--navy);color:#fff;}
.btn-sm{padding:.5em 1em;font-size:.88rem;min-height:36px;}
/* Header */
.site-header{
position:sticky;
top:0;
z-index:500;
background:#fff;
box-shadow:0 2px 12px rgba(0,31,63,.08);
}
.topbar{
background:#f8fafc;
border-bottom:1px solid var(--border-color);
font-size:.88rem;
color:var(--muted);
}
.topbar-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:42px;
}
.topbar-center{
flex:1;
display:flex;
justify-content:center;
}
.topbar-nav{
display:flex;
align-items:center;
gap:26px;
}
.topbar-nav a{
color:var(--navy);
font-weight:500;
transition:color .2s;
font-size:.9rem;
}
.topbar-nav a:hover, .topbar-nav a.active{
color:var(--coral-dark);
}
.topbar-right{
display:flex;
align-items:center;
gap:20px;
flex-shrink:0;
}
.topbar-lang{
display:flex;
align-items:center;
gap:4px;
font-weight:500;
font-size:.88rem;
}
.topbar-lang span.active{
color:var(--navy);
background:#e2e8f0;
padding:2px 6px;
font-weight:700;
}
.topbar-lang a{
color:var(--muted);
}
/* Main Header */
.main-header{
padding:12px 0;
}
.main-header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
}
.logo{
display:flex;
align-items:center;
flex-shrink:0;
}
.logo img {
max-width: 190px;
height: auto;
object-fit: contain;
}
.header-search-wrap{
flex:1;
display:flex;
align-items:center;
justify-content:center;
max-width: 680px;
margin: 0 10px;
}
.search-bar{
width:100%;
display:flex;
align-items:center;
border:1px solid var(--border-color);
overflow:hidden;
transition:border-color .2s;
background:#fff;
}
.search-bar:focus-within{
border-color:var(--coral);
}
.search-bar input{
width:100%;
border:none;
padding:10px 16px;
font-family:inherit;
font-size:.95rem;
outline:none;
}
.search-bar button{
padding:0 18px;
color:var(--muted);
font-size:1.05rem;
transition:color .2s;
height:40px;
display:flex;
align-items:center;
justify-content:center;
}
.search-bar button:hover{
color:var(--coral-dark);
}
.header-phone{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:var(--navy);
white-space:nowrap;
padding:0 8px;
flex-shrink:0;
}
.header-phone-icon{
width:40px;
height:40px;
background:var(--cream);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--coral-dark);
font-size:1.1rem;
transition:background .2s, color .2s;
}
.header-phone:hover .header-phone-icon{
background:var(--coral);
color:#ffffff;
}
.header-phone-text{
display:flex;
flex-direction:column;
}
.header-phone-number{
font-size:1.1rem;
font-weight:700;
line-height:1.1;
color:var(--navy);
}
.header-phone-label{
font-size:.75rem;
color:var(--muted);
font-weight:500;
}
.header-actions{
display:flex;
align-items:center;
gap:18px;
flex-shrink:0;
}
.action-item{
display:flex;
flex-direction:column;
align-items:center;
font-size:.78rem;
font-weight:500;
color:var(--navy);
position:relative;
gap:3px;
}
.action-item i{
font-size:1.3rem;
}
.action-item:hover{
color:var(--coral-dark);
}
.badge-count{
position:absolute;
top:-6px;
right:2px;
background:var(--navy);
color:#fff;
font-size:.65rem;
font-weight:700;
width:18px;
height:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}
.hamburger{
display:none;
flex-direction:column;
justify-content:center;
gap:4px;
width:36px;
height:36px;
padding:6px;
background:var(--cream);
}
.hamburger span{
display:block;
height:2px;
background:var(--navy);
transition:transform .3s var(--ease),opacity .3s var(--ease);
}
/* Hero */
.hero{
position:relative;
width:100%;
height:430px;
margin:0 auto;
overflow:hidden;
color:#fff;
}
.hero-slides{position:absolute;inset:0;}
.hero-slide{
position:absolute;inset:0;background-size:cover;background-position:center;
opacity:0;transition:opacity 1.1s var(--ease);
}
.hero-slide.active{opacity:1;}
.hero-content{
position:relative;
z-index:2;
max-width:650px;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
}
.hero .eyebrow{color:var(--pink) !important;margin-bottom:.3em;font-size:1rem;font-weight:500;}
.hero h1{font-size:clamp(1.8rem, 3.5vw, 2.6rem);color:#ffffff !important;margin-bottom:.4em;line-height:1.2;}
.hero-actions{display:flex;align-items:center;gap:18px;margin-top:10px;}
.hero-arrow{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;
background:rgba(0, 31, 63, 0.65);color:#fff;font-size:1.1rem;
display:flex;align-items:center;justify-content:center;transition:background .25s, color .25s;
}
.hero-arrow:hover{background:var(--coral);color:#fff;}
.hero-arrow.prev{left:20px;}
.hero-arrow.next{right:20px;}
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:flex;gap:8px;z-index:3;}
.hero-dots button{width:10px;height:10px;background:rgba(255,255,255,.5);border:none;transition:all .25s;}
.hero-dots button.active{background:var(--coral);width:26px;}
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
[data-reveal].in{opacity:1;transform:translateY(0);}
/* Categories */
.categories-home{padding:22px 0 16px;}
.categories-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
max-width:540px;
margin:0 auto;
}
.category-tile{
position:relative;
aspect-ratio: 1 / 1;
overflow:hidden;
display:block;
box-shadow:var(--shadow-soft);
border:1px solid var(--border-color);
}
.category-tile img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s var(--ease);
}
.category-tile:hover img{transform:scale(1.05);}
.category-overlay{
position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,31,63,0) 20%,rgba(0,31,63,.8) 100%);
}
.category-label{
position:absolute;left:14px;right:14px;bottom:16px;color:#fff;font-family:var(--font-display);
font-weight:700;font-size:1.2rem;display:flex;flex-direction:column;gap:3px;line-height:1.2;
text-align:center;
}
.category-label small{font-family:var(--font-body);font-weight:400;font-size:.82rem;color:#e3e5f0;}
/* Parteneri */
.partners-section{
background:#ffffff;
border-top:1px solid var(--border-color);
border-bottom:1px solid var(--border-color);
padding:16px 0;
overflow:hidden;
}
.partners-slider{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}
.partner-logo{
flex: 1;
display:flex;
align-items:center;
justify-content:center;
opacity:0.85;
transition:opacity .3s, transform .3s;
}
.partner-logo:hover{opacity:1;transform:scale(1.08);}
.partner-logo img{max-height:44px;max-width:130px;object-fit:contain;}
/* Products Grid */
.products-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap: 0;
border-top: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
}
.product-card{
position:relative;
background:#ffffff;
padding:16px 14px;
text-align:left;
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), opacity .35s var(--ease), z-index .35s var(--ease);
display:flex;
flex-direction:column;
align-items:stretch;
z-index: 1;
}
.product-card:hover{
transform: none !important;
box-shadow: 0 4px 18px rgba(10, 25, 47, 0.08);
border-color: var(--coral);
z-index: 5;
}
.product-card:hover .product-title a,
.product-title a:hover {
color: var(--coral-dark) !important;
}
.product-badge{
position:absolute;top:10px;left:10px;background:var(--navy);color:#ffffff;font-weight:700;font-size:.7rem;
padding:3px 8px;z-index:3;
}
.product-thumb-lg{
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:1/0.9;
margin-bottom:10px;
overflow:hidden;
}
.product-thumb-lg img{
max-width:85%;
max-height:85%;
object-fit:contain;
}
.product-title{
font-family:var(--font-display);
font-weight:400;
font-size:0.96rem;
letter-spacing:0;
margin-bottom:10px;
min-height:2.6em;
display:flex;
align-items:center;
justify-content:flex-start;
text-align:left;
line-height:1.35;
}
.product-title a{
color:var(--navy) !important;
transition:color .2s var(--ease);
}
/* Preț stil PandaShop */
.product-price-box{
margin-bottom:6px;
text-align:left;
display:flex;
align-items:baseline;
gap:6px;
}
.price-now{
color:#000000 !important;
font-weight:900;
font-size:1.32rem;
letter-spacing:-0.3px;
line-height:1;
}
.price-old{
color:var(--muted);
text-decoration:line-through;
font-weight:400;
font-size:.85rem;
}
/* =========================================================
CASHBACK CU ICON DE PORTMONEU ÎN PALETA NOASTRĂ (#3B9797)
========================================================= */
.product-cashback{
display:flex;
align-items:center;
gap:7px;
margin-bottom:16px;
font-size:0.83rem;
color:var(--ink);
font-weight:400;
user-select:none;
line-height:1;
}
.product-cashback i.fa-wallet{
color:var(--coral);
font-size:0.92rem;
flex-shrink:0;
transition:color .2s var(--ease);
}
.product-card:hover .product-cashback i.fa-wallet{
color:var(--coral-dark);
}
.product-cashback span.cb-label{
color:var(--ink);
}
.product-description-hidden{display:none;}
.product-card-actions{
margin-top:auto;
display:flex;
align-items:center;
gap:8px;
width:100%;
}
.product-card .btn-add-cart{
flex:1;
background:var(--gray-btn-bg);
color:var(--gray-btn-text);
border:1px solid var(--border-color);
padding:.6em .7em;
font-weight:500;
font-size:.85rem;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
transition:all .2s var(--ease);
}
.product-card .btn-add-cart:hover{
background:var(--gray-btn-hover);
color:#fff;
border-color:var(--gray-btn-hover);
}
.product-card .btn-wishlist{
width:36px;
height:36px;
flex-shrink:0;
background:var(--gray-btn-bg);
color:var(--gray-btn-text);
border:1px solid var(--border-color);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:.95rem;
transition:all .2s var(--ease);
}
.product-card .btn-wishlist:hover{
background:var(--gray-btn-hover);
color:#fff;
border-color:var(--gray-btn-hover);
}
.product-card .btn-wishlist.active{
color:var(--coral-dark);
background:#fff;
border-color:var(--coral-dark);
}
.product-card .btn-add-cart.active{
background:var(--coral);
color:#fff;
border-color:var(--coral);
}
.product-card .btn-add-cart.active:hover{
background:var(--coral-dark);
border-color:var(--coral-dark);
}
/* Partner CTA */
.partner-cta-seamless{
background:#ffffff;
padding: 1.0cm 0;
position:relative;
}
.partner-cta-wrapper{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:45px;
align-items:center;
background:#ffffff;
box-shadow: 0 10px 35px -5px rgba(0, 31, 63, 0.05);
padding: 34px 40px;
position:relative;
border: 1px solid var(--border-color);
}
.partner-cta-wrapper::before{
content:'';
position:absolute;
left:0;
top:15%;
bottom:15%;
width:3px;
background:var(--coral);
}
.partner-cta-info{
text-align:left;
}
.partner-cta-info .cta-badge{
display:inline-block;
font-size:.78rem;
text-transform:uppercase;
font-weight:700;
color:var(--coral-dark);
letter-spacing:1px;
margin-bottom:8px;
}
.partner-cta-info h3{
font-size:clamp(1.45rem, 2.3vw, 1.85rem);
font-weight:900;
line-height:1.2;
margin-bottom:12px;
color:var(--navy) !important;
letter-spacing:-0.3px;
}
.partner-cta-info p{
color:var(--muted);
font-size:.95rem;
line-height:1.55;
margin-bottom:18px;
}
.partner-features-list{
display:flex;
flex-direction:column;
gap:10px;
}
.partner-features-list li{
display:flex;
align-items:center;
gap:10px;
font-size:.88rem;
color:var(--ink);
font-weight:500;
}
.partner-features-list li i{
color:var(--coral-dark);
font-size:.95rem;
}
.partner-cta-form-box{
background:#ffffff;
padding: 10px 0 10px 10px;
}
.partner-inline-form{
display:flex;
flex-direction:column;
gap:12px;
}
.form-row-2col{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.partner-inline-form input,
.partner-inline-form textarea{
width:100%;
padding:10px 14px;
border:1px solid var(--border-color);
background:#fcfdfd;
font-family:inherit;
font-size:.88rem;
outline:none;
transition:border-color .2s, box-shadow .2s;
}
.partner-inline-form input:focus,
.partner-inline-form textarea:focus{
border-color:var(--coral);
background:#ffffff;
box-shadow:0 0 0 2px rgba(59, 151, 151, 0.18);
}
.partner-inline-form textarea{
resize:vertical;
min-height:70px;
}
.partner-inline-form button{
width:100%;
font-weight:700;
font-size:.92rem;
min-height:42px;
}
.partner-captcha-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.partner-captcha-label{
font-size:.85rem;
color:var(--ink);
white-space:nowrap;
}
.partner-captcha-question{
font-weight:700;
}
.partner-captcha-answer{
max-width:90px;
flex:0 0 auto;
}
/* Blog Grid */
.blog-posts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.blog-post-card{
background:#fff;
overflow:hidden;
border:1px solid var(--border-color);
transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.blog-post-card:hover{
transform:translateY(-3px);
border-color:var(--coral);
box-shadow:0 4px 18px rgba(0, 31, 63, 0.08);
}
.blog-post-img{
position:relative;
display:block;
aspect-ratio:16/10;
overflow:hidden;
}
.blog-post-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s var(--ease);
}
.blog-post-cat{
position:absolute;
top:10px;
left:10px;
background:var(--coral);
color:#ffffff;
font-weight:700;
font-size:.68rem;
padding:4px 8px;
text-transform:uppercase;
letter-spacing:.5px;
z-index:2;
}
.blog-post-body{
padding:14px 16px;
}
.blog-post-date{
display:block;
color:var(--muted);
font-size:.78rem;
font-weight:500;
margin-bottom:5px;
}
.blog-post-body h3{
font-size:.95rem;
line-height:1.35;
margin-bottom:6px;
min-height:2.6em;
font-weight:700;
}
.blog-post-body h3 a{
color:var(--navy) !important;
transition:color .2s var(--ease);
}
.blog-post-body p{
color:var(--muted);
font-size:.85rem;
line-height:1.45;
margin-bottom:10px;
min-height:2.8em;
}
.read-more{
color:var(--coral-dark);
font-weight:700;
font-size:.82rem;
display:inline-flex;
align-items:center;
gap:5px;
transition:gap .2s var(--ease), color .2s var(--ease);
}
/* Footer */
.site-footer{
background:#ffffff;
color:var(--ink);
padding-top:35px;
border-top:1px solid var(--border-color);
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:26px;}
.footer-brand p{color:var(--muted);margin:12px 0 16px;font-size:.88rem;}
.footer-social{display:flex;gap:12px;flex-wrap:wrap;}
.footer-social a{
width:46px;height:46px;
background:var(--cream);
color:var(--navy);
display:flex;align-items:center;justify-content:center;
transition:background .2s, color .2s;
font-size:1.25rem;
border:1px solid var(--border-color);
}
.footer-social a:hover{background:var(--coral);color:#ffffff;}
.footer-col h4{color:var(--navy) !important;font-size:1rem;margin-bottom:12px;font-weight:700;}
.footer-col ul{display:flex;flex-direction:column;gap:8px;}
.footer-col a{color:var(--muted);font-size:.88rem;transition:color .2s;}
.footer-col a:hover{color:var(--coral-dark);}
.hours li{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);}
.footer-bottom{
border-top:1px solid var(--border-color);
padding:14px 0;
text-align:center;
font-size:.82rem;
color:var(--muted);
background:#f8fafc;
}
/* Modale */
.cart-modal-overlay,
.promo-modal-overlay{
position:fixed;inset:0;background:rgba(0, 31, 63, 0.55);z-index:99999;
display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .25s var(--ease);padding:15px;
}
.cart-modal-overlay.active,
.promo-modal-overlay.active{opacity:1;visibility:visible;}
.cart-modal-pandashop {
background: #ffffff !important;
padding: 26px;
position: relative;
width: min(530px, 98%);
border-radius: 4px;
box-shadow: 0 15px 35px rgba(0, 31, 63, 0.2);
text-align: left;
}
.cart-modal-close-pandashop {
position: absolute;
top: 14px;
right: 16px;
font-size: 1.5rem;
color: #888;
cursor: pointer;
line-height: 1;
transition: color .2s;
}
.cart-modal-close-pandashop:hover { color: #000; }
.cart-modal-pandashop h4.modal-pandashop-title {
margin: 0 0 18px 0;
font-size: 1.28rem;
font-weight: 700;
color: #111 !important;
}
.cart-modal-pandashop-body {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 22px;
}
.cart-modal-pandashop-img {
width: 110px;
height: 110px;
object-fit: contain;
flex-shrink: 0;
}
.cart-modal-pandashop-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.cart-modal-pandashop-info h5 {
margin: 0 0 3px 0;
font-size: 0.95rem;
font-weight: 500;
color: #222 !important;
line-height: 1.35;
}
.cart-modal-pandashop-rating {
display: flex;
gap: 2px;
color: #ccc;
font-size: 0.8rem;
margin-bottom: 4px;
}
.cart-modal-pandashop-badge {
display: inline-block;
background: #2d6a4f;
color: #ffffff;
font-weight: 700;
font-size: 0.72rem;
padding: 2px 6px;
border-radius: 2px;
}
.cart-modal-pandashop-prices {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 2px;
}
.cart-modal-pandashop-price-old {
color: #888;
text-decoration: line-through;
font-size: 0.88rem;
}
.cart-modal-pandashop-price-now {
color: #000;
font-weight: 900;
font-size: 1.35rem;
}
.cart-modal-pandashop-cashback {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.82rem;
color: var(--ink);
margin-top: 4px;
}
.cart-modal-pandashop-cashback i.fa-wallet{
color:var(--coral);
font-size:0.92rem;
}
.cart-modal-pandashop-actions {
display: flex;
gap: 12px;
}
.btn-pandashop-continue {
flex: 1;
background: #ffffff;
color: #333;
border: 1px solid #ccc;
padding: 12px;
font-weight: 500;
font-size: 0.92rem;
border-radius: 3px;
cursor: pointer;
transition: all .2s;
text-align: center;
}
.btn-pandashop-continue:hover {
border-color: #888;
background: #f8f8f8;
}
.btn-pandashop-cart {
flex: 1;
background: #2d6a4f;
color: #ffffff;
border: none;
padding: 12px;
font-weight: 500;
font-size: 0.92rem;
border-radius: 3px;
cursor: pointer;
transition: background .2s;
text-align: center;
text-decoration: none;
display: inline-block;
}
.btn-pandashop-cart:hover {
background: #1b4332;
color: #fff;
}
.promo-modal-overlay .promo-modal.promo-modal-wide {
background: #ffffff !important;
padding: 0 !important;
box-shadow: 0 25px 50px rgba(0, 31, 63, 0.3);
position: relative;
border-top: none !important;
width: min(790px, 95%) !important;
max-width: 790px;
display: flex !important;
flex-direction: row !important;
overflow: hidden;
text-align: left !important;
border-radius: 4px;
}
.promo-modal-close {
position: absolute;
top: 12px;
right: 14px;
width: 34px;
height: 34px;
background: rgba(255, 255, 255, 0.9);
color: var(--navy);
border: 1px solid var(--border-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
z-index: 50;
box-shadow: 0 2px 8px rgba(0, 31, 63, 0.15);
transition: all .2s var(--ease);
}
.promo-modal-close:hover {
background: var(--navy);
color: #ffffff;
border-color: var(--navy);
}
.promo-modal-media {
width: 48% !important;
flex: 0 0 48% !important;
position: relative;
min-height: 100%;
}
.promo-modal-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.promo-modal-content {
width: 52% !important;
flex: 0 0 52% !important;
padding: 34px 28px;
display: flex;
flex-direction: column;
justify-content: center;
background: #ffffff;
text-align: left !important;
}
.promo-badge {
display: inline-block;
align-self: flex-start;
background: var(--cream);
color: var(--navy);
border: 1px solid var(--coral);
font-weight: 700;
padding: 4px 10px;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 10px;
}
.promo-modal-content h3 {
font-size: 1.3rem;
line-height: 1.3;
margin-bottom: 10px;
color: var(--navy) !important;
font-weight: 700;
text-align: left !important;
}
.promo-modal-content p {
color: var(--muted);
font-size: .88rem;
margin-bottom: 16px;
line-height: 1.45;
text-align: left !important;
}
.promo-benefits {
margin: 0 0 22px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 11px;
text-align: left !important;
}
.promo-benefits li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .88rem;
color: var(--ink);
line-height: 1.35;
}
.promo-benefits li i {
color: var(--coral-dark);
font-size: 1.05rem;
margin-top: 2px;
flex-shrink: 0;
}
.btn-register {
width: 100%;
padding: .75em 1.4em;
font-size: .95rem;
text-align: center;
}
/* Back to top */
.back-to-top{
position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:0;
background:var(--coral);color:var(--navy);display:flex;align-items:center;justify-content:center;
font-size:1.15rem;box-shadow:0 8px 20px rgba(106,195,195,.4);z-index:400;
opacity:0;translate:0 12px;pointer-events:none;transition:opacity .3s,translate .3s;
}
.back-to-top.show{opacity:1;}
/* Responsive */
@media (max-width:1200px){
.dog-subcategories-grid{grid-template-columns: repeat(4, 1fr);}
.header-search-wrap{max-width:520px;}
}
/* =========================================================
Pets4Family — Design Tokens (Identic cu index.html)
========================================================= */
/* Exact 1.0cm spațiere conform index */
.section{
padding-top: 1.0cm !important;
padding-bottom: 1.0cm !important;
}
.eyebrow{
display:inline-block;
color:var(--coral-dark) !important;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
font-size:.8rem;
margin-bottom:.5em;
}
.section-heading{text-align:center;max-width:680px;margin:0 auto 34px;}
.section-heading h2{
font-size:clamp(1.45rem, 2.3vw, 1.85rem);
font-weight:900;
letter-spacing:-0.3px;
}
/* Butoane */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
padding:.7em 1.5em;
border-radius:0px;
font-weight:500;font-family:var(--font-display);
font-size:.95rem;transition:all .25s var(--ease);
white-space:nowrap;
min-height:42px;
}
/* Reveal Animation */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
/* Povestea noastră (About Story) */
.about-story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 45px;
align-items: center;
}
.about-story-img img {
width: 100%;
box-shadow: var(--shadow-soft);
border: 1px solid var(--border-color);
}
.about-story-content h1 {
font-size: clamp(1.6rem, 2.5vw, 2.1rem);
line-height: 1.25;
margin-bottom: 14px;
}
.about-story-content p {
color: var(--muted);
font-size: .95rem;
margin-bottom: 1.2em;
line-height: 1.6;
}
/* Avantaje (Why Us) */
.why-us-section {
background: #ffffff;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.why-us-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.why-us-card {
background: #ffffff;
padding: 24px;
border: 1px solid var(--border-color);
text-align: left;
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.why-us-card:hover {
border-color: var(--coral);
box-shadow: 0 4px 18px rgba(0, 31, 63, 0.08);
}
.why-us-icon {
width: 48px;
height: 48px;
background: var(--cream);
color: var(--coral-dark);
font-size: 1.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
transition: background .2s, color .2s;
}
.why-us-card:hover .why-us-icon {
background: var(--coral);
color: #ffffff;
}
.why-us-card h3 {
font-size: 1.1rem;
margin-bottom: 8px;
font-weight: 700;
}
.why-us-card p {
color: var(--muted);
font-size: .88rem;
margin: 0;
line-height: 1.5;
}
/* =========================================================
Partner CTA (Preluat din index.html)
========================================================= */
.partner-cta-seamless{
background:#ffffff;
padding: 1.0cm 0;
position:relative;
}
/* Quick Call CTA */
.cta-box{
background:#ffffff;
padding: 26px 34px;
display:flex;
align-items:center;
gap:24px;
flex-wrap:wrap;
border:1px solid var(--border-color);
box-shadow: var(--shadow-soft);
position: relative;
}
.cta-box::before {
content: '';
position: absolute;
left: 0;
top: 15%;
bottom: 15%;
width: 3px;
background: var(--coral);
}
.cta-img{width:60px;height:60px;object-fit:cover;flex-shrink:0;}
.cta-icon{
width:42px;
height:42px;
background:var(--cream);
color:var(--coral-dark);
font-size:1.1rem;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border-radius: 50%;
}
.cta-text{flex:1;min-width:220px;}
.cta-text h3{margin-bottom:2px;font-size:1.2rem;font-weight: 700;}
.cta-text p{margin:0;color:var(--muted);font-size:.9rem;}
/* Back to Top */
.back-to-top{
position:fixed;right:18px;bottom:18px;width:42px;height:42px;
background:var(--coral);color:#ffffff;display:flex;align-items:center;justify-content:center;
font-size:1rem;z-index:400;opacity:0;transition:all .3s;
}
/* Responsive */
@media (max-width:1024px){
.header-phone-text{display:none;}
.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
}
.section{
padding-top: 1.0cm !important;
padding-bottom: 1.0cm !important;
}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{background:var(--red-hover);}
.form-msg{display:none;align-items:center;gap:8px;padding:12px 16px;border-radius:0px;font-size:.88rem;font-weight:500;margin-bottom:16px;}
.form-msg.show{display:flex;}
.form-msg.success{background:#eef7e1;color:var(--green);border:1px solid #c6e6b3;}
.form-msg.error{background:#fdeceb;color:var(--red);border:1px solid #f9c7c5;}
.action-item:hover, .action-item.active{
color:var(--coral-dark);
}
/* =========================================================
Account Layout & Sidebar
========================================================= */
.account-layout{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:start;}
.account-sidebar{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
padding:24px;
position:sticky;
top:100px;
}
.account-profile{
display:flex;
align-items:center;
gap:14px;
padding-bottom:18px;
margin-bottom:16px;
border-bottom:1px solid var(--border-color);
}
.account-profile img{
width:52px;
height:52px;
border-radius:0px;
object-fit:cover;
flex-shrink:0;
border:1px solid var(--border-color);
}
.account-profile strong{display:block;color:var(--navy) !important;font-family:var(--font-display);font-size:1.05rem;font-weight:700;}
.account-profile span{font-size:.82rem;color:var(--muted);word-break:break-all;}
.account-nav{display:flex;flex-direction:column;gap:5px;}
.account-nav-link{
display:flex;
align-items:center;
gap:12px;
padding:11px 15px;
border-radius:0px;
font-weight:500;
font-size:.9rem;
color:var(--ink);
background:#ffffff;
border:1px solid #f0f4f8;
border-left:4px solid transparent;
text-align:left;
transition:all .2s var(--ease);
}
.account-nav-link:hover{
background:var(--cream);
color:var(--coral-dark);
border-color:var(--border-color);
border-left-color:var(--coral);
}
.account-nav-link.active{
background:var(--cream);
color:var(--navy);
border-color:var(--border-color);
border-left:4px solid var(--coral);
font-weight:700;
}
.nav-icon{font-size:.95rem;width:20px;text-align:center;flex-shrink:0;color:var(--coral-dark);}
.logout-link{
color:var(--red);
margin-top:10px;
border-top:1px solid var(--border-color);
padding-top:14px;
background:transparent;
border-left:4px solid transparent;
}
.logout-link .nav-icon{color:var(--red);}
.logout-link:hover{
background:#fdeceb;
color:var(--red);
border-left-color:var(--red);
}
/* ---------- Content Panels ---------- */
.account-content{min-width:0;}
.account-panel{display:none;}
.account-panel.active{display:block;animation:panelIn .35s var(--ease);}
@keyframes panelIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.account-panel h2{font-size:1.55rem;margin-bottom:.3em;letter-spacing:-0.2px;}
.panel-intro{
color:var(--muted);
margin-bottom:24px;
font-size:.92rem;
line-height:1.55;
}
.panel-subheading{font-size:1.15rem;margin:28px 0 14px;font-weight:700;}
.panel-heading-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
.panel-heading-row h2{margin-bottom:.2em;}
/* ---------- Stat Cards ---------- */
.stats-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;}
.stat-card{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
padding:20px 14px;
text-align:center;
transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.stat-card:hover{
border-color:var(--coral);
box-shadow: 0 4px 18px rgba(0, 31, 63, 0.08);
}
.stat-card-icon{font-size:1.4rem;display:block;margin-bottom:8px;color:var(--coral);}
.stat-card strong{display:block;font-family:var(--font-display);font-weight:900;font-size:1.65rem;color:var(--navy) !important;line-height:1.1;}
.stat-card span{font-size:.8rem;color:var(--muted);font-weight:500;margin-top:4px;display:block;}
/* ---------- Loyalty Card (account page) ---------- */
.loyalty-card-block{background:#ffffff;border:1px solid var(--border-color);box-shadow:var(--shadow-soft);padding:22px 24px;margin-bottom:32px;}
.loyalty-card-block h3{margin:0 0 12px;font-size:1.05rem;font-weight:700;color:var(--navy);}
.loyalty-card-current{display:inline-flex;align-items:center;gap:8px;background:var(--cream);border:1px solid var(--border-color);padding:6px 14px;font-weight:700;color:var(--navy);margin-bottom:14px;}
.loyalty-card-current i{color:var(--coral);}
.loyalty-progress-track{background:var(--cream);height:10px;width:100%;overflow:hidden;margin:10px 0;}
.loyalty-progress-fill{background:var(--coral);height:100%;transition:width .3s var(--ease);}
.loyalty-progress-text{font-size:.85rem;color:var(--muted);margin:0;}
/* ---------- Orders Table ---------- */
.orders-table{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
overflow:hidden;
}
.orders-row{
display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr auto;align-items:center;gap:12px;
padding:14px 20px;background:#fff;border-bottom:1px solid var(--border-color);font-size:.9rem;
}
.orders-row:last-child{border-bottom:none;}
.orders-head{background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.85rem;}
.orders-head span{color:#fff !important;}
.status{display:inline-flex;padding:3px 8px;font-weight:700;font-size:.72rem;width:fit-content;border-radius:2px;}
.status-delivered{background:#eef7e1;color:var(--green);}
.status-transit{background:#fff3e6;color:#c4791f;}
.status-cancelled{background:#fdeceb;color:var(--red);}
.row-link{color:var(--coral-dark);font-weight:700;font-size:.88rem;justify-self:end;background:none;border:none;cursor:pointer;padding:0;transition:color .2s;}
.row-link:hover{color:var(--coral);text-decoration:underline;}
.orders-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;padding:10px 20px 16px;background:#fff;border-bottom:1px solid var(--border-color);}
.orders-row-actions:last-child{border-bottom:none;}
.orders-row-actions-mini{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
/* ---------- Pets Grid ---------- */
.pets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pet-card{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
padding:18px;
text-align:center;
transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pet-card:hover{
border-color:var(--coral);
box-shadow: 0 4px 18px rgba(0, 31, 63, 0.08);
}
.pet-card img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:12px;border:1px solid var(--border-color);}
.pet-card h4{font-size:1.05rem;margin-bottom:3px;font-weight:700;}
.pet-card p{color:var(--muted);font-size:.85rem;margin-bottom:10px;}
/* ---------- Address Cards ---------- */
.address-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.address-card{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
padding:22px;
position:relative;
transition:border-color .2s var(--ease);
}
.address-card:hover{border-color:var(--coral);}
.address-tag{display:inline-block;background:var(--navy);color:#fff;font-size:.7rem;font-weight:700;padding:3px 8px;margin-bottom:10px;border-radius:2px;}
.address-card p{color:var(--ink);font-size:.9rem;line-height:1.65;margin:0 0 12px;}
/* ---------- Forms & Inputs ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group{
margin-bottom:16px;
position:relative;
}
.form-group label{
display:block;
font-weight:500;
font-size:.85rem;
color:var(--navy);
margin-bottom:6px;
}
.form-group input, .form-group select, .form-group textarea{
width:100%;padding:10px 14px;border-radius:0px;border:1px solid var(--border-color);
background:#fcfdfd;font-size:.9rem;color:var(--ink);font-family:inherit;
outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
border-color:var(--coral);box-shadow:0 0 0 2px rgba(59,151,151,.18);background:#fff;
}
.form-group input[type="file"]{padding:8px 12px;background:#fff;cursor:pointer;}
.pet-img-preview-wrap{display:flex;align-items:center;gap:12px;margin-top:8px;}
.pet-img-preview-wrap img{width:60px;height:60px;object-fit:cover;background:var(--cream);border:1px solid var(--border-color);}
/* ---------- Modal System ---------- */
.modal-overlay{
position:fixed;inset:0;z-index:1000;background:rgba(0,31,63,.55);
backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;
padding:20px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease);
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-container{
background:#fff;border-radius:0px;width:min(580px,100%);
max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0,31,63,.2);
transform:translateY(15px);transition:transform .25s var(--ease);position:relative;padding:28px;
border-top:3px solid var(--coral);
}
.modal-overlay.open .modal-container{transform:translateY(0);}
.modal-close{
position:absolute;top:14px;right:16px;width:34px;height:34px;
background:var(--cream);color:var(--navy);display:flex;align-items:center;justify-content:center;
font-size:1.1rem;transition:background .2s,color .2s;cursor:pointer;
}
.modal-close:hover{background:var(--coral);color:#fff;}
.modal-title{font-size:1.3rem;margin-bottom:16px;color:var(--navy) !important;padding-right:30px;}
.order-detail-meta{
display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--cream);
padding:14px;border:1px solid var(--border-color);margin-bottom:18px;font-size:.88rem;
}
.order-detail-meta div strong{display:block;color:var(--navy) !important;}
.order-items-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.order-item-row{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border-color);}
.order-item-row img{width:46px;height:46px;object-fit:cover;background:var(--cream);border:1px solid var(--border-color);}
.order-item-info{flex:1;}
.order-item-info h5{margin:0 0 2px;font-size:.9rem;color:var(--navy) !important;font-weight:700;}
.order-item-info span{font-size:.78rem;color:var(--muted);}
.order-item-price{font-weight:700;color:var(--ink);font-size:.92rem;}
.order-modal-total{
display:flex;justify-content:space-between;align-items:center;
font-family:var(--font-display);font-size:1.15rem;font-weight:700;
padding-top:12px;border-top:1px solid var(--border-color);color:var(--navy) !important;
}
.modal-footer-actions{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:22px;padding-top:16px;border-top:1px solid var(--border-color);flex-wrap:wrap;
}
.modal-inline-confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;background:var(--cream);border:1px solid var(--border-color);font-size:.85rem;color:var(--ink);}
.modal-inline-confirm[hidden]{display:none;}
/* =========================================================
Blog Section Grid (Stil index.html)
========================================================= */
.blog-posts-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:35px;
}
.blog-post-card:hover .blog-post-img img{
transform:scale(1.05);
}
.blog-post-date i{
color:var(--coral-dark);
margin-right:4px;
}
.blog-post-body h3 a:hover{
color:var(--coral-dark) !important;
}
.read-more:hover{
gap:8px;
color:var(--coral);
}
/* Paginare */
.shop-pagination{
display:flex;align-items:center;justify-content:space-between;background:var(--navy);
padding:10px 16px;margin-top:25px;color:#fff;
}
.page-arrow{
width:36px;
height:36px;
border-radius:0px;
background:var(--coral);
color:#ffffff;
font-size:.95rem;
display:flex;
align-items:center;
justify-content:center;
transition:background .2s var(--ease);
flex-shrink:0;
}
.page-arrow:hover{
background:var(--coral-dark);
color:#ffffff;
}
.page-numbers{
display:flex;
gap:16px;
}
.page-numbers a{
color:#94a3b8;
font-weight:700;
font-size:.92rem;
transition:color .2s;
}
.page-numbers a.active,
.page-numbers a:hover{
color:var(--pink);
}
/* =========================================================
Article Layout
========================================================= */
.post-layout{
display:block;
width:100%;
max-width:920px;
margin:0 auto;
}
.post-article{
min-width:0;
}
.post-title{
font-size:clamp(1.6rem, 2.8vw, 2.2rem);
font-weight:900;
letter-spacing:-0.4px;
margin-bottom:14px;
line-height:1.25;
}
.post-featured-img{
overflow:hidden;
margin-bottom:24px;
aspect-ratio:16/9;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
}
.post-featured-img img{
width:100%;
height:100%;
object-fit:cover;
}
.post-meta-row{
display:flex;
flex-wrap:wrap;
gap:16px;
align-items:center;
margin-bottom:24px;
padding-bottom:16px;
border-bottom:1px solid var(--border-color);
}
.post-meta-item{
font-size:.85rem;
color:var(--muted);
font-weight:500;
display:inline-flex;
align-items:center;
gap:6px;
}
.post-meta-item i{
color:var(--coral-dark);
}
.post-meta-cat{
background:var(--coral);
color:#ffffff;
padding:3px 10px;
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.5px;
font-weight:700;
}
.post-body{
color:var(--ink);
line-height:1.75;
font-size:0.98rem;
}
.post-body p{
margin-bottom:18px;
}
.post-body h2{
font-size:1.35rem;
margin:32px 0 14px;
font-weight:700;
color:var(--navy) !important;
}
.post-quote{
background:var(--cream);
border-left:4px solid var(--coral);
padding:20px 24px;
margin:28px 0;
font-style:italic;
font-size:1.05rem;
color:var(--navy);
line-height:1.6;
}
.post-inline-img{
overflow:hidden;
margin:28px 0;
aspect-ratio:16/9;
border:1px solid var(--border-color);
}
.post-inline-img img{
width:100%;
height:100%;
object-fit:cover;
}
.post-tags-row{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:16px;
padding:18px 0;
border-top:1px solid var(--border-color);
border-bottom:1px solid var(--border-color);
margin:32px 0;
align-items:center;
}
.post-tags, .post-share{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
font-size:.85rem;
}
.post-tags span, .post-share span{
color:var(--muted);
font-weight:600;
}
.post-tags a{
background:var(--cream);
color:var(--navy);
padding:5px 12px;
font-weight:500;
font-size:.82rem;
border:1px solid var(--border-color);
transition:all .2s var(--ease);
}
.post-tags a:hover{
background:var(--coral);
color:#ffffff;
border-color:var(--coral);
}
.post-share a{
width:34px;
height:34px;
background:var(--cream);
color:var(--navy);
display:flex;
align-items:center;
justify-content:center;
font-size:.85rem;
border:1px solid var(--border-color);
transition:all .2s var(--ease);
}
.post-share a:hover{
background:var(--coral);
color:#ffffff;
border-color:var(--coral);
}
.post-author-card{
display:flex;
gap:18px;
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
padding:22px;
margin-bottom:32px;
align-items:center;
}
.post-author-card img{
width:64px;
height:64px;
object-fit:cover;
flex-shrink:0;
border:1px solid var(--border-color);
}
.post-author-card h4{
margin-bottom:4px;
font-size:1.05rem;
font-weight:700;
color:var(--navy) !important;
}
.post-author-card p{
margin:0;
color:var(--muted);
font-size:.88rem;
line-height:1.5;
}
.post-nav-links{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-bottom:36px;
}
.post-nav-prev, .post-nav-next{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
padding:18px;
transition:all .2s var(--ease);
}
.post-nav-prev:hover, .post-nav-next:hover{
border-color:var(--coral);
box-shadow:0 4px 18px rgba(0, 31, 63, 0.08);
}
.post-nav-next{
text-align:right;
}
.post-nav-links span{
display:inline-flex;
align-items:center;
gap:6px;
color:var(--coral-dark);
font-weight:700;
font-size:.78rem;
margin-bottom:4px;
text-transform:uppercase;
letter-spacing:.3px;
}
.post-nav-links strong{
display:block;
color:var(--navy);
font-size:.92rem;
line-height:1.35;
font-weight:700;
}
.btn-grey{background:var(--gray-btn-bg);color:var(--gray-btn-text);border:1px solid var(--border-color);}
.btn-grey:hover{background:var(--gray-btn-hover);color:#fff;border-color:var(--gray-btn-hover);}
/* =========================================================
Cart Page Styles
========================================================= */
.cart-table{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
overflow:hidden;
margin-bottom:0;
}
.cart-row{
display:grid;
grid-template-columns:2.5fr 1fr 1.2fr 1fr;
align-items:center;
gap:20px;
padding:20px 24px;
background:#fff;
position:relative;
border-bottom:1px solid var(--border-color);
transition:background .2s var(--ease);
}
.cart-row:last-child{border-bottom:none;}
.cart-row:not(.cart-head):hover{background:#fafcfd;}
/* Cap de tabel */
.cart-head{
background:#f8fafc;
color:var(--navy) !important;
padding:14px 24px;
font-family:var(--font-display);
font-weight:700;
font-size:.85rem;
letter-spacing:.02em;
text-transform:uppercase;
border-bottom:1px solid var(--border-color);
}
.cart-head span{color:var(--navy) !important;}
.col-product{display:flex;align-items:center;gap:20px;padding-left:42px;}
.cart-head .col-product{padding-left:0;}
.product-thumb{
width:90px;
height:90px;
background:#ffffff;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
flex-shrink:0;
border:1px solid var(--border-color);
padding:4px;
}
.product-thumb img{max-width:90%;max-height:90%;object-fit:contain;}
.product-name{
font-family:var(--font-display);
font-weight:700;
color:var(--navy) !important;
font-size:.98rem;
line-height:1.35;
}
.col-price{font-weight:500;color:var(--ink);font-size:.95rem;}
.col-total{font-weight:900;color:var(--navy);font-size:1.1rem;letter-spacing:-0.2px;}
.remove-item{
position:absolute;left:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;
border:1px solid var(--border-color);color:var(--muted);font-size:.82rem;
display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);
background:#ffffff;
}
.remove-item:hover{
background:var(--red);
color:#fff;
border-color:var(--red);
}
/* Stepper Cantitate */
.qty-stepper{
display:inline-flex;align-items:center;border:1px solid var(--border-color);overflow:hidden;
width:fit-content;background:#fff;
}
.qty-btn{
width:34px;height:34px;display:flex;align-items:center;justify-content:center;
font-size:.85rem;color:var(--navy);background:var(--gray-btn-bg);transition:background .2s,color .2s;
}
.qty-btn:hover{background:var(--coral);color:#fff;}
.qty-input{
width:40px;text-align:center;border:none;background:transparent;font-weight:700;color:var(--ink);
font-family:var(--font-body);font-size:.95rem;-moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qty-input:focus{outline:none;}
.cart-row.removing{opacity:0;transform:translateX(20px);transition:opacity .3s,transform .3s;}
.cart-empty{text-align:center;color:var(--muted);padding:40px 0;font-size:1rem;}
.cart-empty a{color:var(--coral-dark);font-weight:700;}
/* Toolbar / Cupon */
.cart-toolbar{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin:24px 0 34px;
background:#ffffff;
padding:18px 24px;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
}
.coupon-input{
flex:1;min-width:200px;max-width:280px;padding:10px 14px;
border:1px solid var(--border-color);background:#fcfdfd;font-size:.88rem;color:var(--ink);
font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;
}
.coupon-input:focus{border-color:var(--coral);box-shadow:0 0 0 2px rgba(59,151,151,.18);background:#fff;}
.checkout-btn{margin-left:auto;}
/* Totals / Sumar Comandă */
.cart-bottom{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
overflow:hidden;
margin-top:20px;
}
.cart-totals{
width:100%;
background:#f8fafc;
padding:20px 28px;
}
.totals-inline{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:30px;}
.totals-item{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.totals-item span{font-size:.75rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.totals-item strong{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.05rem;}
.total-final{padding-left:24px;border-left:1px solid var(--border-color);}
.total-final strong{color:var(--navy);font-weight:900;font-size:1.45rem;letter-spacing:-0.3px;}
/* =========================================================
Subcategorii Pisici Grid (Carduri Lipite — Stil PandaShop)
========================================================= */
.dog-subcategories-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
}
.subcat-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: #ffffff;
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 20px 10px 18px;
height: 100%;
transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
z-index: 1;
overflow: hidden;
}
.subcat-item:hover {
transform: none !important;
box-shadow: 0 4px 18px rgba(0, 31, 63, 0.08);
border-color: var(--coral);
z-index: 5;
}
.subcat-img-wrap {
width: 100%;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
background: #ffffff;
overflow: hidden;
}
.subcat-img-wrap img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
transition: transform .3s var(--ease);
}
.subcat-item:hover .subcat-img-wrap img {
transform: scale(1.05);
}
.subcat-title {
font-family: var(--font-display);
font-size: .95rem;
font-weight: 700;
color: var(--navy) !important;
margin: 0 0 10px;
line-height: 1.35;
min-height: 2.7em;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
transition: color .2s var(--ease);
}
.subcat-item:hover .subcat-title {
color: var(--coral-dark) !important;
}
.subcat-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .82rem;
font-weight: 700;
color: var(--coral-dark);
transition: color .2s var(--ease), gap .2s var(--ease);
margin-top: auto;
}
.subcat-item:hover .subcat-link {
color: var(--coral);
gap: 8px;
}
/* =========================================================
Subcategorii Câini Grid (Carduri Lipite — Stil PandaShop)
========================================================= */
.dog-subcategories-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
}
/* Titluri configurate strict pe 1 singur rând */
.subcat-title {
font-family: var(--font-display);
font-size: clamp(0.75rem, 0.95vw, 0.85rem);
font-weight: 700;
color: var(--navy) !important;
margin: 0;
line-height: 1.25;
min-height: auto;
display: block;
width: 100%;
white-space: nowrap; /* Forțează textul pe un singur rând */
overflow: hidden; /* Previne overflow-ul */
text-overflow: ellipsis; /* Adaugă '...' dacă ecranul este îngust */
text-align: center;
letter-spacing: -0.2px;
transition: color .2s var(--ease);
}
.btn-green{background:var(--green);color:#fff;box-shadow:0 6px 14px -4px rgba(76,166,76,.4);font-weight:700;}
.btn-green:hover{background:var(--green-dark);}
.btn-full{width:100%;}
/* =========================================================
Checkout Layout & Cards
========================================================= */
.checkout-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start;}
.checkout-card{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
padding:26px;
margin-bottom:20px;
}
.checkout-card h2{
font-size:1.25rem;
color:var(--navy) !important;
margin-bottom:18px;
padding-bottom:10px;
border-bottom:1px solid var(--border-color);
font-weight:700;
}
/* Form elements */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.req{
color:var(--coral-dark);
}
.form-group.has-error input, .form-group.has-error select{border-color:var(--red);background:#fff;}
.field-error{
display:none;
color:var(--red);
font-size:.76rem;
font-weight:500;
margin-top:4px;
}
.form-group.has-error .field-error{
display:block;
}
.form-group select{
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:38px;
cursor:pointer;
}
/* Options Grid (Tiles Livrare și Plată) */
.options-tiles{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
gap:10px;
margin-bottom:16px;
}
.tile-option{
position:relative;
border:1px solid var(--border-color);
background:#ffffff;
padding:14px 8px;
text-align:center;
cursor:pointer;
transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:86px;
}
.tile-option input[type="radio"]{
position:absolute;
opacity:0;
pointer-events:none;
}
.tile-option i{
font-size:1.3rem;
color:var(--coral-dark);
transition:color .2s;
}
.tile-option span{
font-size:.8rem;
font-weight:500;
color:var(--navy);
line-height:1.25;
}
.tile-option:hover{
border-color:var(--coral);
background:var(--cream);
}
.tile-option.active{
border:2px solid var(--coral);
background:#ffffff;
box-shadow:0 4px 14px rgba(59,151,151,.12);
}
.tile-option.active span{
font-weight:700;
}
.tile-option.active::after{
content:"\f00c";
font-family:"Font Awesome 6 Free";
font-weight:900;
position:absolute;
top:4px;
right:6px;
font-size:.68rem;
color:var(--coral-dark);
}
/* Dynamic Panel Box */
.dynamic-panel{
background:var(--cream);
border:1px solid var(--border-color);
padding:16px 18px;
margin-top:14px;
}
.dynamic-panel p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5;}
/* Microinvest Credit Box */
.credit-info-box{
background:#ffffff;
border:1px solid var(--coral);
padding:18px 20px;
margin-top:14px;
}
.credit-info-box h4{
color:var(--coral-dark) !important;
font-size:.98rem;
margin-bottom:10px;
display:flex;
align-items:center;
gap:8px;
font-weight:700;
}
/* Order Summary Card Right Side */
.summary-card{
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
padding:26px;
position:sticky;
top:100px;
}
.summary-card h2{
font-size:1.25rem;
color:var(--navy) !important;
margin-bottom:16px;
padding-bottom:10px;
border-bottom:1px solid var(--border-color);
font-weight:700;
}
.order-item-mini{
display:flex;
gap:12px;
align-items:center;
padding-bottom:12px;
margin-bottom:12px;
border-bottom:1px solid var(--border-color);
}
.order-item-mini img{
width:48px;
height:48px;
object-fit:contain;
background:#fff;
border:1px solid var(--border-color);
padding:2px;
}
.order-item-info h4{font-size:.88rem;margin:0 0 2px;color:var(--navy) !important;font-weight:700;}
.summary-line{
display:flex;
justify-content:space-between;
padding:6px 0;
font-size:.88rem;
color:var(--muted);
}
.summary-line.total{
border-top:1px solid var(--border-color);
margin-top:8px;
padding-top:12px;
font-size:1.1rem;
font-weight:700;
color:var(--navy);
}
.summary-line.total strong{color:var(--navy);font-size:1.35rem;font-weight:900;letter-spacing:-0.3px;}
.privacy-note{font-size:.78rem;color:var(--muted);line-height:1.45;margin:16px 0;}
.privacy-note a{color:var(--coral-dark);font-weight:700;}
.privacy-note a:hover{text-decoration:underline;}
/* Butoane & Mesaje */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
padding:.7em 1.5em;
border-radius:0px;
font-weight:500;font-family:var(--font-display);
font-size:.95rem;transition:all .25s var(--ease);
white-space:nowrap;
min-height:42px;
}
/* =========================================================
Contact Info Cards
========================================================= */
.contact-info-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.contact-info-card{
background:#ffffff;
border:1px solid var(--border-color);
padding:26px 20px;
text-align:center;
transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
box-shadow:var(--shadow-soft);
}
.contact-info-card:hover{
border-color:var(--coral);
box-shadow: 0 4px 18px rgba(0, 31, 63, 0.08);
}
.contact-info-icon{
font-size:1.35rem;
display:inline-flex;
width:52px;
height:52px;
align-items:center;
justify-content:center;
background:var(--cream);
margin-bottom:16px;
border:1px solid var(--border-color);
color:var(--coral-dark);
transition:background .2s, color .2s;
}
.contact-info-card:hover .contact-info-icon{
background:var(--coral);
color:#ffffff;
border-color:var(--coral);
}
.contact-info-card h3{
font-size:1.1rem;
margin-bottom:8px;
font-weight:700;
color:var(--navy) !important;
}
.contact-info-card p{
color:var(--muted);
font-size:.88rem;
margin:0;
line-height:1.55;
}
.contact-info-card a{
color:var(--muted);
transition:color .2s;
}
.contact-info-card a:hover{
color:var(--coral-dark);
}
/* =========================================================
Contact Layout: Form + Map
========================================================= */
.contact-layout{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:32px;
align-items:start;
}
.contact-form-card{
background:#fff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
padding:32px;
}
.contact-form-card h2{
font-size:1.55rem;
margin-bottom:.3em;
color:var(--navy) !important;
font-weight:900;
letter-spacing:-0.3px;
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.form-group input,
.form-group textarea{
width:100%;
padding:10px 14px;
border-radius:0px;
border:1px solid var(--border-color);
background:#fcfdfd;
font-size:.9rem;
color:var(--ink);
font-family:inherit;
outline:none;
transition:border-color .2s, box-shadow .2s, background .2s;
}
.form-group input:focus,
.form-group textarea:focus{
border-color:var(--coral);
box-shadow:0 0 0 2px rgba(59,151,151,.18);
background:#fff;
}
.form-group textarea{
resize:vertical;
min-height:120px;
}
.form-group.has-error input,
.form-group.has-error textarea{
border-color:var(--red);
background:#fff;
}
/* Map Embed & Callout */
.contact-map-card{
background:#fff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
overflow:hidden;
}
.map-embed{
width:100%;
aspect-ratio:4/3.8;
background:var(--cream);
}
.map-embed iframe{
width:100%;
height:100%;
border:0;
display:block;
}
.map-callout{
display:flex;
align-items:center;
gap:14px;
padding:18px 20px;
flex-wrap:wrap;
background:#fff;
border-top:1px solid var(--border-color);
}
.map-callout-icon{
font-size:1.35rem;
flex-shrink:0;
color:var(--coral-dark);
}
.map-callout div{
flex:1;
min-width:140px;
}
.map-callout strong{
display:block;
color:var(--navy);
font-family:var(--font-display);
font-size:.95rem;
font-weight:700;
}
.map-callout span{
color:var(--muted);
font-size:.82rem;
}
/* =========================================================
Accordion List (Stil Pets4Family)
========================================================= */
.faq-list{
max-width:860px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:12px;
}
.faq-item{
background:#ffffff;
border:1px solid var(--border-color);
border-radius:0px;
overflow:hidden;
transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item:hover{
border-color:var(--coral);
}
.faq-item.open{
background:#fff;
border-color:var(--coral);
box-shadow:var(--shadow-soft);
}
.faq-question{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px 22px;
text-align:left;
font-family:var(--font-display);
font-weight:700;
font-size:1.02rem;
color:var(--navy) !important;
cursor:pointer;
transition:color .2s;
}
.faq-question:hover{
color:var(--coral-dark) !important;
}
.faq-toggle{
flex-shrink:0;
width:28px;
height:28px;
border-radius:0px;
background:var(--cream);
color:var(--coral-dark);
border:1px solid var(--border-color);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
font-weight:700;
transition:transform .3s var(--ease), background .25s, color .25s, border-color .25s;
}
.faq-item.open .faq-toggle{
background:var(--coral);
color:#ffffff;
border-color:var(--coral);
transform:rotate(45deg);
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .35s var(--ease), padding .35s var(--ease);
padding:0 22px;
}
.faq-item.open .faq-answer{
padding:0 22px 20px;
}
.faq-answer p{
margin:0;
color:var(--muted);
font-size:.92rem;
line-height:1.65;
}
.section-heading p{
color:var(--muted);
font-size:.95rem;
line-height:1.55;
margin-top:6px;
}
/* =========================================================
Delivery & Terms Content Structure
========================================================= */
.delivery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 24px;
}
.delivery-card {
background: #ffffff;
border: 1px solid var(--border-color);
padding: 26px 24px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
box-shadow: var(--shadow-soft);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.delivery-card:hover {
border-color: var(--coral);
box-shadow: 0 4px 18px rgba(0, 31, 63, 0.08);
}
.delivery-icon {
width: 48px;
height: 48px;
background: var(--cream);
color: var(--coral-dark);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin-bottom: 4px;
transition: background .2s, color .2s;
}
.delivery-card:hover .delivery-icon {
background: var(--coral);
color: #ffffff;
border-color: var(--coral);
}
.delivery-card h3 {
font-size: 1.15rem;
margin: 0;
font-weight: 700;
color: var(--navy) !important;
}
.delivery-card p {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.55;
}
.delivery-list {
display: flex;
flex-direction: column;
gap: 9px;
margin-top: 4px;
}
.delivery-list li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 0.88rem;
color: var(--ink);
line-height: 1.45;
}
.delivery-list i {
color: var(--coral-dark);
margin-top: 3px;
font-size: 0.92rem;
flex-shrink: 0;
}
/* Banner Informativ Suplimentar */
.info-banner {
background: #ffffff;
border: 1px solid var(--border-color);
border-left: 4px solid var(--coral);
padding: 22px 26px;
margin-top: 24px;
display: flex;
gap: 18px;
align-items: flex-start;
box-shadow: var(--shadow-soft);
}
.info-banner i {
font-size: 1.4rem;
color: var(--coral-dark);
margin-top: 2px;
flex-shrink: 0;
}
.info-banner h4 {
margin: 0 0 4px;
font-size: 1.05rem;
font-weight: 700;
color: var(--navy) !important;
}
.info-banner p {
margin: 0;
font-size: 0.9rem;
color: var(--muted);
line-height: 1.55;
}
/* Responsive Breakpoints */
@media (max-width:1100px){
.delivery-grid{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
}
/* =========================================================
FAQ Filter & Search
========================================================= */
.faq-search{
position:relative;
max-width:640px;
margin:0 auto 26px;
}
.faq-search-icon{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
color:var(--coral-dark);
font-size:1rem;
}
.faq-search input{
width:100%;
padding:11px 18px 11px 44px;
border-radius:0px;
border:1px solid var(--border-color);
background:#fcfdfd;
font-family:inherit;
font-size:.92rem;
color:var(--ink);
outline:none;
transition:border-color .2s, box-shadow .2s, background .2s;
}
.faq-search input:focus{
border-color:var(--coral);
box-shadow:0 0 0 2px rgba(59,151,151,.18);
background:#fff;
}
.faq-tabs{
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
margin-bottom:32px;
}
.faq-tab{
padding:.55em 1.25em;
border-radius:0px;
font-family:var(--font-display);
font-weight:500;
font-size:.88rem;
background:var(--gray-btn-bg);
color:var(--navy);
border:1px solid var(--border-color);
transition:all .2s var(--ease);
cursor:pointer;
}
.faq-tab:hover{
background:#fff;
border-color:var(--coral);
color:var(--coral-dark);
}
.faq-tab.active{
background:var(--coral);
color:#ffffff;
border-color:var(--coral);
font-weight:700;
}
.faq-empty{
text-align:center;
color:var(--muted);
max-width:520px;
margin:0 auto 30px;
font-size:.92rem;
}
.faq-empty a{
color:var(--coral-dark);
font-weight:700;
}
input{font-family:inherit;}
.btn-primary:disabled{opacity:.7;transform:none;cursor:progress;}
/* =========================================================
Auth Layout (Stil Pets4Family)
========================================================= */
.auth-wrap{padding:1.0cm 0;}
.auth-card{
width:min(1000px,94%);
margin-inline:auto;
background:#ffffff;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
overflow:hidden;
display:grid;
grid-template-columns:1fr 1fr;
min-height:580px;
}
/* Decorative Side Panel */
.auth-visual{
position:relative;
color:#fff;
padding:44px 38px;
display:flex;
flex-direction:column;
justify-content:space-between;
background:linear-gradient(155deg, rgba(0,31,63,.92), rgba(0,31,63,.68) 60%, rgba(0,31,63,.35)),
url('https://images.unsplash.com/photo-1517849845537-4d257902861a?q=80&w=1200&auto=format&fit=crop');
background-size:cover;
background-position:center;
}
.auth-visual-top .eyebrow{
color:var(--pink) !important;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
font-size:.78rem;
display:block;
margin-bottom:.5em;
}
.auth-visual-top h2{
color:#ffffff !important;
font-size:clamp(1.5rem, 2.4vw, 1.95rem);
max-width:340px;
margin:0;
line-height:1.25;
font-weight:900;
}
.auth-visual-bottom{
background:rgba(0,31,63,.45);
backdrop-filter:blur(8px);
padding:18px 20px;
border:1px solid rgba(255,255,255,.18);
}
.auth-visual-bottom p{
margin:0 0 10px;
font-size:.9rem;
color:#f1f5f9;
line-height:1.55;
}
.auth-visual-author{
display:flex;
align-items:center;
gap:12px;
}
.auth-visual-author img{
width:38px;
height:38px;
object-fit:cover;
border:1px solid rgba(255,255,255,.4);
}
.auth-visual-author strong{
display:block;
font-family:var(--font-display);
font-size:.92rem;
font-weight:700;
color:#ffffff !important;
}
.auth-visual-author span{
font-size:.78rem;
color:var(--pink);
}
/* Form Panel */
.auth-form-panel{
padding:40px 38px;
display:flex;
flex-direction:column;
background:#ffffff;
}
.auth-tabs{
display:flex;
background:var(--gray-btn-bg);
border:1px solid var(--border-color);
padding:3px;
margin-bottom:26px;
}
.auth-tab{
flex:1;
text-align:center;
padding:.65em 1em;
font-family:var(--font-display);
font-weight:500;
font-size:.92rem;
color:var(--muted);
transition:all .2s var(--ease);
cursor:pointer;
}
.auth-tab.active{
background:var(--coral);
color:#ffffff;
font-weight:700;
}
.auth-panes{
position:relative;
flex:1;
}
.auth-pane{
display:none;
}
.auth-pane.active{
display:block;
animation:paneIn .35s var(--ease);
}
@keyframes paneIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.auth-pane h1{
font-size:1.55rem;
margin-bottom:.25em;
font-weight:900;
letter-spacing:-0.3px;
color:var(--navy) !important;
}
.auth-sub{
color:var(--muted);
font-size:.88rem;
margin-bottom:22px;
}
.field{
margin-bottom:16px;
position:relative;
}
.field label{
display:block;
font-weight:500;
font-size:.85rem;
color:var(--navy);
margin-bottom:6px;
}
.field input{
width:100%;
padding:10px 14px;
border:1px solid var(--border-color);
background:#fcfdfd;
font-size:.9rem;
color:var(--ink);
outline:none;
transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus{
border-color:var(--coral);
box-shadow:0 0 0 2px rgba(59,151,151,.18);
background:#fff;
}
.field input.invalid{
border-color:var(--red);
}
.field.has-error .field-error{
display:block;
}
.field.has-error input{
border-color:var(--red);
background:#fff;
}
.field-icon-wrap{
position:relative;
}
.field-icon-wrap input{
padding-right:42px;
}
.toggle-pass{
position:absolute;
right:4px;
top:50%;
transform:translateY(-50%);
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
font-size:.9rem;
transition:color .2s;
}
.toggle-pass:hover{
color:var(--coral-dark);
}
.field-row{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
flex-wrap:wrap;
gap:8px;
}
.checkbox-line{
display:flex;
align-items:center;
gap:8px;
font-size:.85rem;
color:var(--muted);
cursor:pointer;
}
.checkbox-line input{
width:15px;
height:15px;
accent-color:var(--coral-dark);
cursor:pointer;
}
.link-inline{
color:var(--coral-dark);
font-weight:700;
font-size:.85rem;
transition:color .2s;
}
.link-inline:hover{
color:var(--coral);
text-decoration:underline;
}
.strength-meter{
height:3px;
background:var(--border-color);
margin-top:6px;
overflow:hidden;
}
.strength-meter span{
display:block;
height:100%;
width:0%;
background:var(--red);
transition:width .3s var(--ease), background .3s var(--ease);
}
.strength-label{
font-size:.76rem;
color:var(--muted);
margin-top:4px;
display:block;
}
.divider{
display:flex;
align-items:center;
gap:12px;
margin:20px 0;
color:var(--muted);
font-size:.8rem;
}
.divider::before,.divider::after{
content:"";
flex:1;
height:1px;
background:var(--border-color);
}
.social-row{
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.social-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:.65em 1em;
border:1px solid var(--border-color);
font-weight:500;
font-size:.88rem;
color:var(--navy);
background:#ffffff;
transition:border-color .2s, background .2s;
}
.social-btn i{font-size:.95rem;}
.social-btn.gg i{color:#ea4335;}
.social-btn:hover{
border-color:var(--coral);
background:var(--cream);
}
.switch-line{
text-align:center;
margin-top:20px;
font-size:.88rem;
color:var(--muted);
}
.switch-line button{
color:var(--coral-dark);
font-weight:700;
}
.switch-line button:hover{
color:var(--coral);
text-decoration:underline;
}
/* =========================================================
Pets4Family — Design Tokens (Turquoise Palette & PandaShop Typography)
========================================================= */
/* =========================================================
Buttons
========================================================= */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
padding:.75em 1.5em;
border-radius:0px;
font-weight:700;font-family:var(--font-display);
font-size:.95rem;transition:all .25s var(--ease);
white-space:nowrap;
min-height:42px;
}
/* =========================================================
Header
========================================================= */
.site-header{
position:sticky;
top:0;
z-index:500;
background:#fff;
box-shadow:0 2px 12px rgba(10,25,47,.08);
}
.main-header{
padding:14px 0;
}
/* =========================================================
Product Single Details
========================================================= */
.product-page-header{
margin-top: 4px;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
.product-page-header h1{
font-size: clamp(1.4rem, 2.3vw, 1.8rem);
margin: 0 0 4px;
font-weight: 700;
}
.page-breadcrumb{
font-size: .85rem;
color: var(--muted);
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.page-breadcrumb a{color:var(--muted);transition:color .2s;}
.page-breadcrumb a:hover{color:var(--coral-dark);}
.product-top-grid{
display:grid;
grid-template-columns: 1fr 460px;
gap:36px;
align-items:start;
margin-bottom:40px;
}
/* Galerie Foto Verticală */
.product-gallery-vertical{
display:flex;
gap:20px;
align-items:flex-start;
}
.thumbs-vertical-wrapper{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
width:76px;
flex-shrink:0;
}
.thumb-scroll-btn{
width:100%;
height:28px;
background:var(--cream);
border:none;
color:var(--navy);
display:flex;
align-items:center;
justify-content:center;
font-size:.8rem;
transition:background .2s;
}
.thumb-scroll-btn:hover{background:var(--coral);color:var(--navy);}
.thumbs-vertical-list{
display:flex;
flex-direction:column;
gap:10px;
max-height:420px;
overflow-y:auto;
scrollbar-width:none;
}
.thumbs-vertical-list::-webkit-scrollbar{display:none;}
.gallery-thumb-v{
width:74px;
height:74px;
background:#fff;
border:1px solid var(--border-color);
padding:4px;
cursor:pointer;
transition:all .2s;
flex-shrink:0;
opacity: 0.7;
}
.gallery-thumb-v img{
width:100%;
height:100%;
object-fit:contain;
}
.gallery-thumb-v.active, .gallery-thumb-v:hover{
opacity: 1;
border-color: var(--coral-dark);
}
.main-image-display{
flex:1;
background:#fff;
border:1px solid var(--border-color);
aspect-ratio:1/1;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
position:relative;
}
.main-image-display img{
max-width:100%;
max-height:100%;
object-fit:contain;
transition:opacity .25s ease;
}
/* Caseta de Cumpărare */
.buy-box-card{
background:#fff;
border:none;
padding:0;
}
.buy-box-header{
display:flex;
align-items:center;
justify-content:flex-end;
margin-bottom:12px;
font-size:.85rem;
border-bottom:1px solid var(--border-color);
padding-bottom:8px;
}
.product-code{
color:var(--muted);
font-weight:500;
}
.buy-price-block{
display:flex;
align-items:baseline;
gap:10px;
margin-bottom:10px;
}
.buy-price-current{
font-family:var(--font-display);
font-size:2.2rem;
font-weight:900;
color:var(--navy);
line-height:1;
}
.buy-price-current small{
font-size:1.2rem;
font-weight:700;
color:var(--coral-dark);
}
.cashback-badge{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--navy);
font-size:.88rem;
font-weight:700;
margin-bottom:20px;
}
.cashback-badge i{
color:var(--coral-dark);
}
.variant-selector{
margin-bottom:22px;
}
.variant-label{
font-size:.88rem;
font-weight:700;
color:var(--navy);
margin-bottom:10px;
display:block;
}
.variant-options{
display:flex;
gap:14px;
flex-wrap:wrap;
}
.variant-item{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}
.variant-btn{
position:relative;
border:1px solid var(--border-color);
padding:4px;
background:#fff;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
width:74px;
height:74px;
transition:border-color .2s;
}
.variant-btn img{
width:100%;
height:100%;
object-fit:contain;
}
.variant-check-icon{
position:absolute;
top:-6px;
right:-6px;
width:20px;
height:20px;
background:var(--green);
color:#fff;
border-radius:50%;
display:none;
align-items:center;
justify-content:center;
font-size:.68rem;
box-shadow:0 2px 6px rgba(0,0,0,.15);
z-index:3;
}
.variant-btn.active{
border:1px solid #9ca3af;
}
.variant-btn.active .variant-check-icon{
display:flex;
}
.variant-weight-title{
font-size:.8rem;
font-weight:700;
color:var(--navy);
}
.action-purchase-group{
display:flex;
gap:10px;
align-items:center;
margin-bottom:24px;
}
.stepper-box{
display:inline-flex;
align-items:center;
border:1px solid var(--border-color);
background:var(--cream);
height:46px;
}
.stepper-btn{
width:36px;
height:100%;
display:flex;
align-items:center;
justify-content:center;
font-size:.9rem;
color:var(--navy);
transition:background .2s;
}
.stepper-btn:hover{background:var(--coral);color:var(--navy);}
.stepper-input{
width:38px;
height:100%;
border:none;
border-left:1px solid var(--border-color);
border-right:1px solid var(--border-color);
text-align:center;
font-weight:700;
font-family:var(--font-display);
background:#fff;
font-size:1rem;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.btn-add-cart-large{
flex:1;
background:var(--green);
color:#fff;
font-size:.95rem;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:46px;
transition:background .25s;
padding:0 16px;
}
.btn-add-cart-large:hover{
background:var(--green-dark);
}
.btn-icon-action{
width:46px;
height:46px;
border:1px solid var(--border-color);
background:#fff;
color:var(--navy);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
transition:all .2s;
flex-shrink:0;
}
.btn-icon-action:hover{
border-color:var(--coral);
background:var(--cream);
color:var(--coral-dark);
}
.btn-icon-action.active{
color:var(--coral-dark);
border-color:var(--coral-dark);
background:#fff;
}
.shipping-box{
background:var(--cream);
border:1px solid var(--border-color);
padding:16px;
display:flex;
flex-direction:column;
gap:12px;
}
.shipping-option{display:flex;align-items:flex-start;gap:12px;}
.shipping-option i{color:var(--coral-dark);font-size:1.1rem;margin-top:2px;}
.shipping-text h5{margin:0 0 2px;font-size:.9rem;color:var(--navy) !important;}
.shipping-text p{margin:0;font-size:.82rem;color:var(--muted);}
.shipping-link-btn{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:6px;
font-size:.85rem;
font-weight:700;
color:var(--coral-dark);
transition:color .2s;
}
.shipping-link-btn:hover{color:var(--navy);text-decoration:underline;}
/* Modal Share */
.modal-overlay{
position:fixed;
inset:0;
background:rgba(10,25,47,.6);
backdrop-filter:blur(3px);
z-index:999;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.modal-card{
background:#fff;
width:min(440px, 92%);
padding:28px;
border:1px solid var(--border-color);
box-shadow:var(--shadow-soft);
position:relative;
transform:translateY(15px);
transition:transform .3s var(--ease);
}
.modal-overlay.open .modal-card{transform:translateY(0);}
.modal-card h3{font-size:1.3rem;margin-bottom:6px;}
.modal-card p{font-size:.88rem;color:var(--muted);margin-bottom:20px;}
.share-networks-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:12px;
margin-bottom:22px;
}
.share-net-btn{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
font-size:.78rem;
font-weight:700;
color:var(--navy);
transition:transform .2s;
}
.share-net-btn:hover{transform:translateY(-2px);}
.share-net-icon{
width:48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:1.3rem;
}
.share-net-icon.fb{background:#1877f2;}
.share-net-icon.wa{background:#25d366;}
.share-net-icon.tg{background:#229ed9;}
.share-net-icon.email{background:var(--navy);}
.copy-link-box{
display:flex;
align-items:center;
border:1px solid var(--border-color);
background:var(--cream);
padding:4px 4px 4px 12px;
}
.copy-link-box input{
border:none;
background:transparent;
width:100%;
font-size:.85rem;
color:var(--muted);
outline:none;
}
.copy-link-box button{
background:var(--coral);
color:var(--navy);
font-weight:700;
font-size:.82rem;
padding:8px 14px;
transition:background .2s;
}
.copy-link-box button:hover{background:var(--coral-dark);color:#fff;}
/* Product Tabs */
.product-tabs-wrap{background:var(--white);border:1px solid var(--border-color);padding:0;scroll-margin-top:100px;margin-bottom:60px;}
.product-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-color);background:var(--cream);}
.product-tab{
padding:1em 2em;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--navy);
background:transparent;border:none;border-right:1px solid var(--border-color);transition:background .2s,color .2s;
}
.product-tab.active{background:#fff;color:var(--coral-dark);border-bottom:2px solid var(--coral);}
.product-tab:hover:not(.active){background:#fff;}
.product-tab-panel{display:none;padding:28px 30px;color:var(--muted);line-height:1.75;}
.product-tab-panel.active{display:block;}
.product-tab-panel p+p{margin-top:14px;}
.info-table{width:100%;border-collapse:collapse;}
.info-table th,.info-table td{text-align:left;padding:12px 0;border-bottom:1px solid var(--border-color);font-size:.92rem;}
.info-table th{color:var(--navy);font-weight:700;width:200px;}
.info-table td{color:var(--muted);}
/* =========================================================
PANDASHOP / PETS4FAMILY PRODUCT CARDS & GRIDS
========================================================= */
.section-title{
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
margin-bottom: 24px;
text-align: left;
font-weight: 700;
}
.products-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap: 0;
border-top: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
margin-bottom: 50px;
}
.no-results-msg{
grid-column: 1 / -1;
text-align: center;
padding: 70px 24px;
font-size: 1.05rem;
font-weight: 600;
color: var(--navy);
opacity: .65;
}
.product-price-box{
margin-bottom:6px;
text-align:left;
display:flex;
align-items:baseline;
gap:6px;
}
/* =========================================================
CTA
========================================================= */
.cta-box{
background:var(--cream);padding:28px 36px;
display:flex;align-items:center;gap:22px;flex-wrap:wrap;
border:1px solid var(--border-color);
}
/* =========================================================
Footer
========================================================= */
.site-footer{
background:#ffffff;
color:var(--ink);
padding-top:45px;
border-top:1px solid var(--border-color);
}
/* Modal PandaShop - Adăugat în Coș */
.cart-modal-overlay{
position:fixed;inset:0;background:rgba(0, 0, 0, 0.55);z-index:99999;
display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .25s var(--ease);padding:15px;
}
.cart-modal-overlay.active{opacity:1;visibility:visible;}
.cart-modal-pandashop-cashback-box {
display: inline-block;
width: 12px;
height: 12px;
background: #e67e22;
border-radius: 1px;
}
.back-to-top{
position:fixed;right:18px;bottom:18px;width:42px;height:42px;
background:var(--coral);color:var(--navy);display:flex;align-items:center;justify-content:center;
font-size:1rem;z-index:400;opacity:0;transition:all .3s;
}
/* Responsive Styles */
@media (max-width:1200px){
.products-grid{grid-template-columns:repeat(4, 1fr);}
}
/* Breadcrumb & Category Header */
.category-header {
margin-bottom: 20px;
}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--pink);}
.breadcrumb a {
color: var(--muted);
transition: color 0.2s;
}
.breadcrumb a:hover {
color: var(--coral-dark);
}
.category-title {
font-size: clamp(1.4rem, 2.3vw, 1.85rem);
margin: 0;
font-weight: 700;
letter-spacing: -0.3px;
}
/* =========================================================
Shop Layout & Toolbar
========================================================= */
.shop-layout{
display:grid;
grid-template-columns:260px 1fr;
gap:25px;
align-items:start;
}
.shop-main{min-width:0;order:2;}
.shop-sidebar{order:1;}
.shop-toolbar-panda{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
padding-bottom:10px;
gap:15px;
flex-wrap:wrap;
}
.toolbar-left{
display:flex;
align-items:center;
gap:16px;
}
.btn-reset-filters{
font-size:0.84rem;
color:var(--muted);
display:inline-flex;
align-items:center;
gap:5px;
cursor:pointer;
transition:color .2s;
padding:4px 0;
font-weight:500;
}
.btn-reset-filters:hover{
color:var(--coral-dark);
}
.sort-select-panda{
padding:7px 28px 7px 12px;
border:1px solid var(--border-color);
background:#fff;
border-radius:0px;
font-size:0.86rem;
color:var(--ink);
font-family:inherit;
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 10px center;
background-size:12px;
cursor:pointer;
outline:none;
min-width:180px;
transition:border-color .2s;
}
.sort-select-panda:focus{
border-color:var(--coral);
}
.toolbar-right{
display:flex;
align-items:center;
gap:16px;
}
.results-count-panda{
margin:0;
color:var(--muted);
font-size:0.85rem;
font-weight:400;
}
.view-switchers{
display:inline-flex;
align-items:center;
gap:4px;
}
.view-btn{
width:32px;
height:32px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--border-color);
color:var(--muted);
background:#fff;
border-radius:0px;
cursor:pointer;
font-size:0.9rem;
transition:all .2s;
}
.view-btn:hover{
color:var(--navy);
border-color:var(--navy);
}
.view-btn.active{
color:#ffffff;
background:var(--navy);
border-color:var(--navy);
}
.filter-toggle-btn{
display:none;
align-items:center;
gap:6px;
background:var(--gray-btn-bg);
border:1px solid var(--border-color);
color:var(--navy);
padding:7px 12px;
font-size:0.84rem;
font-weight:600;
}
/* =========================================================
Products Grid & Mod LIST
========================================================= */
.products-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:0;
border-top:1px solid var(--border-color);
border-left:1px solid var(--border-color);
transition:all .3s var(--ease);
}
/* Card în modul GRID */
.product-card{
position:relative;
background:#ffffff;
padding:16px;
display:flex;
flex-direction:column;
text-align:left;
border-right:1px solid var(--border-color);
border-bottom:1px solid var(--border-color);
transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
z-index:1;
}
.product-card:hover .product-thumb-lg img{
transform:scale(1.04);
}
.product-card-content{
display:flex;
flex-direction:column;
flex:1;
width:100%;
}
.product-card:hover .product-title a{
color:var(--coral-dark) !important;
}
/* STILURI SPECIFICE PENTRU MODUL LISTĂ (.list-view) */
.products-grid.list-view {
grid-template-columns: 1fr !important;
}
.products-grid.list-view .product-card {
flex-direction: row;
align-items: center;
padding: 18px 24px;
gap: 28px;
}
.products-grid.list-view .product-thumb-lg {
width: 180px;
height: 180px;
aspect-ratio: 1 / 1;
flex: 0 0 180px;
margin-bottom: 0;
background: #ffffff;
border: 1px solid var(--border-color);
padding: 8px;
}
.products-grid.list-view .product-card-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex: 1;
}
.products-grid.list-view .product-title {
font-size: 1.1rem;
font-weight: 500;
min-height: auto;
margin-bottom: 8px;
}
.products-grid.list-view .product-price-box {
margin-bottom: 6px;
}
.products-grid.list-view .price-now {
font-size: 1.4rem;
}
.products-grid.list-view .product-cashback {
font-size: 0.85rem;
margin-bottom: 14px;
}
.products-grid.list-view .product-card-actions {
width: auto;
max-width: 320px;
margin-top: 0;
}
.page-numbers a.active,.page-numbers a:hover{color:var(--pink);}
/* =========================================================
Sidebar & Filtre
========================================================= */
.shop-sidebar{display:flex;flex-direction:column;gap:14px;}
.shop-overlay{display:none;}
.sidebar-close{display:none;}
.filter-section{
background:#ffffff;
border:1px solid var(--border-color);
padding:14px 16px;
}
.filter-section h3{
font-size:0.92rem;
font-weight:700;
color:var(--navy) !important;
margin-bottom:12px;
display:flex;
align-items:center;
justify-content:space-between;
}
.price-single-row{
display:flex;
align-items:center;
gap:8px;
width:100%;
}
.price-inline-field{
display:flex;
align-items:center;
flex:1;
border:1px solid var(--border-color);
background:#ffffff;
padding:4px 8px;
transition:border-color .2s;
}
.price-inline-field:focus-within{
border-color:var(--coral);
}
.price-inline-field span{
font-size:0.75rem;
color:var(--muted);
margin-right:5px;
white-space:nowrap;
user-select:none;
}
.price-inline-field input{
width:100%;
border:none;
outline:none;
font-size:0.85rem;
font-family:inherit;
color:var(--ink);
background:transparent;
padding:0;
min-width:0;
}
.price-dash{
color:var(--muted);
font-size:0.85rem;
}
.filter-subsearch{
display:flex;
align-items:center;
background:#fff;
border:1px solid var(--border-color);
margin-bottom:10px;
padding:6px 10px;
}
.filter-subsearch input{
width:100%;border:none;outline:none;font-size:0.85rem;font-family:inherit;background:transparent;color:var(--ink);
}
.filter-subsearch i{color:var(--muted);font-size:0.85rem;}
.filter-options{
display:flex;
flex-direction:column;
gap:8px;
max-height:180px;
overflow-y:auto;
scrollbar-width:thin;
padding-right:4px;
}
.filter-options::-webkit-scrollbar{width:4px;}
.filter-options::-webkit-scrollbar-thumb{background:var(--border-color);}
.filter-item{
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
font-size:0.85rem;
color:var(--ink);
transition:color .2s;
}
.filter-item:hover{color:var(--coral-dark);}
.filter-item-left{
display:flex;
align-items:center;
gap:8px;
user-select:none;
}
.filter-checkbox{
appearance:none;
width:15px;
height:15px;
border:1px solid #b0bec5;
background:#fff;
display:grid;
place-content:center;
transition:background .2s, border-color .2s;
margin:0;
cursor:pointer;
}
.filter-checkbox::before{
content:"";width:7px;height:7px;transform:scale(0);transition:120ms transform ease-in-out;box-shadow:inset 1em 1em var(--navy);
}
.filter-checkbox:checked{background:#fff;border-color:var(--navy);}
.filter-checkbox:checked::before{transform:scale(1);}
.filter-count{
font-size:0.75rem;color:var(--muted);background:var(--cream);padding:1px 5px;
}
/* Responsive Breakpoints */
@media (max-width:1200px){
.products-grid:not(.list-view){grid-template-columns:repeat(3, 1fr);}
.header-search-wrap{max-width:520px;}
}
/* =========================================================
Pets4Family — Design Tokens (Turquoise Palette)
========================================================= */
/* Top Bar */
.topbar{
background:#f8fafc;
border-bottom:1px solid var(--border-color);
font-size:.85rem;
color:var(--muted);
}
/* Logo mărit */
.logo{
display:flex;
align-items:center;
flex-shrink:0;
}
/* =========================================================
Accordion List (Dreptunghiular)
========================================================= */
.faq-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
/* =========================================================
Footer (Alb cu Text Negru)
========================================================= */
.site-footer{
background:#ffffff;
color:var(--ink);
padding-top:50px;
border-top:1px solid var(--border-color);
}
/* Responsive Styles */
@media (max-width:1024px){
.header-phone-text{display:none;}
.footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
}
/* Toate titlurile generale sunt de culoare albastru închis (#0a192f) */
h1,h2,h3,h4,h5,h6{
font-family:var(--font-display);
margin:0 0 .5em;
line-height:1.15;
color:var(--navy) !important;
}
/* Texte eyebrow setate la albastru închis */
.eyebrow{
display:inline-block;
color:var(--navy) !important;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
font-size:.85rem;
margin-bottom:.6em;
}
/* =========================================================
Buttons (Colțuri Drepte / Sharp)
========================================================= */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
padding:.9em 1.8em;
border-radius:0px !important;
font-weight:700;font-family:var(--font-display);
font-size:.95rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
white-space:nowrap;
min-height:44px;
}
/* =========================================================
Preloader
========================================================= */
#preloader{
position:fixed;inset:0;z-index:9999;background:var(--coral);
display:flex;align-items:center;justify-content:center;
transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
#preloader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.preloader-circle{
width:76px;height:76px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
display:flex;align-items:center;justify-content:center;
animation:pulse 1.1s ease-in-out infinite;
}
.paw-icon{font-size:26px;color:#ffffff;animation:pawBounce 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.12);opacity:.75;}}
@keyframes pawBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
/* =========================================================
Header & Nav (Sincronizat 100% cu celelalte pagini)
========================================================= */
.site-header{position:sticky;top:0;z-index:500;}
.topbar-info{display:flex;gap:22px;flex-wrap:wrap;min-width:0;}
.topbar-info li{white-space:nowrap;display:flex;align-items:center;gap:7px;}
.topbar-info i{color:var(--pink);font-size:.85rem;}
.topbar-social{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.topbar-social a{width:28px;height:28px;border-radius:0px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:background .2s;flex-shrink:0;}
.topbar-social a:hover{background:var(--coral);color:var(--navy);}
.navbar{background:#fff;box-shadow:0 2px 18px rgba(10,25,47,.08);transition:box-shadow .3s;}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:12px;flex-wrap:nowrap;}
.main-nav ul{display:flex;gap:20px;}
.main-nav a{font-weight:700;font-size:1rem;color:var(--navy);position:relative;padding:6px 0;}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--coral);transition:width .25s var(--ease);}
.main-nav a:hover::after,.main-nav a.active::after{width:100%;}
.main-nav a.active{color:var(--coral);}
.close-nav-btn{display:none;}
.navbar-actions{display:flex;align-items:center;gap:12px;}
.icon-link{position:relative;font-size:1.1rem;color:var(--navy);width:40px;height:40px;border-radius:0;background:var(--cream);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;flex-shrink:0;}
.icon-link:hover, .icon-link.active{background:var(--coral);color:var(--navy);border-color:var(--coral);}
.cart-count{position:absolute;top:-5px;right:-5px;background:var(--coral);color:var(--navy);font-size:.65rem;font-weight:700;border-radius:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav-overlay{
position:fixed;inset:0;background:rgba(10,25,47,.5);z-index:399;
opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s;
}
.mobile-nav-overlay.active{opacity:1;visibility:visible;}
/* Page Hero / Banner */
.page-hero{
position:relative;padding:80px 0;display:flex;align-items:center;color:#fff;overflow:hidden;
}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.page-hero-content{position:relative;z-index:2;text-align:center;}
.page-hero .eyebrow{color:var(--pink) !important;}
.page-hero h1{color:#fff !important;font-size:clamp(2rem,4vw,3rem);margin-bottom:.4em;}
.breadcrumb span[aria-current]{color:var(--pink);}
.breadcrumb i{font-size:.72rem;opacity:.8;}
/* =========================================================
Search Specifics
========================================================= */
.search-hero-box{max-width:720px;margin:0 auto 20px;text-align:center;}
.search-hero-box h2{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-bottom:28px;}
.universal-search{
position:relative;display:flex;align-items:center;background:var(--cream);
border:1px solid var(--border-color);border-radius:0px;padding:4px 8px 4px 20px;
transition:border-color .2s,box-shadow .2s;
}
.universal-search:focus-within{border-color:var(--coral);box-shadow:0 0 0 3px rgba(106,195,195,.2);background:#fff;}
.universal-search-icon{font-size:1.1rem;color:var(--muted);margin-right:14px;flex-shrink:0;}
.universal-search input{
flex:1;border:none;background:transparent;font-size:1.05rem;color:var(--ink);padding:14px 0;
font-family:var(--font-body);
}
.universal-search input:focus{outline:none;}
.universal-search input::placeholder{color:#9295ad;}
.clear-search{
width:38px;height:38px;border-radius:0px;background:#fff;border:1px solid var(--border-color);
color:var(--navy);flex-shrink:0;display:flex;align-items:center;justify-content:center;
font-size:.85rem;transition:background .2s,color .2s;
}
.clear-search:hover{background:var(--coral);color:var(--navy);border-color:var(--coral);}
.search-suggestions{
display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px;font-size:.88rem;
}
.search-suggestions span{color:var(--muted);font-weight:600;}
.suggestion-chip{
background:var(--cream);border:1px solid var(--border-color);color:var(--navy);padding:6px 16px;
border-radius:0px;font-weight:700;font-size:.85rem;font-family:var(--font-display);
transition:background .2s,color .2s,border-color .2s;
}
.suggestion-chip:hover{background:var(--coral);color:var(--navy);border-color:var(--coral);}
/* Empty state */
.search-empty-state{text-align:center;padding:60px 20px 20px;color:var(--muted);}
.search-empty-icon{font-size:2.4rem;display:block;margin-bottom:14px;color:var(--coral-dark);}
.search-empty-state p{max-width:420px;margin:0 auto;}
/* Results */
.search-results-wrap{margin-top:40px;}
.search-summary{text-align:center;color:var(--muted);font-size:.95rem;margin-bottom:30px;}
.search-summary strong{color:var(--navy);}
.search-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
.results-col-heading{font-size:1.15rem;margin-bottom:18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border-color);padding-bottom:8px;}
.results-col-heading span{color:var(--coral-dark);font-weight:700;font-size:.9rem;}
.search-results-list{display:flex;flex-direction:column;gap:12px;}
.search-result-item{
display:flex;align-items:center;gap:14px;background:var(--cream);border:1px solid var(--border-color);
border-radius:0px;padding:12px 16px;transition:background .2s,border-color .2s,transform .2s;
}
.search-result-item:hover{background:#fff;border-color:var(--coral);transform:translateX(3px);}
.search-result-item img{width:54px;height:54px;border-radius:0px;border:1px solid var(--border-color);object-fit:cover;flex-shrink:0;background:#fff;}
.search-result-info{flex:1;min-width:0;}
.search-result-info h4{font-size:.95rem;font-family:var(--font-display);color:var(--navy) !important;margin:0 0 3px;line-height:1.35;font-weight:700;}
.search-result-info span{font-size:.82rem;color:var(--muted);}
.search-result-info .result-price{color:var(--coral-dark);font-weight:700;}
.result-tag{
background:var(--coral);color:var(--navy);font-size:.65rem;font-weight:700;padding:4px 8px;
border-radius:0px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;font-family:var(--font-display);
}
.results-empty-col{color:var(--muted);font-size:.9rem;padding:18px;text-align:center;background:var(--cream);border:1px solid var(--border-color);}
mark{background:rgba(106,195,195,.25);color:var(--coral-dark);font-weight:700;padding:0 2px;}
.no-results{text-align:center;color:var(--muted);margin-top:24px;}
.no-results a{color:var(--coral-dark);font-weight:700;}
/* =========================================================
CTA Section
========================================================= */
.cta-box{
background:var(--cream);border:1px solid var(--border-color);border-radius:0px;padding:36px 44px;
display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
/* =========================================================
Pets4Family — Design Tokens (Turquoise & Neutral Palette)
========================================================= */
h2 span{color:inherit !important;}
/* =========================================================
Products Grid (5 Produse pe Rând — Identic cu Catalog)
========================================================= */
.products-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap: 0;
border-top: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
margin-bottom: 30px;
}
.product-card.removing {
opacity: 0;
transform: scale(0.9);
}
.product-title:hover{color:var(--coral-dark) !important;}
/* Grupul de Butoane din Card wishlist (Mută în coș + Elimină) - stil identic cu .btn-add-cart / .btn-wishlist */
.product-card-actions .btn-wishlist-move{
flex:1;
background:var(--gray-btn-bg);
color:var(--gray-btn-text);
border:1px solid var(--border-color);
padding:.6em .7em;
font-weight:500;
font-size:.85rem;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
transition:all .2s var(--ease);
cursor:pointer;
}
.product-card-actions .btn-wishlist-move:hover{
background:var(--gray-btn-hover);
color:#fff;
border-color:var(--gray-btn-hover);
}
.product-card-actions .btn-wishlist-move.active{
background:var(--coral);
color:#fff;
border-color:var(--coral);
}
.product-card-actions .btn-wishlist-move.active:hover{
background:var(--coral-dark);
border-color:var(--coral-dark);
}
.btn-card-wishlist{
width:36px;
height:36px;
flex-shrink:0;
background:#fff;
color:var(--coral-dark);
border:1px solid var(--coral-dark);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:.95rem;
transition:all .2s var(--ease);
cursor:pointer;
}
.btn-card-wishlist:hover{
background:var(--coral-dark);
color:#fff;
border-color:var(--coral-dark);
}
.wishlist-empty{text-align:center;color:var(--ink);padding:36px 0;font-size:1.05rem;}
.wishlist-empty a{color:var(--coral-dark);font-weight:700;}
/* Secțiune titluri suplimentare */
.sub-heading {
margin: 40px 0 20px;
font-size: 1.5rem;
font-family: var(--font-display);
color: var(--navy);
border-bottom: 2px solid var(--border-color);
padding-bottom: 8px;
}
/* Responsive */
@media (max-width:1400px){
.products-grid{grid-template-columns:repeat(4, 1fr);}
}
@media (prefers-reduced-motion:reduce) {
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
@media (max-width:1100px) {
.products-grid{grid-template-columns:repeat(3, 1fr);}
.footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
}
@media (max-width:1024px) {
.header-phone-text{display:none;}
.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
.product-top-grid{grid-template-columns:1fr 380px;gap:24px;}
.products-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:992px) {
.topbar-center{display:none;}
.hamburger{display:flex;}
.topbar-nav.open{
display:flex;
flex-direction:column;
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
padding:18px;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
z-index:100;
}
.products-grid{grid-template-columns:repeat(3, 1fr);}
.blog-posts-grid{grid-template-columns:repeat(2,1fr);}
.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
.header-search-wrap{max-width:380px;}
.partner-cta-wrapper{grid-template-columns:1fr;gap:30px;padding:28px 24px;}
.partner-cta-form-box{padding:0;}
.dog-subcategories-grid{grid-template-columns: repeat(3, 1fr);}
.shop-layout{grid-template-columns:1fr;}
.filter-toggle-btn{display:inline-flex;}
.shop-sidebar{
position:fixed;top:0;left:0;height:100vh;width:min(320px,85%);background:#fff;z-index:600;
padding:20px 18px 40px;overflow-y:auto;box-shadow:10px 0 30px rgba(0,31,63,.2);
transform:translateX(-100%) !important;transition:transform .35s var(--ease);
}
.shop-sidebar.open{transform:translateX(0) !important;}
.sidebar-close{
display:flex;align-items:center;justify-content:center;width:32px;height:32px;
background:var(--cream);color:var(--navy);font-size:1rem;margin-bottom:14px;
}
.shop-overlay{
display:block;position:fixed;inset:0;background:rgba(0,31,63,.55);z-index:590;opacity:0;visibility:hidden;
transition:opacity .3s,visibility .3s;
}
.shop-overlay.show{opacity:1;visibility:visible;}
}
@media (max-width:900px) {
.auth-card{grid-template-columns:1fr;min-height:auto;}
.auth-visual{min-height:180px;padding:28px 24px;}
.auth-visual-bottom{display:none;}
.auth-form-panel{padding:30px 22px 34px;}
}
@media (max-width:860px) {
.header-phone{display:none;}
/* Carduri pe mobil */
.cart-table {
background: transparent;
border: none;
box-shadow: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.cart-row {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: #ffffff;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-soft);
padding: 22px 18px;
gap: 14px;
position: relative;
}
.cart-head { display: none; }
.col-product {
flex-direction: column;
padding-left: 0;
gap: 12px;
width: 100%;
}
.product-thumb {
width: 120px;
height: 120px;
margin: 0 auto;
background: #fff;
}
.product-name {
font-size: 1.05rem;
}
.col-price {
font-size:.95rem;
}
.col-price::before {
content: "Preț bucată: ";
color: var(--muted);
font-weight: 400;
}
.col-total {
font-size: 1.15rem;
padding-top: 8px;
border-top: 1px dashed var(--border-color);
width: 100%;
}
.col-total::before {
content: "Subtotal produs: ";
color: var(--muted);
font-weight: 500;
font-size: .9rem;
}
.remove-item {
position: absolute;
top: 14px;
right: 14px;
left: auto;
transform: none;
width: 32px;
height: 32px;
}
.qty-stepper {
margin: 4px 0;
}
.logo img{max-width:160px;}
.form-row{grid-template-columns:1fr;gap:0;}
.options-tiles{grid-template-columns:repeat(2, 1fr);}
.contact-form-card{padding:26px 20px;}
.cta-box{padding: 22px 18px;}
.product-top-grid{grid-template-columns:1fr;gap:30px;}
.topbar-info li:nth-child(2){display:none;}
.main-nav{
position:fixed;top:0;right:0;height:100vh;width:min(300px,85%);background:#fff;
box-shadow:-10px 0 30px rgba(10,25,47,.2);padding:70px 24px 30px;
transform:translateX(100%);transition:transform .35s var(--ease);z-index:400;
overflow-y:auto;
}
.main-nav.open{transform:translateX(0);}
.main-nav ul{flex-direction:column;gap:12px;}
.main-nav a{ display:block; padding:12px 0; border-bottom:1px solid #f0f0f0; font-size:1.155rem; }
.main-nav a::after{display:none;}
.close-nav-btn{
display:flex;align-items:center;justify-content:center;
position:absolute;top:18px;right:18px;
width:40px;height:40px;border-radius:0;
background:var(--cream);color:var(--navy);
font-size:1.3rem;transition:background .2s;
}
.close-nav-btn:hover{background:var(--coral);color:var(--navy);}
.hamburger{display:flex;}
.search-results-grid{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:768px) {
.hero{height:350px;}
.header-phone{display:none;}
.products-grid{grid-template-columns:repeat(2, 1fr);}
.partners-slider{gap:15px;}
.partner-logo img{max-height:38px;}
.logo img{max-width:160px;}
.cart-modal-pandashop-body{flex-direction:column;align-items:center;text-align:center;}
.cart-modal-pandashop-info{align-items:center;}
.cart-modal-pandashop-actions{flex-direction:column;}
.promo-modal-overlay .promo-modal.promo-modal-wide {
flex-direction: column !important;
}
.promo-modal-media {
width: 100% !important;
flex: none !important;
height: 180px;
min-height: auto;
}
.promo-modal-content {
width: 100% !important;
flex: none !important;
padding: 24px 20px;
}
.form-row-2col{grid-template-columns:1fr;}
.why-us-grid{grid-template-columns:1fr;}
.cta-box{padding: 22px 18px;}
.orders-row{grid-template-columns:1fr 1fr;row-gap:6px;}
.orders-head{display:none;}
.orders-row span:nth-child(1){font-weight:700;color:var(--navy);}
.row-link{grid-column:1/-1;justify-self:start;margin-top:4px;}
.address-grid{grid-template-columns:1fr;}
.form-row{grid-template-columns:1fr;gap:0;}
.blog-posts-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
.post-nav-links{grid-template-columns:1fr;}
.post-nav-next{text-align:left;}
.dog-subcategories-grid{grid-template-columns: repeat(2, 1fr);}
.products-grid:not(.list-view){grid-template-columns:repeat(2, 1fr);}
.results-count-panda{display:none;}
/* Responsive List View pe Mobil */
.products-grid.list-view .product-card {
flex-direction: column;
align-items: flex-start;
padding: 16px;
gap: 12px;
}
.products-grid.list-view .product-thumb-lg {
width: 100%;
height: 180px;
flex: none;
}
.products-grid.list-view .product-card-actions {
width: 100%;
max-width: 100%;
}
}
@media (max-width:640px) {
.container{padding-inline:12px;}
.products-grid{grid-template-columns:repeat(2, 1fr);}
.product-card{padding:12px 8px;}
}
@media (max-width:560px) {
.checkout-card, .summary-card{padding:20px 16px;}
.options-tiles{grid-template-columns:1fr;}
.contact-info-grid{grid-template-columns:1fr;gap:14px;}
.contact-form-card{padding:20px 16px;}
.map-callout{flex-direction:column;align-items:flex-start;}
.map-callout .btn{width:100%;text-align:center;}
.faq-question{padding:16px 18px;font-size:.98rem;}
.faq-item.open .faq-answer{padding:0 18px 18px;}
.faq-search input{padding:10px 16px 10px 40px;font-size:.88rem;}
.product-gallery-vertical{flex-direction:column-reverse;gap:12px;}
.thumbs-vertical-wrapper{width:100%;}
.thumbs-vertical-list{flex-direction:row;max-height:none;overflow-x:auto;width:100%;}
.thumb-scroll-btn{display:none;}
.action-purchase-group{flex-wrap:wrap;}
.btn-add-cart-large{width:100%;order:3;}
.stepper-box{order:1;}
.product-tabs{flex-direction:column;}
.product-tab{border-right:none;border-bottom:1px solid var(--border-color);}
.container{width:92%;}
.topbar-inner{justify-content:center;font-size:.78rem;}
.topbar-info{gap:12px;justify-content:center;}
.topbar-social{display:none;}
.navbar-inner{padding:14px 0;}
.logo img { max-width: 130px; }
.page-hero{padding:60px 0;}
.universal-search{padding:4px 6px 4px 14px;}
.universal-search-icon{margin-right:10px;}
.universal-search input{font-size:.95rem;padding:12px 0;}
.search-suggestions{gap:8px;}
.suggestion-chip{padding:5px 12px;font-size:.8rem;}
.cta-box{padding:24px 18px;justify-content:center;text-align:center;flex-direction:column;}
.cta-box .btn{width:100%;}
.footer-grid{grid-template-columns:1fr;text-align:center;gap:28px;}
.footer-brand{display:flex;flex-direction:column;align-items:center;}
.footer-brand .logo{justify-content:center;width:100%;}
.footer-social{justify-content:center;}
.hours li{justify-content:space-around;}
}
@media (max-width:480px) {
.products-grid{grid-template-columns:1fr;}
.blog-posts-grid{grid-template-columns:1fr;gap:18px;}
.footer-grid{grid-template-columns:1fr;}
.action-item span:not(.badge-count){display:none;}
.categories-grid{grid-template-columns:1fr;}
.header-search-wrap{max-width:100%;}
.account-sidebar{padding:18px;}
.stats-cards{grid-template-columns:1fr 1fr;gap:12px;}
.stat-card{padding:16px 12px;}
.stat-card strong{font-size:1.4rem;}
.pets-grid{grid-template-columns:1fr;}
.panel-heading-row .btn{width:100%;}
.account-panel h2{font-size:1.35rem;}
.blog-post-body h3{min-height:auto;}
.blog-post-body p{min-height:auto;}
.shop-pagination{flex-wrap:wrap;gap:14px;justify-content:center;}
.page-numbers{order:1;width:100%;justify-content:center;}
.post-featured-img{aspect-ratio:4/3;}
.post-body h2{font-size:1.25rem;}
.post-author-card{flex-direction:column;text-align:center;}
.post-tags-row{flex-direction:column;align-items:flex-start;}
.cart-toolbar{flex-direction:column;align-items:stretch;}
.coupon-input{max-width:none;}
.cart-toolbar .btn{width:100%;margin-left:0;}
.totals-inline{justify-content:space-between;gap:16px;}
.total-final{border-left:none;padding-left:0;}
.dog-subcategories-grid{grid-template-columns: 1fr;}
.cta-box{padding:22px 18px;}
.auth-form-panel{padding:22px 16px 28px;}
.shop-toolbar-panda{flex-direction:column;align-items:stretch;}
.toolbar-left{flex-direction:column;align-items:stretch;}
.sort-select-panda{width:100%;}
.toolbar-right{justify-content:space-between;}
.products-grid:not(.list-view){grid-template-columns:1fr;}
}
@media (max-width:380px) {
.search-result-item{padding:10px 12px;gap:10px;}
.search-result-item img{width:46px;height:46px;}
}
/* Shop subcategory: instant AJAX filter/sort/pagination loading state */
#shopResultsContainer.is-loading{opacity:.5;pointer-events:none;transition:opacity .15s ease;}
/* ---- Cabinet personal: mesaje "nu ai ... încă" centrate, font mai mare ---- */
.account-empty-msg{
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
text-align: center;
padding: 36px 16px;
margin: 0;
font-size: 1.1rem;
font-weight: 500;
color: var(--ink, #1a1a1a);
opacity: .75;
}
.account-empty-msg i{
font-size: 2rem;
color: var(--coral, #3B9797);
opacity: .8;
}
/* ---- Hero: pelicula uniforma pe tot sliderul (fara gradient) ---- */
.hero{ position: relative; }
.hero .hero-film{
position: absolute;
inset: 0;
background: rgba(0, 31, 63, .55);
z-index: 1;
pointer-events: none;
}
.footer-brand .footer-social{margin-top:16px;}
/* ---- Checkout: adresele salvate ale clientului ---- */
.saved-addresses{margin-bottom:20px;}
.saved-addresses-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.saved-addresses-title{font-weight:700;font-size:1rem;color:var(--navy, #001F3F);display:flex;align-items:center;gap:8px;}
.saved-addresses-title i{color:var(--coral, #3B9797);}
.saved-addresses-manage{font-size:.85rem;color:var(--coral, #3B9797);text-decoration:none;font-weight:600;}
.saved-addresses-manage:hover{text-decoration:underline;}
.saved-address-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;}
@media (max-width: 640px){ .saved-address-grid{grid-template-columns:1fr;} }
.saved-address-card{
position:relative;display:flex;flex-direction:column;gap:4px;
padding:14px 44px 14px 16px;min-height:110px;
border:1.5px solid var(--border-color, #e2e2e2);border-radius:14px;background:#fff;
cursor:pointer;transition:border-color .2s, box-shadow .2s, background .2s;
}
.saved-address-card:hover{border-color:var(--coral, #3B9797);}
.saved-address-card input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.saved-address-card.active{border-color:var(--coral, #3B9797);background:rgba(59,151,151,.06);box-shadow:0 4px 14px rgba(59,151,151,.15);}
.saved-address-card .sa-check{
position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;
border:1.5px solid var(--border-color, #d0d0d0);display:flex;align-items:center;justify-content:center;
font-size:.7rem;color:transparent;transition:all .2s;
}
.saved-address-card.active .sa-check{background:var(--coral, #3B9797);border-color:var(--coral, #3B9797);color:#fff;}
.saved-address-card .sa-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
.saved-address-card .sa-icon{
width:28px;height:28px;border-radius:8px;background:rgba(59,151,151,.12);color:var(--coral, #3B9797);
display:flex;align-items:center;justify-content:center;font-size:.8rem;
}
.saved-address-card .sa-label{font-weight:700;font-size:.95rem;color:var(--navy, #001F3F);}
.saved-address-card .sa-badge{font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--navy, #001F3F);color:#fff;}
.saved-address-card .sa-line{font-size:.88rem;line-height:1.35;}
.saved-address-card .sa-muted{opacity:.7;}
.saved-address-card .sa-muted i{font-size:.75rem;margin-right:4px;}
.saved-address-new{border-style:dashed;align-items:center;justify-content:center;text-align:center;padding:14px 16px;}
.saved-address-new .sa-plus{
width:32px;height:32px;border-radius:50%;background:rgba(59,151,151,.12);color:var(--coral, #3B9797);
display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
/* ---- Cabinet: butoanele comenzii (Vezi / Repetă / PDF) ---- */
.order-actions{justify-content:flex-end;gap:10px;padding:0 20px 16px;}
.order-action-btn{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;border-radius:30px;
border:1.5px solid var(--border-color, #e2e2e2);background:#fff;
color:var(--navy, #001F3F);font-weight:600;font-size:.85rem;line-height:1;
cursor:pointer;text-decoration:none;transition:all .2s;
}
.order-action-btn i{font-size:.85rem;color:var(--coral, #3B9797);transition:color .2s;}
.order-action-btn:hover{border-color:var(--coral, #3B9797);color:var(--coral, #3B9797);}
.order-action-primary{background:var(--coral, #3B9797);border-color:var(--coral, #3B9797);color:#fff;}
.order-action-primary i{color:#fff;}
.order-action-primary:hover{background:var(--navy, #001F3F);border-color:var(--navy, #001F3F);color:#fff;}
.order-action-btn:disabled{opacity:.6;cursor:wait;}
@media (max-width: 640px){
.order-actions{justify-content:stretch;}
.order-action-btn{flex:1 1 100%;justify-content:center;}
}
/* ---- Cabinet: comenzile ca si carduri (Panou + Comenzile mele) ---- */
.order-cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));gap:18px;}
.order-cards .account-empty-msg{grid-column:1 / -1;}
@media (max-width: 480px){ .order-cards{grid-template-columns:1fr;} }
.order-card{
display:flex;flex-direction:column;
background:#fff;border:1px solid var(--border-color, #e2e2e2);border-radius:16px;
box-shadow:var(--shadow-soft, 0 4px 16px rgba(0,31,63,.06));
overflow:hidden;transition:box-shadow .2s, transform .2s;
}
.order-card:hover{box-shadow:0 10px 28px rgba(0,31,63,.12);transform:translateY(-2px);}
.order-card-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:16px 18px;border-bottom:1px solid var(--border-color, #eee);
background:linear-gradient(0deg, #fff, rgba(59,151,151,.05));
}
.order-card-number{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--navy, #001F3F);}
.order-card-date{font-size:.8rem;opacity:.65;margin-top:3px;}
.order-card-date i{margin-right:4px;}
.order-card-status{
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
padding:5px 10px;border-radius:30px;font-size:.74rem;font-weight:700;
}
.oc-status-new{background:#e8f1fd;color:#2f6fed;}
.oc-status-pending{background:#fff3e6;color:#c4791f;}
.oc-status-processing{background:#eef0ff;color:#5b4fd6;}
.oc-status-delivery{background:#e6f6f6;color:var(--coral, #3B9797);}
.oc-status-completed{background:#eef7e1;color:var(--green, #3c8d2f);}
.order-card-body{display:flex;flex-direction:column;gap:12px;padding:16px 18px;flex:1;}
.order-card-thumbs{display:flex;gap:8px;align-items:center;}
.order-card-thumbs img{
width:52px;height:52px;object-fit:cover;border-radius:10px;
border:1px solid var(--border-color, #eee);background:#fff;
}
.order-card-more{
width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;
background:rgba(0,31,63,.06);font-weight:700;font-size:.85rem;color:var(--navy, #001F3F);
}
.order-card-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.86rem;}
.order-card-items li{display:flex;justify-content:space-between;gap:10px;}
.order-card-items li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.order-card-items li em{font-style:normal;opacity:.6;white-space:nowrap;}
.order-card-items-more{opacity:.6;font-size:.8rem;}
.order-card-meta{
display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;
padding:12px 18px;border-top:1px dashed var(--border-color, #e2e2e2);
}
.order-card-meta > div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.oc-meta-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;opacity:.55;font-weight:600;}
.oc-meta-value{font-size:.88rem;font-weight:600;color:var(--navy, #001F3F);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oc-meta-total{text-align:right;}
.oc-meta-total .oc-meta-value{font-size:1.1rem;font-weight:800;color:var(--coral, #3B9797);}
.order-card-actions{
display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 16px;
border-top:1px solid var(--border-color, #eee);background:#fafbfc;
}
.order-card-actions .order-action-btn{flex:1 1 auto;justify-content:center;padding:9px 12px;font-size:.8rem;}
/* ---- Cabinet: sector / suburbie pe cardul adresei ---- */
.address-zone{display:flex;flex-direction:column;gap:6px;margin:10px 0 12px;padding:10px 12px;border-radius:10px;background:rgba(59,151,151,.06);}
.address-zone label{font-size:.78rem;font-weight:600;opacity:.8;display:flex;align-items:center;gap:6px;}
.address-zone label i{color:var(--coral, #3B9797);}
.address-zone select{width:100%;padding:8px 10px;border:1px solid var(--border-color, #e2e2e2);border-radius:8px;background:#fff;font-size:.88rem;}
.address-zone-missing{background:#fff5e8;border:1px dashed #e0a458;}
.address-zone-missing label{color:#b86e12;opacity:1;}
.address-zone-msg{font-size:.75rem;min-height:1em;}
.address-zone-msg.ok{color:var(--green, #3c8d2f);}
.address-zone-msg.error{color:var(--red, #d33);}
.form-hint{display:block;margin-top:5px;font-size:.78rem;opacity:.65;}
/* ---- Cabinet pe mobil: meniul clientului jos, ca intr-o aplicatie ---- */
.account-tabbar{display:none;}
.account-profile-logout{display:none;margin:0 0 0 auto;}
@media (max-width: 768px){
.page-account .account-layout{grid-template-columns:1fr;gap:18px;}
.page-account .account-sidebar{position:static;padding:14px 16px;}
.page-account .account-profile{padding-bottom:0;margin-bottom:0;border-bottom:none;}
.page-account .account-sidebar .account-nav{display:none;}
.account-profile-logout{display:block;}
.account-profile-logout button{
width:40px;height:40px;border-radius:50%;border:1px solid var(--border-color, #e2e2e2);
background:#fff;color:var(--red, #d33);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.account-tabbar{
display:flex;justify-content:space-around;align-items:stretch;
position:fixed;left:0;right:0;bottom:0;z-index:900;
background:rgba(255,255,255,.97);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-top:1px solid var(--border-color, #e2e2e2);
box-shadow:0 -6px 20px rgba(0,31,63,.08);
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.account-tabbar .account-tab{
flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
padding:6px 2px;margin:0;border:none !important;border-radius:12px;background:transparent;
color:var(--muted, #7a8594);font-size:.68rem;font-weight:600;text-align:center;
transition:color .2s, background .2s;
}
.account-tabbar .account-tab i{font-size:1.15rem;transition:transform .2s;}
.account-tabbar .account-tab:hover{background:transparent;color:var(--coral, #3B9797);}
.account-tabbar .account-tab.active{color:var(--coral, #3B9797);background:rgba(59,151,151,.1);font-weight:700;}
.account-tabbar .account-tab.active i{transform:translateY(-1px) scale(1.08);}
/* loc pentru bara de jos, ca sa nu acopere continutul / footerul */
body.page-account{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
body.page-account .back-to-top{bottom:calc(84px + env(safe-area-inset-bottom));}
}
/* =====================================================================
Meniu burger (mobil / tableta) — drawer lateral cu navigarea + footerul
===================================================================== */
.mobile-drawer, .mobile-drawer-overlay{display:none;}
@media (max-width: 992px){
.hamburger{display:flex;border:none;cursor:pointer;}
.hamburger span{width:100%;}
.mobile-drawer-overlay{
display:block;position:fixed;inset:0;z-index:1190;
background:rgba(0,31,63,.5);opacity:0;transition:opacity .25s;
}
.mobile-drawer-overlay.show{opacity:1;}
.mobile-drawer-overlay[hidden]{display:none;}
.mobile-drawer{
display:flex;flex-direction:column;
position:fixed;top:0;left:0;bottom:0;z-index:1200;
width:min(86vw, 380px);background:#fff;
box-shadow:12px 0 40px rgba(0,31,63,.2);
transform:translateX(-105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.mobile-drawer.open{transform:translateX(0);}
body.drawer-open{overflow:hidden;}
.mobile-drawer-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 16px;border-bottom:1px solid var(--border-color, #eee);flex-shrink:0;
}
.mobile-drawer-head .logo img{max-height:42px;width:auto;}
.mobile-drawer-close{
width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
background:var(--cream, #f5f7f9);color:var(--navy, #001F3F);font-size:1.2rem;
display:flex;align-items:center;justify-content:center;
}
.mobile-drawer-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px;}
.mobile-drawer-search{display:flex;border:1px solid var(--border-color, #e2e2e2);border-radius:30px;overflow:hidden;}
.mobile-drawer-search input{flex:1;min-width:0;border:none;padding:11px 16px;font-size:.92rem;outline:none;background:transparent;}
.mobile-drawer-search button{border:none;background:var(--coral, #3B9797);color:#fff;width:46px;cursor:pointer;}
.mobile-drawer-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mobile-drawer-quick a{
position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
padding:12px 6px;border-radius:12px;background:var(--cream, #f5f7f9);
color:var(--navy, #001F3F);font-size:.78rem;font-weight:600;text-decoration:none;
}
.mobile-drawer-quick a i{font-size:1.15rem;color:var(--coral, #3B9797);}
.mobile-drawer-quick a.active{background:rgba(59,151,151,.14);}
.mobile-drawer-quick em{
position:absolute;top:6px;right:calc(50% - 22px);font-style:normal;
min-width:18px;height:18px;padding:0 4px;border-radius:9px;
background:var(--coral, #3B9797);color:#fff;font-size:.65rem;font-weight:700;
display:flex;align-items:center;justify-content:center;
}
.mobile-drawer-nav{display:flex;flex-direction:column;}
.mobile-drawer-nav a{
display:flex;align-items:center;gap:14px;padding:13px 6px;
border-bottom:1px solid var(--border-color, #f0f0f0);
color:var(--navy, #001F3F);font-weight:600;font-size:.98rem;text-decoration:none;
}
.mobile-drawer-nav a i{width:22px;text-align:center;color:var(--coral, #3B9797);}
.mobile-drawer-nav a.active{color:var(--coral, #3B9797);}
/* footerul, in varianta compacta din meniu */
.mobile-drawer-footer{display:flex;flex-direction:column;gap:16px;padding:14px;border-radius:14px;background:var(--cream, #f5f7f9);}
.mobile-drawer-footer .footer-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;color:var(--navy, #001F3F);opacity:.7;}
.mobile-drawer-footer .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.mobile-drawer-footer .footer-col a{color:var(--ink, #1a1a1a);font-size:.9rem;text-decoration:none;}
.mobile-drawer-footer .hours li{display:flex;justify-content:space-between;font-size:.88rem;}
.mobile-drawer-phone{
display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
background:var(--navy, #001F3F);color:#fff;text-decoration:none;
}
.mobile-drawer-phone i{width:38px;height:38px;border-radius:50%;background:var(--coral, #3B9797);display:flex;align-items:center;justify-content:center;}
.mobile-drawer-phone span{display:flex;flex-direction:column;}
.mobile-drawer-phone small{opacity:.75;font-size:.75rem;}
.mobile-drawer-social{justify-content:center;}
.mobile-drawer-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px;}
.mobile-drawer-lang{display:flex;gap:8px;}
.mobile-drawer-lang span, .mobile-drawer-lang a{
padding:5px 14px;border-radius:20px;border:1px solid var(--border-color, #e2e2e2);
font-weight:700;font-size:.8rem;color:var(--navy, #001F3F);text-decoration:none;
}
.mobile-drawer-lang span.active{background:var(--navy, #001F3F);color:#fff;border-color:var(--navy, #001F3F);}
.mobile-drawer-copy{font-size:.75rem;opacity:.6;text-align:center;}
/* pe mobil footerul se muta in meniul burger */
.site-footer{display:none;}
}
/* =====================================================================
Versiunea mobila: header = logo + limba + burger (dreapta);
bara fixa jos = Acasa / Cautare / Favorite / Cos / Cabinet
===================================================================== */
.mobile-header-tools, .mobile-bottom-bar, .mobile-search-overlay{display:none;}
@media (max-width: 992px){
.site-header .topbar{display:none;}
.site-header .header-search-wrap,
.site-header .header-phone,
.site-header .header-actions{display:none !important;}
.site-header .main-header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.site-header .logo img{max-height:44px;width:auto;}
.mobile-header-tools{display:flex;align-items:center;gap:10px;margin-left:auto;}
.mobile-lang{display:flex;align-items:center;gap:4px;}
.mobile-lang span, .mobile-lang a{
padding:5px 9px;border-radius:20px;font-weight:700;font-size:.75rem;line-height:1;
color:var(--navy, #001F3F);text-decoration:none;border:1px solid var(--border-color, #e2e2e2);
}
.mobile-lang span.active{background:var(--navy, #001F3F);color:#fff;border-color:var(--navy, #001F3F);}
.mobile-header-tools .hamburger{display:flex;width:40px;height:40px;padding:10px 9px;border-radius:10px;}
/* --- bara de jos --- */
.mobile-bottom-bar{
display:flex;justify-content:space-around;align-items:stretch;
position:fixed;left:0;right:0;bottom:0;z-index:1000;
background:rgba(255,255,255,.97);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-top:1px solid var(--border-color, #e2e2e2);
box-shadow:0 -6px 20px rgba(0,31,63,.08);
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mobile-bottom-bar > a, .mobile-bottom-bar > button{
flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:6px 2px;border:none;background:transparent;border-radius:12px;cursor:pointer;
color:var(--muted, #7a8594);font-size:.68rem;font-weight:600;text-decoration:none;font-family:inherit;
}
.mobile-bottom-bar i{font-size:1.2rem;}
.mobile-bottom-bar .active{color:var(--coral, #3B9797);}
.mobile-bottom-bar .mbb-icon{position:relative;display:inline-flex;}
.mobile-bottom-bar em{
position:absolute;top:-6px;right:-12px;font-style:normal;
min-width:17px;height:17px;padding:0 4px;border-radius:9px;
background:var(--coral, #3B9797);color:#fff;font-size:.62rem;font-weight:700;
display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
body{padding-bottom:calc(66px + env(safe-area-inset-bottom));}
.back-to-top{bottom:calc(80px + env(safe-area-inset-bottom)) !important;}
/* --- cautare universala --- */
.mobile-search-overlay{
display:block;position:fixed;inset:0;z-index:1250;
background:rgba(0,31,63,.45);opacity:0;transition:opacity .2s;
}
.mobile-search-overlay.show{opacity:1;}
.mobile-search-overlay[hidden]{display:none;}
.mobile-search-box{
display:flex;align-items:center;gap:10px;background:#fff;
padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
box-shadow:0 6px 20px rgba(0,31,63,.15);
transform:translateY(-100%);transition:transform .25s;
}
.mobile-search-overlay.show .mobile-search-box{transform:translateY(0);}
.mobile-search-form{
flex:1;display:flex;align-items:center;gap:8px;min-width:0;
border:1.5px solid var(--coral, #3B9797);border-radius:30px;padding:0 6px 0 14px;
}
.mobile-search-form i{color:var(--coral, #3B9797);}
.mobile-search-form input{flex:1;min-width:0;border:none;outline:none;padding:11px 0;font-size:16px;background:transparent;}
.mobile-search-go{border:none;background:var(--coral, #3B9797);color:#fff;border-radius:20px;padding:7px 12px;font-weight:600;font-size:.8rem;}
.mobile-search-cancel{border:none;background:none;color:var(--navy, #001F3F);font-weight:600;font-size:.85rem;}
.mobile-search-hints{display:flex;flex-direction:column;gap:2px;background:#fff;padding:4px 14px 12px;}
.mobile-search-hints a{display:flex;align-items:center;gap:12px;padding:11px 4px;color:var(--navy, #001F3F);text-decoration:none;font-weight:500;border-top:1px solid var(--border-color, #f0f0f0);}
.mobile-search-hints i{color:var(--coral, #3B9797);width:20px;text-align:center;}
/* burger: se deschide din dreapta (butonul e in dreapta) */
.mobile-drawer{left:auto;right:0;transform:translateX(105%);box-shadow:-12px 0 40px rgba(0,31,63,.2);}
.mobile-drawer.open{transform:translateX(0);}
}
@media (max-width: 768px){
/* cabinetul personal: meniul clientului ramane lipit jos, deasupra barei site-ului */
.account-tabbar{bottom:calc(62px + env(safe-area-inset-bottom)) !important;padding-bottom:6px !important;box-shadow:0 -4px 14px rgba(0,31,63,.06) !important;}
body.page-account{padding-bottom:calc(132px + env(safe-area-inset-bottom)) !important;}
body.page-account .back-to-top{bottom:calc(146px + env(safe-area-inset-bottom)) !important;}
}
/* ---- Burger: sectiuni cu acelasi design ca navigarea ---- */
@media (max-width: 992px){
.mobile-drawer-section-title{
margin:4px 0 -10px;padding:0 6px;
font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted, #7a8594);
}
.mobile-drawer-hours > div{
display:flex;align-items:center;gap:14px;padding:13px 6px;
border-bottom:1px solid var(--border-color, #f0f0f0);
color:var(--navy, #001F3F);font-weight:600;font-size:.98rem;
}
.mobile-drawer-hours > div i{width:22px;text-align:center;color:var(--coral, #3B9797);}
.mobile-drawer-hours > div span{flex:1;}
.mobile-drawer-hours > div strong{font-weight:700;font-size:.9rem;opacity:.8;}
.mobile-drawer-nav a:last-child, .mobile-drawer-hours > div:last-child{border-bottom:none;}
}
/* ---- Cardul animalului: stil postare Instagram ---- */
.pet-card{display:flex;flex-direction:column;padding:0 !important;text-align:left !important;border-radius:16px;overflow:hidden;}
.pet-card-head{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.pet-card-avatar{
width:40px;height:40px;border-radius:50%;padding:2px;flex-shrink:0;
background:linear-gradient(45deg, var(--coral, #3B9797), #ffb36b, var(--navy, #001F3F));
}
.pet-card-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff !important;margin:0 !important;aspect-ratio:1/1;}
.pet-card-title{flex:1;min-width:0;}
.pet-card-title h4{margin:0 !important;font-size:.98rem !important;line-height:1.2;}
.pet-card-title p{margin:0 !important;font-size:.78rem !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pet-card-species{
width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:rgba(59,151,151,.12);color:var(--coral, #3B9797);font-size:.9rem;
}
.pet-card-photo{width:100%;aspect-ratio:1/1;background:#f3f5f7;overflow:hidden;}
.pet-card-photo img{width:100%;height:100%;object-fit:cover;display:block;margin:0 !important;border:none !important;aspect-ratio:auto !important;}
.pet-card-info{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 0;}
.pet-card-info span{
display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;
background:var(--cream, #f5f7f9);font-size:.78rem;font-weight:600;color:var(--navy, #001F3F);
}
.pet-card-info i{color:var(--coral, #3B9797);}
.pet-card .btn-edit-pet{
margin:12px 14px 14px;padding:10px 14px;border-radius:30px;justify-self:stretch;
border:1.5px solid var(--border-color, #e2e2e2) !important;text-align:center;
display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none !important;
}
.pet-card .btn-edit-pet:hover{border-color:var(--coral, #3B9797) !important;}
@media (max-width: 768px){
.page-account .pets-grid{grid-template-columns:1fr;gap:20px;}
.page-account .pet-card-head{padding:14px 16px;}
.page-account .pet-card-avatar{width:46px;height:46px;}
.page-account .pet-card-title h4{font-size:1.1rem !important;}
.page-account .pet-card-title p{font-size:.85rem !important;}
.page-account .pet-card-info{padding:14px 16px 0;}
.page-account .pet-card-info span{font-size:.85rem;padding:6px 12px;}
.page-account .pet-card .btn-edit-pet{margin:14px 16px 16px;padding:12px;font-size:.95rem;}
}
.address-zone-set strong{font-size:.95rem;color:var(--navy, #001F3F);}
/* Hero: toata imaginea slide-ului e clickabila (sub text/butoane/sageti) */
.hero .hero-link{position:absolute;inset:0;z-index:1;display:block;}
.hero .hero-content{pointer-events:none;}
.hero .hero-content a, .hero .hero-content button{pointer-events:auto;}
/* ---------- Formular "Devino partener" — honeypot + modal de mulțumire ---------- */
.partner-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;pointer-events:none;}
.partner-thanks-modal{
background:#fff;position:relative;width:min(440px,96%);padding:38px 30px 30px;border-radius:4px;
box-shadow:0 25px 50px rgba(0,31,63,.3);text-align:center;
transform:translateY(12px);transition:transform .25s var(--ease);
}
.partner-thanks-overlay.active .partner-thanks-modal{transform:translateY(0);}
.partner-thanks-icon{font-size:3.2rem;color:var(--coral-dark);margin-bottom:12px;line-height:1;}
.partner-thanks-overlay.is-error .partner-thanks-icon{color:#d9534f;}
.partner-thanks-title{font-size:1.3rem;font-weight:700;color:var(--navy) !important;margin-bottom:8px;}
.partner-thanks-text{color:var(--muted);font-size:.92rem;line-height:1.5;margin-bottom:22px;}
.partner-thanks-ok{min-width:140px;}
/* Slider: poza de mobil încărcată în admin (Banner -> mobile_img) */
@media (max-width: 768px){
.hero-slide[style*="--hero-mobile"]{ background-image: var(--hero-mobile) !important; }
}
/* Bulina cu numărul (wishlist / coș) lipită de colțul din dreapta-sus al iconiței,
indiferent cât de lung e textul de sub ea ("Wishlist", "Список желаний" etc.).
Specificitate mai mare decât .badge-count / .cart-count de mai sus. */
.header-actions .action-item .badge-count{
top:-7px;
right:auto;
left:calc(50% + 5px);
border-radius:50%;
background:var(--navy);
color:#fff;
}
/* ===================== Recenzii clienți (home) ===================== */
.reviews-home{background:var(--cream);}
.reviews-home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;}
.reviews-home-head .section-title{margin:0;text-align:left;}
.reviews-home-kicker{display:inline-block;color:var(--coral);font-weight:700;font-size:.78rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.reviews-home-nav{display:flex;gap:8px;flex-shrink:0;}
.reviews-nav-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border-color);background:#fff;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease);}
.reviews-nav-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
.reviews-nav-btn:disabled{opacity:.35;cursor:default;background:#fff;color:var(--navy);border-color:var(--border-color);}
.reviews-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 18px;scrollbar-width:none;}
.reviews-track::-webkit-scrollbar{display:none;}
.review-card{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;background:#fff;border:1px solid var(--border-color);border-radius:18px;padding:24px 24px 20px;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.review-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -14px rgba(0,31,63,.22);}
.review-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.review-stars{display:flex;gap:3px;color:#f5b301;font-size:.9rem;}
.review-quote{font-size:1.9rem;color:var(--coral);opacity:.25;}
.review-text{flex:1;margin:0 0 20px;color:var(--ink);line-height:1.65;font-size:.95rem;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
.review-author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border-color);}
.review-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--navy));color:#fff;font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.review-author strong{display:block;color:var(--navy);font-size:.95rem;}
.review-author span{font-size:.78rem;color:var(--muted);}
.review-author span i{color:var(--coral);}
.review-video{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;}
.review-video:hover{background:var(--coral-dark);color:#fff;}
@media (max-width:991px){.review-card{flex-basis:calc((100% - 20px)/2);}}
@media (max-width:600px){
.review-card{flex-basis:86%;padding:20px;}
.reviews-home-nav{display:none;}
}
/* Modal „A fost adăugat în coș”: iconița portmoneu deasupra textului cashback, aliniată la stânga */
.cart-modal-pandashop-cashback{flex-direction:column;align-items:flex-start;gap:6px;text-align:left;}
.cart-modal-pandashop-cashback i.fa-wallet{color:var(--coral);font-size:1.35rem;line-height:1;}
/* =========================================================
Despre noi — povestea brandului Pets4Family
========================================================= */
.about-story-lead{font-size:1.15rem !important;color:var(--navy) !important;font-weight:500;}
.about-journey{background:var(--cream);border-top:1px solid var(--border-color);}
.about-journey-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start;}
.about-journey-intro{border-left:4px solid var(--coral);padding:4px 0 4px 24px;}
.about-journey-lead{font-size:clamp(1.2rem,1.9vw,1.45rem);font-weight:700;color:var(--navy);line-height:1.35;margin:0 0 .8em;}
.about-journey-intro p:not(.about-journey-lead),
.about-journey-body p{color:var(--muted);font-size:.95rem;line-height:1.65;margin:0 0 1em;}
.about-journey-body h2{font-size:clamp(1.35rem,2.1vw,1.7rem);font-weight:900;margin-bottom:.7em;}
.about-journey-body p:last-child{margin-bottom:0;}
.about-quality-heading{max-width:820px;}
.about-quality-text{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--navy);line-height:1.55;margin:.2em 0 1em;}
.about-quality-sub{color:var(--muted);font-size:.95rem;margin:0;}
.about-benefits{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.about-benefits li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px 12px;border:1px solid var(--border-color);background:#fff;transition:border-color .25s var(--ease);}
.about-benefits li:hover{border-color:var(--coral);}
.about-benefits i{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:var(--cream);color:var(--coral-dark);font-size:1.2rem;}
.about-benefits span{font-weight:600;color:var(--navy);font-size:.92rem;line-height:1.3;}
.about-benefits span::first-letter{text-transform:uppercase;}
.about-mission{background:var(--cream);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);}
.about-mission-head,.about-mission-foot{max-width:820px;margin-inline:auto;text-align:center;}
.about-mission-head h2{font-size:clamp(1.45rem,2.3vw,1.85rem);font-weight:900;}
.about-mission-head h3{font-size:1.2rem;font-weight:800;color:var(--coral-dark) !important;margin:1.1em 0 .4em;}
.about-mission-head p,.about-mission-foot p{color:var(--muted);font-size:.97rem;line-height:1.65;margin:0 0 .8em;}
.about-pledge{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;max-width:960px;margin:30px auto;}
.about-pledge-side{display:flex;align-items:center;gap:18px;padding:26px 28px;background:#fff;border:1px solid var(--border-color);}
.about-pledge-side i{flex-shrink:0;width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;background:var(--cream);color:var(--coral-dark);font-size:1.3rem;}
.about-pledge-side p{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1rem;line-height:1.35;color:var(--navy);}
.about-pledge-side--accent{background:var(--navy);border-color:var(--navy);}
.about-pledge-side--accent p{color:#fff;}
.about-pledge-side--accent i{background:var(--coral);color:#fff;}
.about-pledge-link{display:flex;align-items:center;justify-content:center;width:52px;color:var(--coral-dark);font-size:1.2rem;}
.about-mission-principle{font-weight:700;color:var(--navy) !important;}
.about-plans-intro{color:var(--muted);font-size:.97rem;line-height:1.6;margin:0;}
.about-plans-label{font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;margin:0 0 14px;}
.about-plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.about-plans-grid li{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid var(--border-color);background:#fff;transition:border-color .25s var(--ease);}
.about-plans-grid li:hover{border-color:var(--coral);}
.about-plans-grid i{flex-shrink:0;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--cream);color:var(--coral-dark);font-size:1rem;}
.about-plans-grid span{font-size:.9rem;line-height:1.45;color:var(--ink);padding-top:2px;}
.about-plans-grid span::first-letter{text-transform:uppercase;}
.about-plans-outro{max-width:820px;margin:26px auto 0;text-align:center;color:var(--muted);font-size:.95rem;line-height:1.6;}
.about-social{border-top:1px solid var(--border-color);}
.about-social-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start;}
.about-social-main h2{font-size:clamp(1.35rem,2.1vw,1.7rem);font-weight:900;}
.about-social-main p{color:var(--muted);font-size:.95rem;line-height:1.65;margin:0 0 1em;}
.about-social-quote{margin:22px 0;padding:18px 24px;border-left:4px solid var(--coral);background:var(--cream);}
.about-social-quote p{margin:0 !important;font-size:1.1rem !important;color:var(--navy) !important;line-height:1.45 !important;}
.about-community{padding:30px;background:var(--navy);}
.about-community h3{color:#fff !important;font-size:1.25rem;font-weight:800;}
.about-community p{color:rgba(255,255,255,.82);font-size:.95rem;line-height:1.6;margin:0 0 .9em;}
.about-community p:last-child{margin-bottom:0;}
.about-community-icon{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;background:var(--coral);color:#fff;font-size:1.3rem;margin-bottom:16px;}
.about-manifesto{background:var(--navy);color:#fff;padding:56px 0;text-align:center;}
.about-manifesto-inner{max-width:760px;margin-inline:auto;}
.about-manifesto-brand{font-weight:900;letter-spacing:.18em;font-size:1rem;color:var(--pink);margin:0 0 14px;}
.about-manifesto-brand i{margin-right:6px;}
.about-manifesto-tagline{font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.5;color:#fff;margin:0 0 26px;}
.about-manifesto-lines{display:grid;gap:10px;margin:0 0 24px;}
.about-manifesto-lines li{font-size:1rem;color:rgba(255,255,255,.85);padding:10px 0;border-top:1px solid rgba(255,255,255,.14);}
.about-manifesto-lines li:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.about-manifesto-final{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:900;color:var(--coral);margin:0;text-transform:uppercase;letter-spacing:.02em;}
@media (max-width:1100px){
.about-benefits{grid-template-columns:repeat(3,1fr);}
.about-plans-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
.about-story-grid,.about-journey-grid,.about-social-grid{grid-template-columns:1fr;gap:28px;}
.about-pledge{grid-template-columns:1fr;}
.about-pledge-link{width:auto;height:44px;transform:rotate(90deg);}
}
@media (max-width:600px){
.about-benefits{grid-template-columns:repeat(2,1fr);}
.about-plans-grid{grid-template-columns:1fr;}
.about-pledge-side{padding:20px;}
.about-community{padding:24px 20px;}
.about-manifesto{padding:40px 0;}
}
/* =========================================================
Blog — conținutul articolelor (liste, subtitluri, poze)
========================================================= */
.post-body h3{font-size:1.12rem;margin:26px 0 10px;font-weight:700;color:var(--navy) !important;}
.post-body ul,.post-body ol{margin:0 0 20px;padding-left:1.4em;}
.post-body ul{list-style:disc;}
.post-body ol{list-style:decimal;}
.post-body li{margin-bottom:6px;padding-left:2px;}
.post-body li::marker{color:var(--coral-dark);}
.post-body img{max-width:100%;height:auto;}
.post-body .post-lead{font-size:1.12rem;font-weight:600;color:var(--navy);line-height:1.55;}
.post-body .post-closing{font-size:1.05rem;color:var(--navy);}
.post-figures{display:grid;gap:12px;margin:24px 0 28px;}
.post-figures--2{grid-template-columns:repeat(2,1fr);}
.post-figures--3{grid-template-columns:repeat(3,1fr);}
.post-figures--4{grid-template-columns:repeat(4,1fr);}
.post-figures img{width:100%;height:100%;max-height:520px;object-fit:cover;border:1px solid var(--border-color);background:#fff;}
.post-figures--1 img{max-height:560px;}
.post-figures--3 img,.post-figures--4 img{object-fit:contain;}
@media (max-width:600px){
.post-figures--2,.post-figures--4{grid-template-columns:repeat(2,1fr);}
.post-figures--3{grid-template-columns:repeat(3,1fr);gap:8px;}
}
/* Footer — Powered by Risen Systems */
.footer-bottom-inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;}
.footer-powered a{color:var(--coral-dark);font-weight:600;}
.footer-powered a:hover{text-decoration:underline;}
/* Footer — date de contact sub logo */
.footer-contact{display:flex;flex-direction:column;gap:8px;margin:0 0 4px;}
.footer-contact li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--muted);}
.footer-contact i{color:var(--coral-dark);width:14px;margin-top:4px;flex-shrink:0;}
.footer-contact a{color:var(--muted);}
.footer-contact a:hover{color:var(--coral-dark);}
@media (max-width:600px){.footer-contact{align-items:center;}.footer-contact li{justify-content:center;text-align:center;}}
/* =========================================================
Poze clare, fără pelicula albastră (slider + carduri categorii)
========================================================= */
.hero .hero-film{display:none;}
.hero .eyebrow,.hero h1{text-shadow:0 2px 12px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45);}
.hero-arrow{background:rgba(0,0,0,.35);}
.category-tile{display:flex;flex-direction:column;aspect-ratio:auto;background:#fff;}
.category-tile img{aspect-ratio:1/1;height:auto;}
.category-overlay{display:none;}
.category-label{position:static;color:var(--navy);padding:12px 10px 14px;background:#fff;border-top:1px solid var(--border-color);}
.category-label small{color:var(--muted);}
/* Subcategorii: poze pătrate/late (ex. conserve) puțin mai mici, ca să nu domine
lângă sacii verticali; placeholder când subcategoria nu are încă poză. */
.subcat-img-wrap img.is-wide{max-width:70%;max-height:70%;}
.subcat-img-placeholder{width:96px;height:96px;display:flex;align-items:center;justify-content:center;background:var(--cream);color:var(--coral-dark);font-size:2rem;}
/* Coș — notă despre cashback */
.cart-cashback-note{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.88rem;color:var(--muted);margin:-6px 0 16px;}
.cart-cashback-note i{color:var(--coral-dark);}
.cart-cashback-note a{color:var(--coral-dark);font-weight:600;text-decoration:underline;}
/* Slider: textul stă pe un card semi-transparent (pozele rămân clare) */
.hero-content{align-items:flex-start;}
.hero-card{max-width:560px;padding:26px 30px 28px;background:rgba(0,20,40,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);position:relative;z-index:2;}
.hero-card .eyebrow{color:#cfe3f5 !important;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:700;}
.hero-card h1{margin-bottom:.6em;}
@media (max-width:768px){
.hero-card{max-width:none;margin:0 4px;padding:18px 18px 20px;}
}
/* Slider: pelicula pe tot sliderul (în locul cardului din spatele textului) */
.hero .hero-film{display:block;background:rgba(0,20,40,.45);}
.hero-card{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;}
@media (max-width:768px){.hero-card{padding:0;margin:0;}}
/* Slider: descrierea de sub titlu */
.hero-desc{color:#fff;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.5;margin:-.2em 0 1.1em;max-width:560px;text-shadow:0 2px 10px rgba(0,0,0,.55);}
.hero-desc[hidden]{display:none;}
/* Slider: fără pelicula uniformă; doar o umbră în stânga, sub text,
ca textul alb să se citească, iar restul pozei să rămână clar */
.hero .hero-film{display:block;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.42) 35%,rgba(0,0,0,.12) 60%,rgba(0,0,0,0) 75%);}
@media (max-width:768px){
.hero .hero-film{background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.1) 100%);}
}
/* Slider: poze curate, fără niciun fond peste ele; textul alb se citește prin umbră */
.hero .hero-film{display:none !important;}
.hero .eyebrow,.hero h1,.hero-desc{text-shadow:0 2px 4px rgba(0,0,0,.6),0 4px 18px rgba(0,0,0,.55);}
.hero-phones{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;position:relative;z-index:3;}
.hero-phones a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255,255,255,.92);color:var(--navy);font-weight:700;font-size:.95rem;}
.hero-phones a i{color:var(--coral-dark);}
.hero-phones a:hover{background:#fff;color:var(--coral-dark);}
/* Chenarul „Ai întrebări?” de pe paginile de catalog */
.catalog-help .cta-text p{margin:0 0 4px;}
.catalog-help-phone{color:var(--coral-dark);font-weight:700;white-space:nowrap;margin-left:4px;}
.catalog-help-btns{display:flex;flex-direction:column;gap:8px;}
.catalog-help-btns .btn{white-space:nowrap;}
@media (max-width:768px){.catalog-help-btns{width:100%;}.catalog-help-btns .btn{width:100%;}}
/* Conserve / poze pătrate: aceeași mărime vizuală ca sacii */
.subcat-img-wrap img.is-wide{max-width:60%;max-height:60%;}
.product-thumb-lg img.is-wide{max-width:66%;max-height:66%;}
.subcat-img-placeholder{width:110px;height:110px;border-radius:50%;font-size:2.4rem;background:linear-gradient(135deg,var(--cream),#e3eef6);}
/* =========================================================
Topbar: cele 2 telefoane în meniu (stânga)
========================================================= */
.topbar-phones{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.topbar-phones a{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:700;font-size:.88rem;white-space:nowrap;}
.topbar-phones a i{color:var(--coral-dark);font-size:.8rem;}
.topbar-phones a:hover{color:var(--coral-dark);}
.header-phone-text .header-phone-number{text-decoration:none;}
.header-phone-text .header-phone-number:hover{color:var(--coral-dark);}
.header-phone-icon{text-decoration:none;}
@media (max-width:1100px){.topbar-phones{gap:10px;}.topbar-phones a{font-size:.8rem;}}
@media (max-width:768px){.topbar-phones{display:none;}}
/* =========================================================
Slider — panou în culoarea site-ului în stânga, poza întreagă
(fără zoom / decupare) în dreapta, cu trecere lină între ele
========================================================= */
.hero{height:460px;background:linear-gradient(135deg,var(--coral-dark) 0%,var(--coral) 100%);}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none;z-index:1;}
.hero::before{width:420px;height:420px;left:-140px;bottom:-200px;}
.hero::after{width:260px;height:260px;left:30%;top:-120px;}
.hero .hero-slide{background-size:auto 100% !important;background-position:right center !important;background-repeat:no-repeat !important;}
.hero .hero-film{display:none !important;}
.hero .hero-fade{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg,var(--coral-dark) 0%,rgba(43,118,118,.97) 30%,rgba(43,118,118,.7) 42%,rgba(43,118,118,0) 58%);}
.hero .hero-card{max-width:600px;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.hero .eyebrow,.hero h1,.hero .hero-desc{text-shadow:none;}
.hero .hero-card .eyebrow{display:inline-block;background:#fff;color:var(--coral-dark) !important;padding:9px 20px;border-radius:999px;
font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;line-height:1.3;max-width:100%;}
.hero h1{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:900;line-height:1.08;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:.35em;}
.hero .hero-desc{color:#fff;opacity:.95;font-size:clamp(1rem,1.35vw,1.15rem);margin:0 0 22px;max-width:520px;}
.hero .hero-actions .btn{background:#f7931e;border-color:#f7931e;color:#fff;border-radius:999px !important;padding:.95em 1.9em;
font-weight:800;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 8px 20px rgba(0,0,0,.18);}
.hero .hero-actions .btn::after{content:"\2192";font-size:1.25em;line-height:1;margin-left:.2em;transition:transform .2s;}
.hero .hero-actions .btn:hover{background:#e07f0c;border-color:#e07f0c;}
.hero .hero-actions .btn:hover::after{transform:translateX(4px);}
.hero .hero-arrow{background:rgba(0,31,63,.35);}
.hero-dots button.active{background:#fff;}
@media (max-width:768px){
.hero{height:auto;display:flex;flex-direction:column;}
.hero::after{display:none;}
.hero .hero-slides{position:relative;inset:auto;height:220px;flex-shrink:0;}
.hero .hero-slide{background-size:cover !important;background-position:center !important;}
.hero .hero-fade{top:auto;height:60px;bottom:auto;top:160px;background:linear-gradient(0deg,var(--coral-dark) 0%,rgba(43,118,118,0) 100%);}
.hero .hero-content{height:auto;padding:4px 16px 46px;}
.hero .hero-card .eyebrow{font-size:.72rem;padding:7px 14px;margin-bottom:12px;}
.hero h1{font-size:1.6rem;}
.hero .hero-arrow{top:110px;}
}
/* marginea stângă a pozei se topește în panou (lățimea pozei vine din JS: --img-w) */
@media (min-width:769px){
.hero .hero-slide{
-webkit-mask-image:linear-gradient(90deg,transparent calc(100% - var(--img-w,100%)),#000 calc(100% - var(--img-w,100%) + 220px));
mask-image:linear-gradient(90deg,transparent calc(100% - var(--img-w,100%)),#000 calc(100% - var(--img-w,100%) + 220px));
}
}
.hero::after{left:22%;opacity:.7;}
/* Slider: textul aliniat la stânga (nu centrat) */
.hero .hero-content{max-width:none;margin-left:0;margin-right:auto;padding-left:90px;align-items:flex-start;}
.hero .hero-card{max-width:560px;margin-right:auto;}
@media (max-width:768px){.hero .hero-content{padding-left:16px;padding-right:16px;}}
/* Slider: butoanele de navigare (punctele de jos) sunt cerculețe */
.hero .hero-dots{gap:10px;align-items:center;}
.hero .hero-dots button{width:11px;height:11px;padding:0;border-radius:50% !important;background:rgba(255,255,255,.45);border:2px solid transparent;cursor:pointer;transition:background .2s,transform .2s;}
.hero .hero-dots button.active{width:13px;height:13px;background:#fff;transform:none;}
.hero .hero-dots button:hover{background:rgba(255,255,255,.8);}
/* Slider: săgețile stânga/dreapta rotunde */
.hero .hero-arrow{border-radius:50% !important;width:46px;height:46px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);color:#fff;}
.hero .hero-arrow:hover{background:#fff;color:var(--coral-dark);}
/* Slider: panoul verde cu 10% mai îngust (mai spre stânga) */
@media (min-width:769px){
.hero .hero-fade{background:linear-gradient(90deg,var(--coral-dark) 0%,rgba(43,118,118,.97) 20%,rgba(43,118,118,.7) 32%,rgba(43,118,118,0) 48%);}
.hero .hero-card{max-width:520px;}
}
/* Home: logourile partenerilor de 3 ori mai mari */
.partners-section{padding:28px 0;}
.partners-slider{flex-wrap:wrap;justify-content:center;gap:28px 40px;}
.partner-logo{flex:0 1 auto;}
.partner-logo img{max-height:132px;max-width:min(390px,100%);}
@media (max-width:768px){
.partners-slider{gap:18px 24px;}
.partner-logo img{max-height:90px;max-width:42vw;}
}
/* Despre noi: secțiunea „Ce aducem în Moldova” cu 30% mai mare */
.about-quality-heading{max-width:1066px;}
.about-quality .eyebrow{font-size:1.1rem;}
.about-quality-text{font-size:clamp(1.37rem,1.95vw,1.56rem);}
.about-quality-sub{font-size:1.24rem;}
.about-benefits{gap:18px;}
.about-benefits li{padding:26px 16px;gap:13px;}
.about-benefits i{width:62px;height:62px;font-size:1.56rem;}
.about-benefits span{font-size:1.2rem;}
/* =========================================================
Checkout — iconițe gri (opțiuni secundare), data livrării, mobil 100%
========================================================= */
.tile-option.tile-muted i{color:#9aa3ab;}
.tile-option.tile-muted span{color:#6b7480;}
.tile-option.tile-muted.active i{color:#6b7480;}
.delivery-date-box{margin-top:18px;padding:16px 18px;background:var(--cream);border:1px solid var(--border-color);}
.delivery-date-label{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);font-size:.92rem;margin-bottom:10px;}
.delivery-date-label i{color:var(--coral-dark);}
.delivery-date-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.delivery-date-chip{border:1px solid var(--border-color);background:#fff;color:var(--navy);font-weight:600;font-size:.88rem;padding:10px 16px;cursor:pointer;min-height:44px;}
.delivery-date-chip.active{border:2px solid var(--coral);color:var(--coral-dark);}
.delivery-date-controls input[type="date"]{min-height:44px;padding:8px 12px;border:1px solid var(--border-color);font-size:16px;background:#fff;flex:1 1 180px;max-width:240px;}
.delivery-date-hint{display:block;margin-top:8px;color:var(--muted);font-size:.8rem;}
@media (max-width:991px){
.checkout-grid{grid-template-columns:minmax(0,1fr);gap:20px;}
.checkout-left,.checkout-right{min-width:0;}
.summary-card{position:static;top:auto;}
}
@media (max-width:640px){
.checkout-section .section-title{font-size:1.35rem;}
.checkout-card,.summary-card{padding:18px 14px;margin-bottom:14px;}
.checkout-card h2,.summary-card h2{font-size:1.08rem;margin-bottom:14px;}
.checkout-section .form-row{grid-template-columns:minmax(0,1fr);gap:0;}
.checkout-section input,.checkout-section select,.checkout-section textarea{font-size:16px;max-width:100%;}
.checkout-section .options-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.checkout-section .tile-option{min-height:74px;padding:12px 6px;}
.checkout-section .tile-option span{font-size:.78rem;word-break:break-word;}
.dynamic-panel,.credit-info-box,.delivery-date-box{padding:14px 12px;}
.delivery-date-controls input[type="date"]{max-width:none;flex:1 1 100%;}
.delivery-date-chip{flex:1 1 100%;}
.order-item-mini{flex-wrap:wrap;}
.order-item-mini img{width:52px;height:52px;flex-shrink:0;}
.order-item-info{flex:1 1 0;min-width:0;}
.order-item-info h4{font-size:.85rem;word-break:break-word;}
.order-item-price{margin-left:auto;font-weight:700;}
.summary-line{gap:10px;font-size:.88rem;}
.summary-line span:last-child{white-space:nowrap;}
#placeOrderBtn{width:100%;min-height:50px;font-size:1rem;}
.saved-address-card{min-width:0;}
}
.delivery-date-box.has-error{border-color:var(--red);}
.delivery-date-box.has-error input[type="date"]{border-color:var(--red);}
/* Coș: nota despre cashback, sub totaluri, în același bloc */
.cart-totals .cart-cashback-note{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--border-color);justify-content:flex-end;text-align:right;font-size:.85rem;width:100%;}
@media (max-width:768px){
.cart-totals .cart-cashback-note{justify-content:flex-start;text-align:left;}
.totals-inline{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.totals-item{align-items:flex-start;}
.totals-item.total-final{grid-column:1 / -1;align-items:flex-start;padding-top:10px;border-top:1px solid var(--border-color);}
}
/* rândurile ascunse din sumar (reducere 0, cashback 0) chiar să nu apară */
.totals-item[hidden],.cart-bottom[hidden],.cart-toolbar[hidden]{display:none !important;}
/* ===== Pagina produsului: preț nou + preț vechi tăiat ===== */
.buy-price-block{flex-wrap:wrap;row-gap:6px;}
.buy-price-old{
font-size:1.15rem;
font-weight:600;
color:var(--muted, #8a94a6);
text-decoration:line-through;
text-decoration-thickness:2px;
line-height:1;
}
.buy-price-discount{
display:inline-flex;
align-items:center;
padding:4px 10px;
border-radius:999px;
background:#e53935;
color:#fff;
font-size:.9rem;
font-weight:800;
line-height:1;
align-self:center;
}
.buy-price-old[hidden],.buy-price-discount[hidden]{display:none !important;}
@media (max-width:640px){
.buy-price-current{font-size:1.9rem;}
.buy-price-old{font-size:1rem;}
}
/* Blog: pozele din textul articolului se văd întregi, fără tăiere */
.post-body img,
.post-figures img{
width:100%;
height:auto !important;
max-height:none !important;
object-fit:contain !important;
}
.post-figures{align-items:start;}
.post-body p img,.post-body > img{width:auto;max-width:100%;}
/* Blog: tabele în articole (ex. planul de tranziție la o hrană nouă) */
.post-body .post-table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:.95rem;background:#fff;}
.post-body .post-table th,.post-body .post-table td{border:1px solid var(--border-color);padding:10px 14px;text-align:left;}
.post-body .post-table thead th{background:var(--navy);color:#fff;font-weight:700;}
.post-body .post-table tbody tr:nth-child(even) td{background:var(--cream);}
.post-body .post-table td:not(:first-child),.post-body .post-table th:not(:first-child){text-align:center;width:28%;}
@media (max-width:600px){.post-body .post-table th,.post-body .post-table td{padding:8px 10px;font-size:.88rem;}}
/* Pagina produsului: poza principală rămâne în chenarul pătrat pe orice ecran.
Înainte, pe telefon, o poză înaltă (sac de hrană) lărgea chenarul peste lățimea ecranului. */
.product-top-grid > *{min-width:0;}
.product-gallery-vertical{min-width:0;width:100%;}
.main-image-display{min-width:0;overflow:hidden;}
.main-image-display img{
position:absolute;
top:20px;left:20px;
width:calc(100% - 40px) !important;
height:calc(100% - 40px) !important;
max-width:none;max-height:none;
min-height:0 !important;
object-fit:contain;
}
@media (max-width:560px){
.main-image-display{flex:none;width:100%;padding:0;}
.main-image-display img{top:12px;left:12px;width:calc(100% - 24px) !important;height:calc(100% - 24px) !important;}
}
/* Notificare „Nu este în stoc” (apare doar la apăsarea butonului de coș) */
.p4f-toast{
position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:10050;
display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);
background:#1f2937;color:#fff;padding:13px 20px;font-weight:600;font-size:.95rem;
box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;
transition:opacity .25s ease,transform .25s ease;
}
.p4f-toast.show{opacity:1;transform:translate(-50%,0);}
.p4f-toast i{color:#fbbf24;}
@media (max-width:768px){.p4f-toast{bottom:84px;}}
/* cashback 0 lei -> ascuns */
.cashback-badge[hidden]{display:none !important;}