/* ============================================================
   GARDA MOTOR — style.css (v2, "meriah & elegan")
   Sistem desain baru: serif display berkarakter, aksen warna
   ungu-cyan-emas, bentuk membulat, ikon berwarna di tiap info.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500;1,9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --paper:#FFFFFF;
  --paper-dim:#F1ECFF;
  --ink:#14102B;
  --ink-soft:#4A4266;
  --violet:#6C4CF1;
  --violet-deep:#4E33C4;
  --cyan:#1FCFC0;
  --cyan-deep:#119488;
  --gold:#F0A202;
  --gold-deep:#C97F00;
  --green-ok:#1FA86A;
  --radius-sm:14px;
  --radius:22px;
  --radius-lg:32px;
  --radius-pill:999px;
  --max:1180px;
  --font-head:'Fraunces', serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  max-width:100%;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-head);margin:0 0 .4em;font-weight:600;letter-spacing:-0.01em;line-height:1.1;}
p{margin:0 0 1em;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* Legacy blueprint grid neutralized — replaced by gradient blobs below */
.blueprint-grid{display:none;}

/* ---------- Decorative gradient blobs ---------- */
.blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;z-index:0;
}
.blob-violet{background:radial-gradient(circle, var(--violet), transparent 70%);}
.blob-cyan{background:radial-gradient(circle, var(--cyan), transparent 70%);}
.blob-gold{background:radial-gradient(circle, var(--gold), transparent 70%);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #E7DFFA;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:80px;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:600;font-size:1.25rem;color:var(--ink);min-width:0;overflow:hidden;flex-shrink:1;}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.brand-mark{width:38px;height:38px;flex:0 0 auto;object-fit:contain;border-radius:50%;}
.nav-main{display:flex;align-items:center;gap:2px;}
.nav-main a{font-size:.88rem;font-weight:600;color:var(--ink-soft);position:relative;padding:10px 12px;border-radius:var(--radius-pill);transition:background .15s, color .15s;white-space:nowrap;flex:0 0 auto;}
.nav-main a:hover{color:var(--violet-deep);background:var(--paper-dim);}
.nav-main .has-dropdown{position:relative;flex:0 0 auto;}
.dropdown{
  display:none;position:absolute;top:100%;left:8px;margin-top:6px;
  background:#fff;border:1px solid #E7DFFA;border-radius:var(--radius-sm);
  min-width:190px;padding:8px;box-shadow:0 16px 40px rgba(76,51,196,.14);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{display:block;}
.dropdown a{display:block;padding:9px 14px;font-size:.88rem;border-radius:10px;}
.dropdown a:hover{background:var(--paper-dim);}
.nav-toggle{display:none;background:none;border:1px solid #E7DFFA;padding:8px 12px;border-radius:var(--radius-pill);flex-shrink:0;}
.nav-cta{
  background:linear-gradient(135deg, var(--violet), var(--violet-deep));
  color:#fff !important;padding:11px 20px !important;font-weight:700 !important;
  box-shadow:0 8px 20px rgba(108,76,241,.35);
}
.nav-cta:hover{background:linear-gradient(135deg, var(--violet-deep), var(--violet)) !important;color:#fff !important;}

@media (max-width:880px){
  .nav-main{
    position:fixed;top:80px;left:0;right:0;bottom:0;
    background:var(--paper);flex-direction:column;align-items:flex-start;
    padding:20px 24px;gap:4px;display:none;overflow-y:auto;border-top:1px solid #E7DFFA;
  }
  .nav-main.open{display:flex;}
  .nav-main a{width:100%;padding:14px 12px;border-radius:12px;}
  .dropdown{position:static;border:none;padding-left:12px;display:block;box-shadow:none;background:none;}
  .has-dropdown:hover .dropdown{display:block;}
  .nav-toggle{display:block;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;font-weight:700;font-size:.95rem;
  border:2px solid transparent;border-radius:var(--radius-pill);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg, var(--violet), var(--violet-deep));color:#fff;box-shadow:0 10px 24px rgba(108,76,241,.35);}
.btn-primary:hover{color:#fff;box-shadow:0 14px 30px rgba(108,76,241,.45);}
.btn-outline{border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-ghost{color:var(--violet-deep);text-decoration:underline;text-underline-offset:4px;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--paper);}
.hero .blob-violet{width:460px;height:460px;top:-140px;right:-100px;}
.hero .blob-cyan{width:320px;height:320px;bottom:-120px;left:20%;}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:56px;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:700;color:var(--violet-deep);
  background:#EDE6FF;padding:7px 16px;border-radius:var(--radius-pill);margin-bottom:18px;
}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.5rem);color:var(--ink);font-style:italic;font-weight:500;}
.hero p.lead{font-size:1.08rem;color:var(--ink-soft);max-width:46ch;}
.hero-actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}
.hero-art{position:relative;background:#fff;border-radius:var(--radius-lg);padding:36px;box-shadow:0 24px 60px rgba(76,51,196,.16);}
@media (max-width:880px){
  .hero .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:40px;}
  .hero-art{order:-1;}
}

/* ---------- Quick stats bar ---------- */
.stats-bar{background:var(--ink);color:#fff;}
.stats-bar .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:32px 24px;}
.stat{flex:1;min-width:140px;}
.stat .num{font-family:var(--font-head);font-style:italic;font-size:1.9rem;color:var(--cyan);}
.stat .lbl{font-size:.82rem;color:#C9BFF0;margin-top:2px;}

/* ---------- Promo banner ---------- */
.promo-banner{background:linear-gradient(120deg, var(--violet), var(--cyan-deep));color:#fff;}
.promo-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;flex-wrap:wrap;}
.promo-banner strong{color:var(--gold);}
.promo-banner p{margin:0;font-size:1rem;font-weight:600;}
.promo-banner .btn-primary{background:#fff;color:var(--violet-deep);box-shadow:none;}
.promo-banner .btn-primary:hover{background:var(--paper-dim);color:var(--violet-deep);}

/* ---------- Section scaffolding ---------- */
.section{padding:80px 0;}
.section-tight{padding:52px 0;}
.section-head{max-width:640px;margin-bottom:40px;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--ink);font-style:italic;font-weight:500;}
.section-head p{color:var(--ink-soft);}
.section-alt{background:#FFFFFF;}

/* ---------- Featured model spec block ---------- */
.featured{
  border:none;background:#fff;border-radius:var(--radius-lg);
  display:grid;grid-template-columns:1fr 1fr;
  box-shadow:0 28px 64px rgba(76,51,196,.14);overflow:hidden;
}
.featured-info{padding:44px;}
.featured-art{padding:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(150deg, var(--paper-dim), #fff);}
.featured-art>div:first-child{width:100%;max-width:320px;}
.featured-name{font-size:2rem;color:var(--ink);font-style:italic;font-weight:500;}
.spec-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.spec-cell{flex:1 1 90px;background:var(--paper-dim);border-radius:var(--radius-sm);padding:14px 16px;}
.spec-cell .num{font-family:var(--font-head);font-weight:600;font-size:1.15rem;color:var(--violet-deep);}
.spec-cell .lbl{font-size:.76rem;color:var(--ink-soft);margin-top:2px;}
.price-variants{display:flex;gap:28px;margin:18px 0;flex-wrap:wrap;}
.price-variant .price{font-family:var(--font-head);font-size:1.5rem;color:var(--ink);font-weight:600;}
.price-variant .vname{font-size:.82rem;color:var(--ink-soft);}
@media (max-width:820px){
  .featured{grid-template-columns:1fr;}
}

/* ---------- Product grid ---------- */
.grid-cars{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;}
.car-card{
  background:#fff;border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;
  box-shadow:0 12px 28px rgba(20,16,43,.07);transition:transform .18s ease, box-shadow .18s ease;
}
.car-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(76,51,196,.18);}
.car-card .car-art{aspect-ratio:4/3;background:var(--paper-dim);border-radius:var(--radius-sm);margin-bottom:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;}
.car-card .car-art img{width:100%;height:100%;object-fit:cover;}
.car-card .type-pill{display:inline-block;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill);margin-bottom:10px;width:fit-content;}
.pill-ev{background:#E4FBF7;color:var(--cyan-deep);}
.pill-phev{background:#FFF1D6;color:var(--gold-deep);}
.car-card h3{font-size:1.1rem;color:var(--ink);margin-bottom:2px;}
.car-card .from{font-size:.78rem;color:var(--ink-soft);margin-top:8px;}
.car-card .price{font-family:var(--font-head);font-weight:600;font-size:1.25rem;color:var(--ink);margin-bottom:14px;}
.car-card .btn{margin-top:auto;justify-content:center;}

/* ---------- Staff / advisor card ---------- */
.staff-card{
  display:flex;align-items:center;gap:24px;
  background:#fff;border-radius:var(--radius-lg);padding:32px;
  box-shadow:0 20px 48px rgba(20,16,43,.08);
}
.staff-avatar{width:104px;height:104px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--violet);border:4px solid var(--paper-dim);}
.staff-avatar img{width:100%;height:100%;object-fit:cover;}
.staff-info h3{font-size:1.3rem;margin-bottom:2px;color:var(--ink);font-style:italic;font-weight:500;}
.staff-info .role{font-size:.85rem;color:var(--violet-deep);font-weight:700;margin-bottom:12px;}
.staff-contacts{display:flex;gap:10px;flex-wrap:wrap;}
.staff-contacts a{font-size:.85rem;font-weight:600;border:2px solid var(--paper-dim);padding:8px 16px;border-radius:var(--radius-pill);}
.staff-contacts a:hover{border-color:var(--violet);color:var(--violet-deep);}
@media (max-width:600px){.staff-card{flex-direction:column;text-align:center;}}

/* ---------- Values / pillars (icon circles) ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.pillar{background:#fff;border-radius:var(--radius);padding:26px 22px;box-shadow:0 12px 28px rgba(20,16,43,.06);}
.pillar-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.pillar-icon svg{width:24px;height:24px;}
.pillar h3{font-size:1.02rem;color:var(--ink);}
.pillar p{font-size:.87rem;color:var(--ink-soft);margin:0;}
@media (max-width:820px){.pillars{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.pillars{grid-template-columns:1fr;}}

/* ---------- Why us grid (icon circles) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.why-item{background:#fff;border-radius:var(--radius);padding:26px 22px;box-shadow:0 12px 28px rgba(20,16,43,.06);}
.why-item .pillar-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.why-item .pillar-icon svg{width:24px;height:24px;}
.why-item h3{font-size:1.02rem;color:var(--ink);}
.why-item p{font-size:.87rem;color:var(--ink-soft);margin:0;}
@media (max-width:820px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.why-grid{grid-template-columns:1fr;}}

/* ---------- Articles ---------- */
.grid-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.article-card{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:0 12px 28px rgba(20,16,43,.06);}
.article-card .cat{display:inline-block;font-size:.72rem;font-weight:700;color:var(--violet-deep);background:var(--paper-dim);padding:4px 12px;border-radius:var(--radius-pill);}
.article-card h3{font-size:1.08rem;margin:12px 0 8px;color:var(--ink);}
.article-card p{font-size:.88rem;color:var(--ink-soft);}
.article-card .date{font-size:.78rem;color:#8A80AC;}

/* ---------- Map ---------- */
.map-frame{border-radius:var(--radius);overflow:hidden;height:380px;width:100%;box-shadow:0 20px 48px rgba(20,16,43,.1);}
.map-frame iframe{width:100%;height:100%;border:0;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#fff;padding:60px 0 24px;position:relative;overflow:hidden;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.14);position:relative;z-index:1;}
.footer-grid h4{font-size:.85rem;color:var(--cyan);margin-bottom:14px;font-weight:700;}
.footer-grid a, .footer-grid p{font-size:.9rem;color:#C9BFF0;}
.footer-grid a{display:block;margin-bottom:8px;}
.footer-qr{width:104px;height:104px;background:#fff;padding:6px;border-radius:var(--radius-sm);}
.footer-bottom{padding-top:20px;font-size:.8rem;color:#9082C2;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;position:relative;z-index:1;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Floating action buttons ---------- */
.fab-stack{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;flex-direction:column;gap:10px;
}
.fab{
  display:flex;align-items:center;gap:10px;
  padding:13px 18px;border-radius:var(--radius-pill);
  font-size:.85rem;font-weight:700;
  box-shadow:0 10px 24px rgba(20,16,43,.25);
  border:none;
}
.fab-wa{background:#25D366;color:#0B2B14;}
.fab-call{background:var(--ink);color:#fff;}
.fab-test{background:var(--gold);color:#3A2600;}
.fab svg{width:18px;height:18px;flex:0 0 auto;}
@media (max-width:600px){
  .fab-stack{right:12px;bottom:12px;}
  .fab span{display:none;}
  .fab{padding:14px;border-radius:50%;}
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(20,16,43,.88);
  display:none;align-items:center;justify-content:center;z-index:100;padding:24px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(90vw,720px);max-height:80vh;background:#fff;border-radius:var(--radius);}
.lightbox-close{position:absolute;top:20px;right:24px;color:#fff;font-size:2rem;background:none;border:none;}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:16px;max-width:520px;}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:6px;color:var(--ink);}
.field input, .field textarea, .field select{
  width:100%;padding:13px 16px;border:2px solid var(--paper-dim);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.94rem;background:#fff;transition:border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--violet);}
.field textarea{min-height:110px;resize:vertical;}
.form-note{font-size:.8rem;color:var(--ink-soft);margin-top:-6px;}

/* ---------- Utility ---------- */
.center{text-align:center;}
.mt-0{margin-top:0;}
.badge{display:inline-block;font-size:.78rem;font-weight:700;color:var(--violet-deep);background:#EDE6FF;padding:6px 16px;border-radius:var(--radius-pill);}
.page-hero{padding:60px 0 44px;position:relative;overflow:hidden;}
.page-hero .wrap{position:relative;z-index:1;}
.page-hero h1{color:var(--ink);font-size:clamp(2rem,3.6vw,2.8rem);font-style:italic;font-weight:500;margin-top:14px;}
.table-plain{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 28px rgba(20,16,43,.06);min-width:520px;}
.table-plain th,.table-plain td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--paper-dim);font-size:.9rem;white-space:nowrap;}
.table-plain th{font-weight:700;color:var(--ink-soft);font-size:.78rem;background:var(--paper-dim);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:0 12px 28px rgba(20,16,43,.06);}
.table-scroll .table-plain{box-shadow:none;}

/* ---------- Color swatches ---------- */
.color-swatches{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;justify-content:center;}
.color-swatch{
  width:30px;height:30px;border-radius:50%;padding:0;cursor:pointer;
  border:3px solid #fff;box-shadow:0 0 0 1.5px var(--paper-dim);
  transition:box-shadow .15s ease, transform .15s ease;
}
.color-swatch:hover{transform:scale(1.08);}
.color-swatch.active{box-shadow:0 0 0 2px var(--violet);}
.color-swatches-sm{justify-content:flex-start;gap:8px;margin-bottom:10px;}
.color-swatches-sm .color-swatch{width:20px;height:20px;border-width:2px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Spec / interior gallery ---------- */
.spec-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.spec-gallery-item{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 28px rgba(20,16,43,.07);}
.spec-gallery-art{aspect-ratio:4/3;background:var(--paper-dim);}
.spec-gallery-art img{width:100%;height:100%;object-fit:cover;}
.spec-gallery-caption{padding:12px 16px;font-size:.9rem;font-weight:700;color:var(--ink);}
@media (max-width:760px){.spec-gallery{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.spec-gallery{grid-template-columns:1fr;}}

/* ---------- Customer gallery ---------- */
.grid-customer{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.customer-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 28px rgba(20,16,43,.07);}
.customer-photo{aspect-ratio:4/3;background:var(--paper-dim);}
.customer-photo img{width:100%;height:100%;object-fit:cover;}
.customer-info{padding:22px;}
.customer-info h3{font-size:1.05rem;margin-bottom:4px;color:var(--ink);}
.customer-info .date{font-size:.78rem;color:#8A80AC;margin-bottom:10px;}
.customer-info p{font-size:.9rem;color:var(--ink-soft);margin:0;}

/* ---------- Admin panel ---------- */
.admin-login-box{max-width:380px;margin:0 auto;background:#fff;border-radius:var(--radius);padding:32px;box-shadow:0 20px 48px rgba(20,16,43,.1);}
.admin-section{margin-bottom:48px;}
.admin-section h2{font-size:1.4rem;}
.admin-card{background:#fff;border-radius:var(--radius);padding:24px;margin-bottom:20px;box-shadow:0 12px 28px rgba(20,16,43,.07);}
.admin-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.admin-grid .field-wide{grid-column:1 / -1;}
@media (max-width:640px){.admin-grid{grid-template-columns:1fr;}}
.btn-mini{
  border:2px solid var(--paper-dim);background:#fff;border-radius:var(--radius-pill);
  padding:6px 14px;font-size:.78rem;font-weight:700;color:var(--ink);
}
.btn-mini:hover{border-color:var(--violet);color:var(--violet-deep);}
.btn-mini-danger{color:#B42318;border-color:#FFD3D0;}
.btn-mini-danger:hover{border-color:#B42318;color:#B42318;}
.variant-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-bottom:8px;align-items:center;}
@media (max-width:560px){.variant-row{grid-template-columns:1fr;}}
.variant-row input{padding:9px 12px;border:2px solid var(--paper-dim);border-radius:var(--radius-sm);font-family:inherit;}
.photo-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.photo-preview{width:120px;height:90px;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-dim);flex:0 0 auto;}
.photo-preview img{width:100%;height:100%;object-fit:cover;}
.photo-preview-round{width:90px;height:90px;border-radius:50%;}
.admin-flash{display:none;padding:14px 18px;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;margin-bottom:24px;position:sticky;top:96px;z-index:40;}
.admin-save-bar{position:sticky;bottom:0;background:var(--paper);padding:16px 0;border-top:1px solid var(--paper-dim);margin-top:12px;}
.color-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;align-items:center;margin-bottom:8px;}
@media (max-width:560px){.color-row{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;}
  .color-row input[type="color"]{grid-column:1 / -1;width:100%;}
}
.color-row-swatch{width:22px;height:22px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1.5px var(--paper-dim);}
.color-row input[type="text"], .color-row input:not([type]){padding:9px 12px;border:2px solid var(--paper-dim);border-radius:var(--radius-sm);font-family:inherit;}
.color-row input[type="color"]{width:42px;height:36px;padding:2px;border:2px solid var(--paper-dim);border-radius:var(--radius-sm);}
.color-upload-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;}
.admin-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:10px;}
.admin-gallery-item{background:var(--paper-dim);border-radius:var(--radius-sm);padding:12px;display:flex;flex-direction:column;gap:8px;}
.admin-gallery-item input{padding:8px 10px;border:2px solid #fff;border-radius:10px;font-family:inherit;font-size:.85rem;}