/*
Theme Name: Hongyao Colour Works
Version: 2.0
*/
:root{--purple:#3c276e;--yellow:#eccb2e;--ink:#292435;--muted:#706a7b;--line:#e6e2ed;--light:#f6f4fa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font:16px/1.7 Arial,Helvetica,sans-serif;color:var(--ink);background:white}a{color:inherit;text-decoration:none}a:hover{color:var(--purple)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #b88c00;outline-offset:5px}img{max-width:100%;display:block}button,input,textarea{font:inherit}.wrap{max-width:1240px;margin:auto;padding:0 30px}.topline{background:var(--purple);color:white;font-size:11px;letter-spacing:1.4px;padding:9px 0}.topline .wrap{display:flex;justify-content:space-between}.site-header{background:white;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:95px;gap:25px}.brand{font-weight:900;font-size:31px;letter-spacing:-1px;color:var(--purple);line-height:1}.brand b{color:#b59500}.brand small{font-size:9px;letter-spacing:3px;display:block;margin-top:10px;font-weight:600}.nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:bold}.button,button{display:inline-flex;align-items:center;justify-content:center;gap:25px;background:var(--yellow);border:1px solid var(--yellow);color:var(--purple);padding:13px 23px;font-weight:700;font-size:13px;border-radius:0;cursor:pointer}.button:hover{background:var(--purple);border-color:var(--purple);color:white}.button.outline{background:transparent;border-color:var(--purple);color:var(--purple)}.button.outline:hover{background:var(--purple);color:white}.menu-toggle{display:none}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:2.3px;font-weight:700;color:var(--purple)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(40px,4.4vw,66px);line-height:1.08;letter-spacing:-2.5px;margin:22px 0}h2{font-size:clamp(30px,3vw,42px);line-height:1.16;letter-spacing:-1.2px;margin:16px 0 22px}h3{line-height:1.3;font-size:21px}p{color:var(--muted)}.hero{background:linear-gradient(105deg,#f4f0fa 0%,#fcfbfd 64%,#f4eff8 100%);position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:55px;min-height:600px;padding-top:55px;padding-bottom:60px}.hero h1 em{font-style:normal;color:var(--purple)}.hero-copy>p{max-width:530px;font-size:16px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.hero-visual{position:relative;padding:26px 0}.hero-visual:before{content:'';position:absolute;background:var(--yellow);width:88%;height:88%;top:2%;right:-15%;border-radius:50%}.hero-visual img{position:relative;width:100%;aspect-ratio:1.1;object-fit:contain;background:white;box-shadow:0 25px 65px #3c276e18;transform:rotate(-3deg)}.photo-note{position:relative;background:var(--purple);color:white;display:inline-block;padding:10px 20px;font-size:11px;letter-spacing:1px;margin-top:-10px;margin-left:18px}.trustbar{background:var(--purple);color:white}.trust-inner{display:grid;grid-template-columns:repeat(5,1fr);padding:24px 30px;gap:20px}.trust-inner span{font-size:12px;border-right:1px solid #ffffff35;padding-right:15px}.trust-inner span:last-child{border:0}.trust-inner b{display:block;color:var(--yellow);font-size:16px}.section{padding:85px 0}.section.soft{background:var(--light)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:35px}.section-head p{max-width:420px;margin-bottom:20px}.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.product-card{border:1px solid var(--line);padding:0 0 23px;transition:transform .2s,box-shadow .2s;background:white;display:block}.product-card:hover{transform:translateY(-5px);box-shadow:0 14px 35px #3c276e0e}.product-image{background:white;padding:20px}.product-image img{width:100%;height:280px;object-fit:contain}.product-copy{padding:0 25px}.product-copy .num{color:#b6aacb;font-size:11px;letter-spacing:2px}.product-copy h3{margin:10px 0}.product-copy p{font-size:13px;min-height:44px}.text-link{font-size:12px;font-weight:700;color:var(--purple);border-bottom:1px solid #c8bfd8;padding-bottom:5px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.two-col>img{width:100%;height:470px;object-fit:cover}.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:35px}.reason{border-top:3px solid var(--yellow);padding:25px 0 0}.reason span{font-size:12px;color:var(--purple)}.reason h3{margin:12px 0}.reason p{font-size:14px}.quality{background:var(--purple);color:white}.quality .eyebrow,.quality .text-link{color:var(--yellow)}.quality p{color:#ddd5ee}.documents{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:35px 0 20px}.document{border:1px solid #ffffff35;padding:32px}.document strong{font-size:38px;color:var(--yellow);letter-spacing:-1px}.document h3{font-size:17px;margin:12px 0}.document p{font-size:13px}.caption{font-size:12px}.factory-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.factory-gallery img{width:100%;height:230px;object-fit:cover}.factory-gallery h3{font-size:14px;margin:15px 0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.step{border-top:1px solid #cbc4d6;padding-top:20px}.step b{font-size:36px;color:var(--purple);font-weight:400}.step h3{font-size:17px}.step p{font-size:13px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.guide{border:1px solid var(--line);padding:30px}.guide h3{font-size:19px;margin:18px 0}.guide p{font-size:13px}.cta{background:var(--yellow);padding:60px 0}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.cta h2{margin:0;max-width:700px}.cta .button{background:var(--purple);color:white;border-color:var(--purple)}footer{background:#241840;color:white;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:55px}.footer-grid .brand{color:white}.footer-grid p{font-size:13px;color:#c4b8d8;margin-top:22px}.footer-grid h3{font-size:13px;color:var(--yellow)}.footer-grid a{display:block;font-size:13px;color:#e3dcec;margin:7px 0}.copyright{font-size:11px;color:#bfb2d0;border-top:1px solid #ffffff22;margin-top:40px;padding-top:20px}.preview{font-size:11px;background:#f4f0fa;padding:7px 20px;text-align:center;color:var(--purple)}.page-banner{background:var(--light);padding:45px 0;border-bottom:4px solid var(--yellow)}.page-banner h1{font-size:42px;margin:12px 0}.breadcrumbs{font-size:11px;letter-spacing:1px;color:var(--purple)}.article{max-width:1000px;margin:auto;padding:55px 30px 75px}.article>h1{display:none}.article h2{font-size:29px;margin-top:40px}.article .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.article .card{border:1px solid var(--line);padding:20px}.article .card img{height:200px;object-fit:contain;width:100%}.article .card h3{font-size:18px}.article>img{margin:0 auto 30px;max-height:480px;object-fit:contain}.article ul{padding-left:22px;color:var(--muted)}label{display:block;margin:18px 0;font-size:13px}input,textarea{width:100%;border:1px solid #d6cfdf;background:white;padding:12px}textarea{min-height:130px}fieldset{border:1px solid var(--line);padding:25px}fieldset:disabled{opacity:.65}details{border-bottom:1px solid var(--line);padding:18px 0}summary{cursor:pointer;font-weight:bold}details p{margin:15px 0 0}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.product-detail img{height:430px;width:100%;object-fit:contain}.spec-table{width:100%;border-collapse:collapse;margin:25px 0}.spec-table td{border-bottom:1px solid var(--line);padding:14px;font-size:14px}.spec-table td:first-child{background:var(--light);width:35%;font-weight:bold}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:950px){.nav{gap:15px;font-size:12px}.header-inner{gap:20px}.hero-grid{gap:25px}.product-image img{height:220px}.two-col{gap:30px}}@media(max-width:720px){.wrap{padding-left:22px;padding-right:22px}.topline .wrap span:last-child{display:none}.header-inner{min-height:80px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}.brand{font-size:25px}.menu-toggle{display:block;background:var(--purple);color:white;border-color:var(--purple);padding:9px 13px}.nav{display:none;width:100%;align-items:stretch;gap:0;flex-direction:column}.nav.is-open{display:flex}.nav>a{padding:12px 0;border-top:1px solid var(--line)}.nav .button{padding:12px;margin-top:10px}.hero-grid{grid-template-columns:1fr;padding-top:38px;padding-bottom:35px;min-height:0}.hero h1{letter-spacing:-1.7px}.hero-visual{max-width:420px;margin:auto;padding:15px 0}.hero-visual img{aspect-ratio:1.4}.trust-inner{grid-template-columns:1fr 1fr;padding:24px 22px;gap:18px}.trust-inner span{border:0}.trust-inner b{font-size:14px}.section{padding:55px 0}.section-head{display:block;margin-bottom:25px}.products-grid,.reason-grid,.guide-grid,.documents{grid-template-columns:1fr}.product-image img{height:300px}.two-col{grid-template-columns:1fr;gap:30px}.two-col>img{height:320px}.factory-gallery{grid-template-columns:1fr}.factory-gallery img{height:270px}.steps{grid-template-columns:1fr 1fr}.cta-inner{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr;gap:28px}.article .grid{grid-template-columns:1fr}.product-detail{grid-template-columns:1fr;gap:20px}.product-detail img{height:300px}.page-banner h1{font-size:34px}.documents{gap:15px}}

/* Product catalogue and the updated factory photograph. */
#factory .two-col > img { height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.catalog-intro { max-width: 680px; margin-bottom: 30px; font-size: 17px; }
.catalog-grid, .variant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.catalog-card, .variant { border: 1px solid var(--line); background: white; }
.catalog-card { display: flex; flex-direction: column; }
.catalog-card:hover { border-color: #9585b1; box-shadow: 0 12px 26px #3c276e12; }
.catalog-card-image, .variant-image { display: grid; place-items: center; padding: 15px; background: white; }
.catalog-card-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.catalog-card-content, .variant-body { padding: 22px; }
.catalog-card-content { flex: 1; display: flex; flex-direction: column; align-items: start; border-top: 1px solid var(--line); }
.catalog-card-content h2 { font-size: 21px; letter-spacing: -.4px; margin: 10px 0 14px; }
.catalog-card-content .text-link { margin-top: auto; }
.catalog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.catalog-chips span { font-size: 11px; color: var(--purple); background: var(--light); padding: 4px 9px; }
.catalog-detail-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 38px; }
.catalog-detail-hero > div:first-child { border: 1px solid var(--line); padding: 14px; }
.catalog-detail-hero img { width: 100%; max-height: 390px; object-fit: contain; }
.catalog-detail-hero p { margin: 12px 0 0; font-size: 18px; }
.catalog-block, .catalog-feature, .catalog-order { margin-top: 52px; }
.article .catalog-block h2, .article .catalog-feature h2, .article .catalog-order h2 { margin: 10px 0 22px; }
.variant { display: flex; flex-direction: column; }
.variant-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.variant-body { flex: 1; border-top: 3px solid var(--yellow); }
.variant h3 { margin: 9px 0; font-size: 19px; }
.variant p { font-size: 14px; margin-bottom: 0; }
.variant p.variant-size { color: var(--purple); font-weight: bold; margin: 0 0 9px; }
.catalog-specs { margin: 0; border: 1px solid var(--line); }
.catalog-specs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-bottom: 1px solid var(--line); }
.catalog-specs > div:last-child { border-bottom: 0; }
.catalog-specs dt, .catalog-specs dd { padding: 13px 16px; margin: 0; font-size: 14px; }
.catalog-specs dt { background: var(--light); color: var(--purple); font-weight: bold; }
.catalog-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; background: var(--light); padding: 22px; }
.catalog-feature img { width: 100%; max-height: 310px; object-fit: contain; }
.catalog-order { background: var(--light); border-left: 4px solid var(--yellow); padding: 28px; }
.catalog-order p { max-width: 670px; }
@media (max-width: 900px) {
    .catalog-grid, .variant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .catalog-grid, .variant-grid, .catalog-detail-hero, .catalog-feature { grid-template-columns: 1fr; }
    .catalog-detail-hero { gap: 22px; }
    .catalog-detail-hero img { max-height: 290px; }
    .catalog-detail-hero p { font-size: 16px; }
    .catalog-block, .catalog-feature, .catalog-order { margin-top: 38px; }
    .catalog-specs > div { grid-template-columns: 1fr; }
    .catalog-specs dt, .catalog-specs dd { padding: 10px 13px; }
}

@media (max-width: 620px) {
    .topline { font-size: 9px; letter-spacing: .8px; }
    .hero-grid { padding-top: 26px; gap: 16px; }
    .hero h1 { margin: 13px 0 15px; }
    .hero-copy > p { font-size: 15px; }
    .hero .actions { gap: 10px; margin-top: 19px; }
    .hero .actions .button { padding: 11px 12px; }
    .hero-visual { padding: 10px 0; }
    .page-banner { padding: 26px 0 22px; }
    .article { padding: 32px 22px 55px; }
    .catalog-detail-hero img { max-height: 240px; }
}