/** * Giva PIM Configurator, vehicle selection module. * Self-contained styles, scoped under .gwc_configurator so they never collide * with a host theme (Magento/Hyva, PIM, plain page). Visual style matches the * v2 demo. All class/id names use the gwc_ prefix and describe their function. * * Fonts: acumin-pro / acumin-pro-extra-condensed (Adobe Typekit). Load the kit * in the host ; a system sans-serif is the graceful fallback. */ .gwc_configurator{ --gwc_accent:#5e8b6d; --gwc_ink:#2f2f2e; --gwc_bg:#e9e4df; --gwc_chevron:#5e8b6d; --gwc_sub:#656f80; --gwc_tile:#3a5a47; --gwc_hover:#f3f4f6; --gwc_muted:#656c7a; --gwc_panel:#ffffff; --gwc_radius:14px; --gwc_text:#111827; background:var(--gwc_bg); box-sizing:border-box; color:var(--gwc_text); font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; padding:1rem; align-items:stretch; display:flex; flex-wrap:wrap; flex:1 1 auto; gap:0; } .gwc_configurator *{ box-sizing:border-box; } .gwc_configurator [x-cloak]{ display:none !important; } /* ---------- header ---------- */ .gwc_configurator .gwc_header{ align-items:flex-start; display:flex; gap:.5rem; justify-content:space-between; margin-bottom:1rem; } .gwc_configurator .gwc_header .gwc_iconbtn{ height:2rem; width:2rem; } .gwc_configurator .gwc_brand_arrow{ height:2rem; position:relative; rotate:90deg; width:2rem; } .gwc_configurator .gwc_brand_arrow svg{ fill:var(--gwc_accent); height:100%; width:100%; } .gwc_configurator .gwc_brand_title{ font-family:"acumin-pro-extra-condensed","Helvetica Neue",Arial,sans-serif; font-size:3rem; font-weight:700; line-height:.9; margin-top:.5rem; text-transform:uppercase; } .gwc_configurator .gwc_brand_title_top{ color:var(--gwc_ink); display:block; } .gwc_configurator .gwc_brand_title_accent{ color:var(--gwc_accent); display:block; } .gwc_configurator .gwc_iconbtn{ align-items:center; background:transparent; border:0; cursor:pointer; display:inline-flex; justify-content:center; padding:0; color:var(--gwc_ink); } .gwc_configurator .gwc_iconbtn svg{ height:100%; width:100%; } .gwc_configurator .gwc_iconbtn .ph{ font-size:1.5rem; line-height:1; } .gwc_configurator .gwc_header .gwc_iconbtn .ph{ font-size:1.6rem; } .gwc_configurator .gwc_subhead .gwc_iconbtn .ph{ font-size:1.25rem; } .gwc_configurator .gwc_summary_row .gwc_iconbtn .ph{ font-size:1.05rem; } /* ---------- start screen (method choice) ---------- */ .gwc_configurator .gwc_intro{ color:var(--gwc_ink); font-size:.9rem; font-weight:400; margin:2rem 0 1.5rem; } .gwc_configurator .gwc_methods{ display:grid; gap:.5rem; margin-top:1rem; } .gwc_configurator .gwc_method{ align-items:center; background:var(--gwc_panel); cursor:pointer; display:grid; gap:.6rem; grid-template-columns:4rem 1fr 3rem; } .gwc_configurator .gwc_method:hover{ background:var(--gwc_hover); } .gwc_configurator .gwc_method_icon{ align-items:center; background-color:var(--gwc_tile); display:inline-flex; height:4rem; justify-content:center; width:4rem; } .gwc_configurator .gwc_method_icon svg{ fill:#fff; height:2rem; width:2rem; } /* Kenteken-methode: Nederlands kenteken als afbeelding op het donkere icoonvlak (zoals de homepage). */ .gwc_configurator .gwc_method_icon--plate{ background-image:url(nl-kenteken.webp); background-position:center; background-repeat:no-repeat; background-size:2.6rem auto; } .gwc_configurator .gwc_method_icon--plate .ph{ display:none; } .gwc_configurator .gwc_method_icon .ph{ color:#fff; font-size:2rem; line-height:1; } .gwc_configurator .gwc_method_title{ color:var(--gwc_ink); font-size:.875rem; font-weight:700; line-height:1.1; } .gwc_configurator .gwc_method_beta{ background:var(--gwc_hover); border:1px solid rgba(0,0,0,.08); border-radius: 0.2rem; color:var(--gwc_muted); display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.06em; line-height:1.45; margin-left:7px; padding:1px 7px; text-transform:uppercase; vertical-align:middle; } .gwc_configurator .gwc_method_sub{ color:var(--gwc_sub); font-size:.875rem; font-weight:500; margin-top:.25rem; } .gwc_configurator .gwc_method_chevron{ align-items:center; display:inline-flex; height:2rem; justify-content:center; width:2rem; } .gwc_configurator .gwc_method_chevron svg{ fill:var(--gwc_chevron); height:100%; width:100%; } /* ---------- subheader (chosen method) ---------- */ .gwc_configurator .gwc_subhead{ align-items:center; border-bottom:1px solid rgb(193,187,184); display:flex; gap:1rem; justify-content:space-between; padding:1rem 0; } .gwc_configurator .gwc_subhead_label{ color:var(--gwc_ink); font-size:.9rem; font-weight:700; } .gwc_configurator .gwc_subhead .gwc_iconbtn{ height:1.5rem; width:1.5rem; } /* ---------- question, help, search ---------- */ .gwc_configurator .gwc_question{ font-family:"acumin-pro-extra-condensed","Helvetica Neue",Arial,sans-serif; font-size:1.5rem; font-weight:700; margin-top:1rem; text-transform:uppercase; } .gwc_configurator .gwc_search{ align-items:center; background:var(--gwc_panel); border:0; border-radius: var(--gwc_radius); display:flex; gap:.6rem; margin-top:1rem; padding:.6rem .8rem; } .gwc_configurator .gwc_search input{ background:transparent; border:0; font:inherit; font-size:.9rem; outline:none; width:100%; } .gwc_configurator .gwc_search svg{ color:var(--gwc_muted); height:18px; width:18px; } .gwc_configurator .gwc_search .ph{ color:var(--gwc_muted); font-size:18px; line-height:1; } /* 'Alle ... weergeven' onder de eerste zes opties: als tekstlink (onderstreept), geen knop. */ .gwc_configurator .gwc_more{ background:none; border:0; border-radius:0; color:var(--gwc_accent); cursor:pointer; font:inherit; font-size:.9rem; font-weight:600; grid-column:1 / -1; margin-top:.4rem; padding:.3rem 0; width:100%; text-align:center; text-decoration:underline; text-underline-offset:2px; } .gwc_configurator .gwc_more:hover{ background:none; color:var(--gwc_ink); } /* intro for the regular variant */ .gwc_configurator .gwc_regulier_intro{ color:var(--gwc_muted); font-size:.85rem; margin-top:.6rem; } /* ---------- choice cards ---------- */ .gwc_configurator .gwc_options{ display:grid; gap:.6rem; grid-template-columns:1fr 1fr; margin-top:1rem; } .gwc_configurator .gwc_options_full{ grid-template-columns:1fr; } /* 'Welk chassis?': results full width */ .gwc_configurator .gwc_option_full{ grid-column:1 / -1; } /* top 'Regulier' at full width */ .gwc_configurator .gwc_options_title{ color:var(--gwc_ink); font-size:.9rem; font-weight:700; grid-column:1 / -1; margin:.6rem 0 -.1rem; } /* chassis step: like the other steps, a grid that fills row by row (left to right), so the sort order runs left to right. The full-width card ('Regulier') and the subheading already span via grid-column above. */ .gwc_configurator .gwc_options_cols > .gwc_options_title{ margin:.6rem 0 .4rem; } .gwc_configurator .gwc_option{ align-items:center; background:var(--gwc_panel); border:0; cursor:pointer; display:flex; gap:.6rem; min-height:3.5rem; padding:.8rem; } .gwc_configurator .gwc_option:hover{ background:var(--gwc_hover); } .gwc_configurator .gwc_option_body{ display:flex; flex-direction:column; gap:2px; min-width:0; } .gwc_configurator .gwc_option_name{ font-size:.8rem; font-weight:600; line-height:1.15; } .gwc_configurator .gwc_option_years{ color:var(--gwc_muted); font-size:.72rem; font-weight:500; } /* Brand/model logos come in very different aspect ratios (BMW square, Audi wide, ...). A wider, slightly shorter box with height-normalised contain keeps square logos from towering over wide ones, so the icons read as one consistent size (the mono fallback matches this footprint). */ .gwc_configurator .gwc_option_logo{ align-items:center; display:inline-flex; flex:0 0 auto; height:2rem; justify-content:center; overflow:visible; width:3.75rem; } .gwc_configurator .gwc_option_logo img{ height:auto; max-height:100%; max-width:100%; object-fit:contain; width:auto; } /* serie: vehicle-profile icon at the right of the (full-width) row */ .gwc_configurator .gwc_option_icon{ align-items:center; display:inline-flex; flex:0 0 auto; height:2.5rem; justify-content:center; margin-left:auto; overflow:hidden; width:4.75rem; } .gwc_configurator .gwc_option_icon img{ max-height:100%; max-width:100%; object-fit:contain; } .gwc_configurator .gwc_option_mono{ align-items:center; background:var(--gwc_tile); border-radius: 8px; color:#fff; display:inline-flex; flex:0 0 auto; font-weight:800; height:2rem; justify-content:center; text-transform:uppercase; width:3.75rem; } /* ---------- chosen values ---------- */ .gwc_configurator .gwc_summary{ background:var(--gwc_panel); border-radius: var(--gwc_radius); display:grid; gap:10px; margin-top:1rem; padding:10px 12px; } .gwc_configurator .gwc_summary_row{ align-items:center; border-bottom:1px solid rgba(0,0,0,.10); display:grid; gap:10px; grid-template-columns:1fr 28px; padding-bottom:10px; } .gwc_configurator .gwc_summary_row:last-child{ border-bottom:0; padding-bottom:0; } .gwc_configurator .gwc_summary_key{ font-size:13px; font-weight:800; } .gwc_configurator .gwc_summary_value{ align-items:center; color:var(--gwc_muted); display:flex; font-size:13px; gap:8px; margin-top:2px; } .gwc_configurator .gwc_summary_logo{ align-items:center; display:inline-flex; flex:0 0 auto; height:20px; justify-content:center; width:20px; } .gwc_configurator .gwc_summary_logo img{ max-height:100%; max-width:100%; object-fit:contain; } /* serie: vehicle-profile icon on the right of its row, on the name line (not centred over name+year), a bit clear of the edit button */ .gwc_configurator .gwc_summary_icon{ align-items:center; align-self:flex-start; display:inline-flex; flex:0 0 auto; height:22px; justify-content:center; margin-left:auto; margin-right:10px; width:40px; } .gwc_configurator .gwc_summary_icon img{ max-height:100%; max-width:100%; object-fit:contain; } .gwc_configurator .gwc_summary_text{ display:flex; flex-direction:column; min-width:0; } .gwc_configurator .gwc_summary_name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gwc_configurator .gwc_summary_years{ color:#9aa0a6; font-size:11.5px; font-weight:500; line-height:1.2; margin-top:1px; white-space:nowrap; } /* keep the edit button up on the name line instead of centred over the taller (name+year) row */ .gwc_configurator .gwc_summary_row .gwc_iconbtn{ align-self:start; height:1.25rem; margin-top:0.9rem; width:1.25rem; } /* ---------- license plate ---------- */ .gwc_configurator .gwc_plate{ align-items:center; background:var(--gwc_panel); border:1px solid rgba(0,0,0,.07); border-radius: var(--gwc_radius); display:flex; gap:10px; margin-top:14px; padding:10px 12px; } .gwc_configurator .gwc_plate input{ background:transparent; border:0; font:inherit; font-size:1rem; outline:none; text-transform:uppercase; width:100%; } .gwc_configurator .gwc_plate_go{ align-items:center; background:#22c55e; border:0; border-radius: 0.2rem; cursor:pointer; display:inline-flex; flex:0 0 auto; height:34px; justify-content:center; width:34px; } .gwc_configurator .gwc_plate_go:disabled{ cursor:default; opacity:.6; } .gwc_configurator .gwc_plate_go svg{ color:#fff; height:16px; width:16px; } .gwc_configurator .gwc_plate input:disabled{ opacity:.6; } /* ---------- buttons, messages ---------- */ .gwc_configurator .gwc_btn{ background:var(--gwc_accent); border:0; border-radius: var(--gwc_radius); color:#fff; cursor:pointer; font:inherit; font-size:.9rem; font-weight:700; margin-top:14px; padding:.7rem 1.1rem; } .gwc_configurator .gwc_btn:hover{ background:#e0341a; } .gwc_configurator .gwc_btn_ghost{ background:#111827; } .gwc_configurator .gwc_btn_soft{ background:transparent; border:1px solid var(--gwc_accent); color:var(--gwc_accent); } .gwc_configurator .gwc_btn_soft:hover{ background:rgba(255,59,26,.06); } .gwc_configurator .gwc_msg{ color:var(--gwc_muted); font-size:.82rem; margin-top:.6rem; } .gwc_configurator .gwc_msg_error{ color:var(--gwc_accent); } .gwc_configurator .gwc_original{ background:var(--gwc_panel); border:1px solid rgba(0,0,0,.07); border-radius: var(--gwc_radius); margin-top:14px; padding:14px 16px; } .gwc_configurator .gwc_original_head{ align-items:baseline; display:flex; flex-wrap:wrap; gap:6px 12px; } .gwc_configurator .gwc_original_title{ font-size:1.05rem; font-weight:700; } .gwc_configurator .gwc_original_years{ color:var(--gwc_muted); font-size:.85rem; } .gwc_configurator .gwc_original_note{ background:#fff; border:1px solid rgba(0,0,0,.07); border-radius: var(--gwc_radius); color:var(--gwc_muted); font-size:.8rem; line-height:1.45; margin-top:10px; padding:.7rem .8rem; } .gwc_configurator .gwc_original_types{ margin-top:12px; } .gwc_configurator .gwc_original_type{ border-top:1px solid rgba(0,0,0,.06); padding:8px 0; } .gwc_configurator .gwc_original_type:first-child{ border-top:0; } .gwc_configurator .gwc_original_type_name{ font-size:.92rem; font-weight:600; } .gwc_configurator .gwc_original_type_meta{ color:var(--gwc_muted); display:flex; flex-wrap:wrap; font-size:.8rem; gap:4px 12px; margin-top:2px; } .gwc_configurator .gwc_state{ align-items:center; color:var(--gwc_muted); display:flex; font-size:.9rem; gap:.5rem; padding:1.2rem 0; } .gwc_configurator .gwc_spinner{ animation:gwc_spin .7s linear infinite; border:2px solid rgba(0,0,0,.15); border-radius:50%; border-top-color:var(--gwc_accent); flex:0 0 auto; height:16px; width:16px; } @keyframes gwc_spin{ to{ transform:rotate(360deg); } } /* ---------- result next to the selection ---------- */ /* panel (vehicle selection) stays narrow and visible; the result (header + refinement) fills the remaining width next to it. */ .gwc_configurator .gwc_panel{ flex:0 0 28rem; max-width:28rem; min-width:0; border:0; border-right:1px solid #d8d2ca; border-radius: 0; padding:0 1.5rem 1.2rem 0; } /* kleine ronde hoeken op de keuze-elementen (merk/model/serie, methode, zoekveld), gelijk aan de keuzewijzer in het ontwerp en aan de garage/verlanglijst-tegels. */ .gwc_configurator .gwc_summary, .gwc_configurator .gwc_option, .gwc_configurator .gwc_search, .gwc_configurator .gwc_method, .gwc_configurator .gwc_method_icon{ border-radius: 8px; } .gwc_configurator .gwc_summary_row{ border-radius: 0; } /* ---------- result ---------- */ .gwc_configurator .gwc_result{ background:#fff; border:1px solid rgba(0,0,0,.07); border-radius: var(--gwc_radius); margin-top:1rem; padding:1.2rem; } .gwc_configurator .gwc_result_name{ font-family:"acumin-pro-extra-condensed","Helvetica Neue",Arial,sans-serif; font-size:1.6rem; font-weight:700; margin:0 0 .8rem; text-transform:uppercase; } .gwc_configurator .gwc_result_kv{ display:grid; gap:.35rem .8rem; grid-template-columns:110px 1fr; margin-bottom:1rem; } .gwc_configurator .gwc_result_row{ display:contents; } .gwc_configurator .gwc_result_term{ color:var(--gwc_muted); font-size:.82rem; } .gwc_configurator .gwc_result_def{ font-size:.82rem; } .gwc_configurator .gwc_result_def .gwc_code{ background:#f3f4f6; border-radius: 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; padding:.05rem .35rem; word-break:break-all; } .gwc_configurator .gwc_result_link{ color:var(--gwc_accent); cursor:pointer; display:inline-block; font-size:.9rem; margin-top:.4rem; text-decoration:underline; } /* ---------- optional variant block on the result ---------- */ .gwc_configurator .gwc_optional{ border-top:1px dashed rgba(0,0,0,.15); margin-top:1rem; padding-top:1rem; } .gwc_configurator .gwc_optional_title{ font-size:.8rem; font-weight:700; } .gwc_configurator .gwc_optional_hint{ color:var(--gwc_muted); font-size:.78rem; margin-top:2px; } /* show exactly one question at a time; the height follows the open question (previously measured via JS) */ @media (max-width:480px){ /* Smalle container (mobiele sidebar/hero): niet als flex-wrap-rij laten uitdijen, maar blok-stapelen zodat alles binnen de containerbreedte blijft. */ .gwc_configurator{ display:block; } .gwc_configurator > *, .gwc_configurator .gwc_panel{ max-width:100%; min-width:0; } .gwc_configurator .gwc_options{ grid-template-columns:1fr; } .gwc_configurator .gwc_options_cols{ column-count:1; } .gwc_configurator .gwc_method_title, .gwc_configurator .gwc_method_sub, .gwc_configurator .gwc_option_body, .gwc_configurator .gwc_acc_sname{ min-width:0; overflow-wrap:anywhere; } } /* ============================================================ Nieuw design (Figma keuzewijzer): beige paneel met witte tegels (zoals de garage-/verlanglijst-sidebar), donkere icoon-tegels, afgeronde methode-rijen, groene accenten, geel kentekenveld. Staat onderaan zodat het de basisregels hierboven overschrijft. ============================================================ */ /* --gwc_bg = paneel-/sidebarachtergrond (wit), --gwc_panel = de merk-/model-/serie-tegels (grijs), zodat de tegels contrasteren tegen de witte sidebar i.p.v. wit-op-wit te verdwijnen. */ .gwc_configurator{ --gwc_bg:#ffffff; --gwc_panel:#f4f3f1; --gwc_tile:#2f2f2e; --gwc_hover:#eeece9; } /* Kop: donkere condensed titel, zonder pijl (net als elders op de site). */ .gwc_configurator .gwc_brand_arrow{ display:none; } .gwc_configurator .gwc_brand_title{ font-size:2.4rem; margin-top:0; } .gwc_configurator .gwc_brand_title_accent{ color:var(--gwc_ink); } /* Methode-rijen: lichtgrijs, afgerond, donkere flush-tegel links, groene pijl rechts. */ .gwc_configurator .gwc_method{ background:#f4f3f1; border-radius:14px; overflow:hidden; } .gwc_configurator .gwc_method:hover{ background:#eeece9; } .gwc_configurator .gwc_method_icon{ border-radius:0; } .gwc_configurator .gwc_method_chevron svg{ fill:var(--gwc_accent); } /* Groene accenten i.p.v. de rode resten uit het velgen-design. */ .gwc_configurator .gwc_btn:hover{ background:var(--gwc_accent); } .gwc_configurator .gwc_btn_soft:hover{ background:rgba(94,139,109,.08); } /* Kentekenveld als geel NL-plaatje met blauwe EU-strip. */ .gwc_configurator .gwc_plate{ background:#f4c400; border:0; border-radius:8px; padding-left:2.9rem; position:relative; box-shadow:0 0 0 1px rgba(0,0,0,.18); } .gwc_configurator .gwc_plate::before{ content:"NL"; position:absolute; left:0; top:0; bottom:0; width:2rem; display:flex; align-items:center; justify-content:center; background:#0a3aa0; color:#fff; font-size:.62rem; font-weight:700; } .gwc_configurator .gwc_plate input{ color:#111; font-weight:700; letter-spacing:.06em; } .gwc_configurator .gwc_plate input::placeholder{ color:rgba(0,0,0,.5); font-weight:600; letter-spacing:.03em; } /* ============================================================ Fase 2: uitvoeringen (chassis) gegroepeerd op serie-basisnaam. Vervangt de oude serie-stap (met top-6). Elke kaart navigeert. ============================================================ */ .gwc_configurator .gwc_uitv_group{ margin-top:1rem; } .gwc_configurator .gwc_uitv_grouphead{ align-items:center; border-bottom:1px solid rgba(0,0,0,.08); display:flex; gap:.5rem; margin-bottom:.55rem; padding-bottom:.3rem; } .gwc_configurator .gwc_uitv_groupicon{ align-items:center; display:inline-flex; flex:0 0 auto; height:1.9rem; justify-content:center; overflow:hidden; width:3rem; } .gwc_configurator .gwc_uitv_groupicon img{ max-height:100%; max-width:100%; object-fit:contain; } .gwc_configurator .gwc_uitv_grouptitle{ color:var(--gwc_ink); font-size:.95rem; font-weight:700; } .gwc_configurator .gwc_uitv_items{ display:grid; gap:.5rem; grid-template-columns:1fr 1fr; } .gwc_configurator .gwc_uitv_card{ align-items:center; background:var(--gwc_panel); border:1px solid rgba(0,0,0,.07); cursor:pointer; display:flex; gap:.5rem; justify-content:space-between; min-height:3.1rem; padding:.7rem .8rem; } .gwc_configurator .gwc_uitv_card:hover{ background:var(--gwc_hover); } .gwc_configurator .gwc_uitv_body{ display:flex; flex-direction:column; gap:2px; min-width:0; } .gwc_configurator .gwc_uitv_name{ font-size:.82rem; font-weight:600; line-height:1.15; } .gwc_configurator .gwc_uitv_reg{ color:var(--gwc_accent); font-weight:600; } .gwc_configurator .gwc_uitv_gen{ color:var(--gwc_muted); font-size:.72rem; font-weight:500; } .gwc_configurator .gwc_uitv_yr{ color:var(--gwc_muted); flex:0 0 auto; font-size:.72rem; font-weight:500; text-align:right; white-space:nowrap; } @media (max-width:480px){ .gwc_configurator .gwc_uitv_items{ grid-template-columns:1fr; } } /* Uitvoering-stap: geneste accordion seriegroep -> serie -> chassis (5 niveaus in 1 stap) */ .gwc_configurator .gwc_acc_group{ background:var(--gwc_panel); border:1px solid rgba(0,0,0,.07); margin-top:.5rem; } .gwc_configurator .gwc_acc_ghead{ align-items:center; cursor:pointer; display:flex; gap:.6rem; min-height:3.4rem; padding:.6rem .8rem; } .gwc_configurator .gwc_acc_ghead:hover{ background:var(--gwc_hover); } .gwc_configurator .gwc_acc_gicon{ align-items:center; display:inline-flex; flex:0 0 auto; height:2.4rem; justify-content:center; overflow:hidden; width:3.6rem; } .gwc_configurator .gwc_acc_gicon img{ max-height:100%; max-width:100%; object-fit:contain; } .gwc_configurator .gwc_acc_gname{ color:var(--gwc_ink); flex:1 1 auto; font-size:.95rem; font-weight:700; min-width:0; } .gwc_configurator .gwc_acc_chev{ border-right:2px solid var(--gwc_chevron); border-bottom:2px solid var(--gwc_chevron); flex:0 0 auto; height:.5rem; margin-right:.2rem; transform:rotate(45deg); transition:transform .15s ease; width:.5rem; } .gwc_configurator .gwc_acc_group.is-open > .gwc_acc_ghead .gwc_acc_chev, .gwc_configurator .gwc_acc_serie.is-open > .gwc_acc_shead .gwc_acc_chev{ transform:rotate(-135deg); } .gwc_configurator .gwc_acc_series{ padding:0 .6rem .5rem; } .gwc_configurator .gwc_acc_serie{ border-top:1px solid rgba(0,0,0,.06); } .gwc_configurator .gwc_acc_shead{ align-items:center; cursor:pointer; display:flex; gap:.5rem; min-height:2.6rem; padding:.5rem .3rem; } .gwc_configurator .gwc_acc_shead:hover{ background:var(--gwc_hover); } .gwc_configurator .gwc_acc_sname{ color:var(--gwc_ink); flex:1 1 auto; font-size:.86rem; font-weight:600; min-width:0; } .gwc_configurator .gwc_acc_chassis{ display:grid; gap:.4rem; grid-template-columns:1fr 1fr; padding:.2rem .3rem .6rem; } .gwc_configurator .gwc_acc_citem{ align-items:center; background:var(--gwc_bg); border:1px solid rgba(0,0,0,.07); cursor:pointer; display:flex; gap:.5rem; justify-content:space-between; min-height:2.8rem; padding:.55rem .7rem; } .gwc_configurator .gwc_acc_citem:hover{ background:var(--gwc_hover); } .gwc_configurator .gwc_acc_cname{ font-size:.82rem; font-weight:600; } .gwc_configurator .gwc_acc_yr{ color:var(--gwc_muted); flex:0 0 auto; font-size:.72rem; white-space:nowrap; } @media (max-width:480px){ .gwc_configurator .gwc_acc_chassis{ grid-template-columns:1fr; } } .gwc_configurator .gwc_acc_syr{ color:var(--gwc_muted); flex:0 0 auto; font-size:.72rem; font-weight:500; margin-left:.4rem; white-space:nowrap; } .gwc_configurator .gwc_acc_gyr{ color:var(--gwc_muted); flex:0 0 auto; font-size:.78rem; font-weight:500; margin-left:.4rem; white-space:nowrap; }