/* ================================================================
   public/css/hero.css
   Hero section & product label styles.
   Included via the layout's <head> or compiled via Vite/Mix.
================================================================ */

/* ── HERO ── */
.hero{position:relative;width:100%;overflow:hidden;background:#1a3826}
.hero-bg{width:100%;display:block;min-height:0;object-fit:cover;object-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(170deg,rgba(8,26,14,.42) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.08) 100%)}

/* HERO CENTER TEXT */
.hero-center{
    position:absolute;
    top:8%;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    color:#fff;
    z-index:20;
    width:38%;
    min-width:280px;
}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:500;margin-bottom:12px}
.hero-center h1{font-size:clamp(26px,4vw,60px);font-weight:800;line-height:1.05;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.hero-center h2{font-size:clamp(20px,3vw,46px);font-weight:700;line-height:1.1;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.hero-center p{font-size:clamp(12px,1.3vw,17px);margin-top:8px;opacity:.9}
.hero-main-btn{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:12px 32px;border-radius:40px;background:var(--green);color:#fff;text-decoration:none;font-weight:700;font-size:clamp(12px,1.3vw,15px);transition:background .15s;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.hero-main-btn:hover{background:var(--green-light)}

/* ── PRODUCT LABELS ── */
.pl{position:absolute;z-index:20}

/* Positions */
.pl-pluriball{left:7%;top:30%;text-align:left}
.pl-film{left:7%;top:55%;text-align:left}
.pl-reggia{left:30%;top:68%;text-align:left}
.pl-wpc{right:5%;top:22%;text-align:right}
.pl-pvc{right:5%;top:46%;text-align:right}
.pl-mdf{right:5%;top:65%;text-align:right}

/* SPC */
.pl-spc{position:absolute;left:48%;top:67%;text-align:left;z-index:20}
.pl-spc h3{margin:0 0 2px;font-size:clamp(12px,1.4vw,22px);font-weight:900;line-height:1.1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.pl-spc .pl-sub{color:rgba(255,255,255,.9);font-size:clamp(9px,.85vw,13px);margin-bottom:5px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.pl-spc .pl-feat{display:flex;align-items:center;gap:6px;margin-bottom:3px;color:rgba(255,255,255,.9);font-size:clamp(8px,.8vw,12px);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.pl-spc .feat-icon{width:13px;height:13px;min-width:13px;border-radius:50%;background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center}
.pl-spc .feat-icon::after{content:'';width:5px;height:5px;border-radius:50%;background:#fff}
.pl-spc .pl-btn{margin-top:6px;padding:5px 13px;border-radius:18px;font-size:clamp(9px,.85vw,12px);font-weight:700}

/* Shared label styles */
.pl h3{color:#fff;font-size:clamp(12px,1.4vw,22px);font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.6);line-height:1.1;margin-bottom:2px}
.pl .pl-sub{color:rgba(255,255,255,.9);font-size:clamp(9px,.85vw,13px);margin-bottom:4px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.pl .pl-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(29,93,53,.88);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:clamp(8px,.8vw,12px);padding:3px 9px;border-radius:20px;margin-bottom:4px;font-weight:600}
.pl .pl-badge svg{width:10px;height:10px;flex-shrink:0}
.pl .pl-feat{color:rgba(255,255,255,.9);font-size:clamp(8px,.8vw,12px);display:flex;align-items:center;gap:4px;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.pl .pl-feat svg{width:10px;height:10px;flex-shrink:0;color:#7de8a8}
.pl-btn{display:inline-block;padding:5px 13px;background:var(--green);color:#fff;border-radius:30px;text-decoration:none;font-size:clamp(9px,.85vw,12px);font-weight:700;margin-top:4px;border:none;cursor:pointer;transition:background .15s;white-space:nowrap}
.pl-btn:hover{background:var(--green-light)}

/* Right-aligned flex-end fixes */
.pl-wpc .pl-badge,.pl-pvc .pl-badge,.pl-mdf .pl-badge{margin-left:auto}
.pl-wpc .pl-feat,.pl-pvc .pl-feat,.pl-mdf .pl-feat{justify-content:flex-end}

/* Mobile product buttons */
.hero-mobile-products{display:none;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:16px;padding:0 4px}
.hero-mobile-products .mob-prod-btn{background:rgba(29,93,53,.88);border:1px solid rgba(255,255,255,.25);color:#fff;padding:7px 13px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;backdrop-filter:blur(4px);white-space:nowrap}

/* ── CATEGORY GRID ── */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat-card{background:#fff;border:1px solid #e8ece9;border-radius:var(--radius-lg);padding:24px 18px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:12px;transition:all .2s}
.cat-card:hover{border-color:var(--green);box-shadow:0 4px 20px rgba(29,93,53,.12);transform:translateY(-2px)}
.cat-img{font-size:38px}
.cat-label h3{font-size:15px;font-weight:600;margin-bottom:5px}
.cat-label p{font-size:13px;color:var(--muted);line-height:1.4}
.arrow{color:var(--green);font-size:18px;margin-top:6px}

/* ── PRODUCTS GRID ── */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod-card{background:#fff;border:1px solid #e8ece9;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all .2s}
.prod-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.1);transform:translateY(-2px)}
.prod-img-wrap{background:var(--gray);padding:30px 20px;text-align:center;font-size:52px;position:relative}
.prod-badge{position:absolute;top:10px;right:10px;background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px}
.prod-badge.recycled{background:#0a7a4a}
.prod-info{padding:16px}
.prod-info h3{font-size:15px;font-weight:600;margin-bottom:5px;line-height:1.3}
.prod-sub{font-size:12px;color:var(--muted);margin-bottom:10px}
.prod-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.prod-tag{background:#eaf3ee;color:#1a5c35;font-size:11px;padding:3px 8px;border-radius:20px;font-weight:500}
.view-btn{width:100%;background:var(--green);color:#fff;border:none;padding:9px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
.view-btn:hover{background:var(--green-light)}

/* ── BANNER ── */
.banner{background:var(--green-dark);color:#fff;padding:72px 0}
.banner-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:60px}
.banner-text{flex:1;min-width:0}
.banner-text h2{font-size:clamp(26px,3.5vw,42px);font-weight:700;line-height:1.2;margin-bottom:14px}
.banner-text h2 em{color:#7de8a8;font-style:normal}
.banner-text p{font-size:15px;opacity:.85;margin-bottom:22px;line-height:1.6}
.banner-points{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.banner-point{display:flex;align-items:center;gap:10px;font-size:14px;opacity:.9}
.check{background:#2a7a48;color:#7de8a8;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.banner-logo-wrap{flex-shrink:0;width:240px;display:flex;align-items:center;justify-content:center}
.banner-logo-wrap img{max-width:100%;max-height:180px;object-fit:contain}

/* ── SHOWCASE ── */
.showcase-grid{display:grid;grid-template-columns:220px 1fr;gap:0;border:1px solid #e8ece9;border-radius:var(--radius-lg);overflow:hidden}
.showcase-nav{background:#f8faf8;border-right:1px solid #e8ece9}
.showcase-nav-item{padding:13px 18px;font-size:13px;cursor:pointer;border-left:3px solid transparent;transition:all .15s;font-weight:500;color:#555}
.showcase-nav-item:hover,.showcase-nav-item.active{background:#fff;border-left-color:var(--green);color:var(--green)}
.showcase-pane{padding:30px}
.showcase-pane-header h3{font-size:21px;font-weight:700;margin-bottom:6px}
.showcase-pane-header p{color:var(--muted);font-size:14px;margin-bottom:22px}
.showcase-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sp-card{background:#f8faf8;border:1px solid #e8ece9;border-radius:var(--radius);padding:18px;text-align:center;cursor:pointer;transition:all .15s}
.sp-card:hover{border-color:var(--green);background:#fff}
.sp-card h4{font-size:13px;font-weight:600;margin-bottom:5px}
.sp-card span{font-size:12px;color:var(--green);font-weight:600}

/* ── WHY GRID ── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{background:#fff;border:1px solid #e8ece9;border-radius:var(--radius-lg);padding:26px}
.why-icon{font-size:30px;margin-bottom:12px}
.why-card h3{font-size:16px;font-weight:600;margin-bottom:8px}
.why-card p{font-size:14px;color:var(--muted);line-height:1.6}

/* ── TESTIMONIALS ── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-card{background:#fff;border:1px solid #e8ece9;border-radius:var(--radius-lg);padding:26px}
.stars{color:#f59e0b;font-size:16px;margin-bottom:12px}
.testi-card blockquote{font-size:14px;line-height:1.7;color:#333;font-style:italic;margin-bottom:18px}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-avatar{width:38px;height:38px;background:var(--green);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.testi-author strong{display:block;font-size:14px;font-weight:600}
.testi-author span{font-size:12px;color:var(--muted)}

/* ── CTA BAND ── */
.cta-band{background:var(--green);padding:64px 0;text-align:center;color:#fff}
.cta-band h2{font-size:clamp(22px,3vw,36px);font-weight:700;margin-bottom:12px}
.cta-band p{font-size:clamp(14px,1.8vw,17px);opacity:.85;margin-bottom:30px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ═══════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
═══════════════════════════════ */
@media(max-width:1024px){
    .cat-grid{grid-template-columns:repeat(2,1fr)}
    .prod-grid{grid-template-columns:repeat(2,1fr)}
    .why-grid,.testi-grid{grid-template-columns:repeat(2,1fr)}
    .banner-inner{flex-direction:column;gap:32px;text-align:center}
    .banner-logo-wrap{width:auto;max-width:200px;margin:0 auto}
    .banner-points{align-items:flex-start;text-align:left}
    .showcase-grid{grid-template-columns:1fr}
    .showcase-nav{display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid #e8ece9;scrollbar-width:none}
    .showcase-nav::-webkit-scrollbar{display:none}
    .showcase-nav-item{border-left:none;border-bottom:3px solid transparent;white-space:nowrap;padding:12px 16px}
    .showcase-nav-item.active{border-bottom-color:var(--green);border-left-color:transparent}
    .pl h3{font-size:clamp(10px,1.8vw,16px)}
    .pl .pl-sub,.pl .pl-feat,.pl .pl-badge{font-size:clamp(8px,.9vw,11px)}
    .pl-btn{padding:4px 10px;font-size:clamp(8px,.85vw,11px)}
}

/* ═══════════════════════════════
   RESPONSIVE — MOBILE (≤680px)
═══════════════════════════════ */
@media(max-width:680px){
    .hero-bg{min-height:55vh;object-position:center top}
    .hero-center{width:90%;top:10%}
    .hero-center h1{font-size:clamp(22px,7vw,34px)}
    .hero-center h2{font-size:clamp(18px,5.5vw,28px)}
    .hero-center p{font-size:13px}
    .hero-main-btn{padding:11px 26px;font-size:13px;margin-top:14px}
    .pl{display:none}
    .hero-mobile-products{display:flex}
    .cat-grid,.prod-grid,.why-grid,.testi-grid{grid-template-columns:1fr}
    .banner{padding:44px 0}
    .banner-inner{padding:0 16px;gap:20px}
    .banner-logo-wrap{max-width:140px}
    .showcase-pane{padding:18px 14px}
    .showcase-prod-grid{grid-template-columns:1fr 1fr}
    .cta-band{padding:44px 0}
    .cta-band > div{padding:0 16px}
    .cta-btns{flex-direction:column;align-items:center}
    .cta-btns .btn{width:100%;justify-content:center;max-width:300px}
}

@media(max-width:400px){
    .hero-center h1{font-size:22px}
    .hero-center h2{font-size:18px}
    .showcase-prod-grid{grid-template-columns:1fr}
    .hero-mobile-products .mob-prod-btn{font-size:10px;padding:6px 10px}
}


/* ============================================================
   AmaPack — Public Product Pages CSS
   Append to your main stylesheet (e.g. public/css/app.css)
   ============================================================ */

/* ── Shared: breadcrumb hero ─────────────────────────────── */
.prod-list-hero {
    background: linear-gradient(135deg, #f0f7f0 0%, #e8f5e9 100%);
    padding: 3rem 1.5rem 2.5rem;
    border-bottom: 1px solid #d4e8d4;
}
.plh-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.breadcrumb-nav {
    font-size: .85rem;
    color: #666;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.breadcrumb-nav a {
    color: #2e7d32;
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb-nav a:hover { text-decoration: underline; }
.bc-sep { color: #aaa; }
.prod-list-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    margin: 0 0 .5rem;
    line-height: 1.15;
}
.prod-list-hero p {
    color: #555;
    font-size: 1.05rem;
    margin: 0;
}

/* ── Filter bar ──────────────────────────────────────────── */
.filter-bar-section {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.filter-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.filter-scroll {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-btn {
    padding: .4rem 1.1rem;
    border-radius: 50px;
    border: 1.5px solid #ddd;
    background: transparent;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    color: #444;
    transition: all .2s;
}
.filter-btn:hover,
.filter-btn.active {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}
.search-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f5f5f5;
    border-radius: 8px;
    padding: .4rem .9rem;
    min-width: 200px;
}
.search-wrap svg { color: #888; flex-shrink: 0; }
.search-wrap input {
    border: none;
    background: transparent;
    outline: none;
    font-size: .9rem;
    width: 100%;
    color: #333;
}

/* ── Product list grid ───────────────────────────────────── */
.pl-grid-section {
    padding: 3rem 1.5rem 4rem;
    background: #fafafa;
}
.pl-grid-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.pl-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.pl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.pl-card.hidden { display: none; }

.pl-img-wrap {
    position: relative;
    background: #f2f5f2;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pl-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.pl-card:hover .pl-img-wrap img { transform: scale(1.04); }
.pl-img-placeholder,
.pl-img-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 4rem;
}
.pl-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: .25rem .75rem;
    border-radius: 50px;
    font-size: .75rem;
    font-weight: 700;
    background: #2e7d32;
    color: #fff;
}
.pl-card-body {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .45rem;
}
.pl-cat-pill {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #2e7d32;
    background: #e8f5e9;
    padding: .2rem .6rem;
    border-radius: 50px;
    align-self: flex-start;
}
.pl-card-body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0;
}
.pl-desc {
    font-size: .85rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.pl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .25rem;
}
.pl-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1a1a1a;
}
.pl-price-on-req {
    font-size: .82rem;
    color: #888;
    font-style: italic;
}
.in-stock  { color: #2e7d32; font-size: .8rem; font-weight: 600; }
.out-stock { color: #c62828; font-size: .8rem; font-weight: 600; }

.pl-view-btn {
    margin-top: .5rem;
    width: 100%;
    padding: .65rem;
    border-radius: 10px;
    border: none;
    background: #2e7d32;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.pl-view-btn:hover { background: #1b5e20; }

/* Empty state */
.pl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: #aaa;
    font-size: 1rem;
}
.pl-empty.hidden { display: none; }

/* ── Product detail page ─────────────────────────────────── */
.pd-section {
    padding: 3rem 1.5rem 5rem;
    background: #fff;
}
.pd-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 768px) {
    .pd-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* Gallery */
.pd-gallery { display: flex; flex-direction: column; gap: 1rem; }
.pd-main-img {
    border-radius: 16px;
    overflow: hidden;
    background: #f2f5f2;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pd-emoji-placeholder,
.pd-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 6rem;
}
.pd-thumbs {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.pd-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color .2s;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.active { border-color: #2e7d32; }
.pd-thumb:hover  { border-color: #66bb6a; }

/* Info panel */
.pd-info { display: flex; flex-direction: column; gap: 1.1rem; }
.pd-cat-pill {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #2e7d32;
    background: #e8f5e9;
    padding: .25rem .8rem;
    border-radius: 50px;
    align-self: flex-start;
}
.pd-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0;
}
.pd-desc {
    font-size: .95rem;
    color: #555;
    line-height: 1.7;
    margin: 0;
}
.pd-meta-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.pd-meta-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.pd-meta-label { font-size: .75rem; color: #999; text-transform: uppercase; letter-spacing: .05em; }
.pd-meta-val   { font-size: .95rem; font-weight: 600; color: #333; }

.pd-price-row {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.pd-price {
    font-size: 1.8rem;
    font-weight: 900;
    color: #1a1a1a;
}
.pd-price-note { font-size: .8rem; color: #999; }
.pd-price-req  { font-size: 1rem; color: #888; font-style: italic; }

/* Order card */
.pd-order-card {
    background: #f9fbf9;
    border: 1.5px solid #d4e8d4;
    border-radius: 16px;
    padding: 1.75rem;
    margin-top: .5rem;
}
.pd-order-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 1.25rem;
}
.pd-form {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.pd-form-row {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.pd-form-row label {
    font-size: .82rem;
    font-weight: 600;
    color: #555;
}
.pd-form-row input,
.pd-form-row textarea {
    padding: .6rem .9rem;
    border: 1.5px solid #ddd;
    border-radius: 9px;
    font-size: .92rem;
    color: #333;
    outline: none;
    background: #fff;
    transition: border-color .2s;
    font-family: inherit;
}
.pd-form-row input:focus,
.pd-form-row textarea:focus {
    border-color: #2e7d32;
}
.pd-form-row textarea { resize: vertical; }

.pd-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .8rem 1.5rem;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
    margin-top: .25rem;
}
.pd-submit-btn:hover { background: #1b5e20; transform: translateY(-1px); }
.pd-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.pd-form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #2e7d32;
    font-weight: 600;
    font-size: 1rem;
}
.pd-form-success.hidden { display: none; }
.pd-form.hidden         { display: none; }

/* Related products */
.related-section { background: #f5f7f5; }
.related-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 1.5rem;
}

/* ── Featured products: "View All" link ──────────────────── */
.feat-view-all {
    text-align: center;
    margin-top: 2.5rem;
}
.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 2rem;
    border-radius: 50px;
    border: 2px solid #2e7d32;
    color: #2e7d32;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: all .2s;
}
.view-all-btn:hover {
    background: #2e7d32;
    color: #fff;
}

/* DB image inside featured card */
.prod-db-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Utility */
.hidden { display: none !important; }