/*
Theme Name: Macca Lam Dong
Theme URI: https://hatmaccalamdong.com/
Author: Macca Lam Dong
Description: Giao diện thương hiệu Mắc Ca Lâm Đồng.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: macca-lam-dong
*/
@import url("main.css");

/* Brand system 1.1 — 5 SKU / 3 product lines */
:root{--forest:#1f4d3a;--shell:#1f4d3a;--kernel:#d7a63d;--broken:#6b4026;--mist:#dde8df;--kernel-cream:#f7f1e5}
.product-filters{display:flex;gap:.65rem;flex-wrap:wrap;margin:-2rem 0 2rem}
.product-filters span{padding:.55rem 1rem;border:1px solid var(--line);border-radius:999px;font-size:.72rem;font-weight:700;background:#fff}
.product-grid-five{grid-template-columns:repeat(6,1fr)}
.product-grid-five .product-card{grid-column:span 2}
.product-grid-five .product-card:nth-child(4){grid-column:2/span 2}
.product-grid-five .product-card:nth-child(5){grid-column:4/span 2}
.product-grid-five .product-image{height:360px}
.product-grid-five .product-body{display:flex;flex-direction:column;min-height:325px}
.product-grid-five .product-footer{margin-top:auto}
.badge-shell{background:var(--shell);color:#fff}
.badge-kernel{background:var(--kernel);color:#24231f}
.badge-broken{background:var(--broken);color:#fff}
.product-shell{border-top:5px solid var(--shell)}
.product-kernel{border-top:5px solid var(--kernel)}
.product-broken{border-top:5px solid var(--broken)}
.choice-guide{background:var(--mist)}
.choice-guide h2{font-size:clamp(2.8rem,5vw,5.3rem)}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.choice-grid article{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:1.25rem;padding:2rem}
.choice-grid b{font-size:.7rem;color:var(--rust)}
.choice-grid h3{font:600 1.45rem "Playfair Display";margin:1rem 0 .5rem}
.choice-grid p{color:#68766f;margin:0}
@media(max-width:1100px){.product-grid-five{grid-template-columns:repeat(2,1fr)}.product-grid-five .product-card,.product-grid-five .product-card:nth-child(4),.product-grid-five .product-card:nth-child(5){grid-column:auto}.product-grid-five .product-card:last-child{grid-column:1/-1}.product-grid-five .product-card:last-child .product-image{height:420px}}
@media(max-width:900px){.choice-grid{grid-template-columns:1fr}.product-grid-five{grid-template-columns:1fr}.product-grid-five .product-card:last-child{grid-column:auto}.product-grid-five .product-card:last-child .product-image{height:340px}}