/** Shopify CDN: Minification failed
Line 892:0 Unexpected "("
Line 1874:0 Unexpected "<"
Line 1878:0 Unexpected "<"
**/
/* =========================================================
PC CONFIGURATOR — single, conflict‑free stylesheet
Target wrapper: #pc-configurator
========================================================= */
/* ---------- Design tokens (Techspace) ---------- */
#pc-configurator{
--ts-blue: #012FC3; /* headings, section titles */
--ts-cyan: #08b6c9; /* grand total */
--ts-accent: #ff6a00; /* CTA orange */
--ts-muted: #6b7a90; /* secondary text */
--ts-text: #14233b; /* body text */
--ts-border: #e1e9f7; /* light borders */
--ts-border-2: #e7ecf4; /* separators */
--ts-panel: #eaf3ff; /* recap panel bg */
--ts-card-bg: #fff;
--ts-r: 12px; /* radius */
--ts-pad: 16px; /* compact pad */
--ts-gap: 16px;
--ts-h: 48px; /* control height */
}
#pc-configurator { font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ts-text); }
#pc-configurator h1, #pc-configurator h2, #pc-configurator h3 { color: var(--ts-blue); letter-spacing:.2px; }
#pc-configurator .section-title { font-size: 32px; font-weight: 800; text-align:center; margin: 6px 0 18px; }
/* compact lists & rows */
#pc-configurator .row,
#pc-configurator .recap-list > * { padding: 12px 14px; }
#pc-configurator .thin { line-height: 1.25; }
/* =========================================================
LAYOUT (two equal columns; only the right column is sticky)
========================================================= */
#pc-configurator.page-width,
#pc-configurator.pc-two-col{
max-width: 1480px;
margin: 0 auto;
padding: 0 25px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
align-items: start;
}
#pc-configurator .pc-left, #pc-configurator .pc-right{ min-width: 0; }
#pc-configurator .pc-right{ position: sticky; top: 180px; } /* single sticky */
#pc-configurator .grid__cell--inner.card--sticky{ position: static !important; }
/* Inject the recap title OUTSIDE the box; hide any in‑box title */
#pc-configurator .grid__cell--inner.card--sticky .builder__group-title,
#pc-configurator .grid__cell--inner.card--sticky .heading.h2,
#pc-configurator .bundle-summary__title,
#pc-configurator .bb-summary__title{ display:none !important; }
#pc-configurator .grid__cell--inner.card--sticky{
background: transparent; border: 0; box-shadow: none; padding-top: 0;
}
/* Title line */
#pc-configurator .pc-tile__title .pc-t{
color:#6b7a90;
font-weight:700;
font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 20px));
}
#pc-configurator .pc-tile__title .req{ color: var(--ts-accent); }
#pc-configurator .pc-sel{ margin-top:2px; font-size:13px; color:var(--ts-muted); }
/* Right side controls – ensure there is ONLY ONE “+” */
#pc-configurator .pc-tile__right{ display:flex; align-items:center; gap:10px; }
#pc-configurator .pc-tile__right svg,
#pc-configurator .pc-tile__right .icon{ display:none !important; } /* kill theme glyphs */
/* NEW – naked plus (keep this) */
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large){
width:26px; height:26px; padding:0;
background:transparent !important; border:0 !important; box-shadow:none !important;
color:transparent; position:relative;
}
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large)::before,
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large)::after{
content:""; position:absolute; left:50%; top:50%; width:18px; height:2px;
background:var(--ts-blue-500); transform:translate(-50%,-50%);
}
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large)::after{
transform:translate(-50%,-50%) rotate(90deg);
}
/* (optional, keeps theme icons out) */
#pc-configurator .pc-tile__right svg,
#pc-configurator .pc-tile__right .icon{ display:none !important; }
#pc-configurator .pc-tile__body{ padding:16px 22px; background:#f7f9fc; }
/* Inline chosen item preview */
#pc-configurator .pick-line{
display:flex; align-items:center; gap:12px;
padding:10px; border:1px solid var(--ts-border-2); border-radius:12px; background:#fff;
}
#pc-configurator .pick-line img{
width:56px; height:56px; object-fit:contain; border:1px solid #eff3f8; border-radius:10px; background:#fff;
}
#pc-configurator .pick-title{ font-weight:700; font-size:14px; color:var(--ts-blue-500); }
#pc-configurator .pick-sub{ color:var(--ts-muted); font-size:12px; }
/* =========================================================
RECAP (single panel; inner white list; proper totals)
========================================================= */
#pc-configurator .card.card-recap{
background: var(--ts-panel);
border: 1px solid var(--ts-border);
border-radius: 12px;
box-shadow: none;
padding: 16px;
}
/* empty state block if present */
#pc-configurator .card-recap .bundle-empty-content{
display:flex; align-items:center; justify-content:center; gap:24px;
padding:24px; color:var(--ts-muted);
}
#pc-configurator .card-recap :is(.table.table-recap tr,.summary__list > *){
border-bottom:1px solid #eef2f8;
}
#pc-configurator .card-recap :is(.table.table-recap tr:last-child,.summary__list > *:last-child){
border-bottom:0;
}
#pc-configurator .card-recap :is(.table.table-recap td,.summary__list > *){
padding:16px 10px;
font-size:16px; color:var(--ts-text); vertical-align:middle;
}
#pc-configurator .card-recap .table__cell--right{
text-align:right; white-space:nowrap; font-weight:800;
}
/* Totals */
#pc-configurator .card-recap .builder_total-price{
margin-top:20px; padding:20px 0; border-top:1px solid rgba(0,47,196,.12);
display:flex; align-items:center; justify-content:space-between;
}
#pc-configurator .card-recap .builder_total-price .heading{
color: var(--ts-blue); font-weight:900;
font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 25px)); /* “Total” label size */
}
#pc-configurator .card-recap .builder_total-price .price{
color: var(--ts-cyan); font-weight:900;
font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 24px)); /* amount size */
}
/* CTA(s) */
#pc-configurator .product-form__payment-container{ margin-top:12px; display:grid; gap:10px; }
#pc-configurator .product-form__payment-container .button{
width:100%; border-radius:12px; font-weight:800;
}
#pc-configurator .product-form__add-button.button--primary{
padding:16px 18px; border:1px solid var(--ts-accent); background:var(--ts-accent); color:#fff;
}
#pc-configurator .product-form__add-button[disabled]{ opacity:.55; cursor:not-allowed; }
#pc-configurator .bundle-builder--remove-from-bundle-form button:hover{
border-color:#cfd6ea; color:var(--ts-blue-500);
}
/* =========================================================
MODAL (centered title, 4‑up grid, white cards, blue titles)
========================================================= */
#pc-modal{ position:fixed; inset:0; display:none; z-index:9999; }
#pc-modal.is-open{ display:block; }
#pc-modal .pc-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
#pc-modal .pc-modal__dialog{
position:relative; z-index:1; width:min(100%,1120px); margin:40px auto;
background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:18px;
}
#pc-modal .pc-modal__header{
display:flex; align-items:center; justify-content:center; border-bottom:0; padding:18px 18px 6px;
}
#pc-modal #pc-modal-title.title{
margin:0; text-align:center; text-transform:uppercase; letter-spacing:.04em;
font-weight:800; font-size:22px; color:var(--ts-blue);
}
#pc-modal .pc-modal__close{ position:absolute; right:14px; top:14px; width:28px; height:28px; border:0; background:transparent; cursor:pointer; }
#pc-modal .pc-modal__close::before,#pc-modal .pc-modal__close::after{
content:""; position:absolute; left:4px; right:4px; top:50%; height:2px; background:#1a73e8;
}
#pc-modal .pc-modal__close::before{ transform:translateY(-50%) rotate(45deg); }
#pc-modal .pc-modal__close::after{ transform:translateY(-50%) rotate(-45deg); }
#pc-modal .pc-modal__filters{ display:grid; grid-template-columns:1fr 160px 160px auto; gap:10px; padding:6px 18px 16px; }
@media (max-width:860px){ #pc-modal .pc-modal__filters{ grid-template-columns:1fr 1fr; } }
/* Modal grid — support both class and id */
#pc-modal .pc-modal__grid,
#pc-modal-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
}
@media (max-width:1100px){
#pc-modal .pc-modal__grid,
#pc-modal-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
#pc-modal .pc-modal__grid,
#pc-modal-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
#pc-modal .pc-modal__grid,
#pc-modal-grid{ grid-template-columns:1fr; }
}
#pc-modal .pc-card{
border:1px solid var(--ts-border-2); border-radius:12px; background:#fff;
padding:16px; display:flex; flex-direction:column; gap:10px;
}
#pc-modal .pc-card__img{
height:200px; border:1px solid #eff3f8; border-radius:10px; display:grid; place-items:center; background:#fff;
}
#pc-modal .pc-card__img img{ max-width:100%; max-height:180px; object-fit:contain; }
#pc-modal .pc-card__title,
#pc-modal .product-item__title,
#pc-modal .product-item-meta__title{ font-weight:800; font-size:14px; min-height:40px; color:var(--ts-blue-500); }
#pc-modal .pc-card__price .now{ color: #08b6c9 var(--ts-cyan); font-weight:500; font-size:20px; }
#pc-modal .btn-orange{ width:100%; border-radius:12px; background:var(--ts-accent); border:1px solid var(--ts-accent); color:#fff; font-weight:500; }
/* =========================================================
RESPONSIVE & PRINT
========================================================= */
@media (max-width:1100px){
#pc-configurator.page-width, #pc-configurator.pc-two-col{ grid-template-columns:1fr; }
#pc-configurator .pc-right{ position:static; top:auto; }
}
@media print{
header, footer, #pc-modal { display:none !important; }
#pc-configurator.page-width{ grid-template-columns:1fr !important; }
#pc-configurator .pc-right{ position:static; }
}
/* =========================================================
GLOBAL CTA COLOR (makes every primary “Ajouter …” orange)
========================================================= */
#pc-configurator :is(.product-form__add-button, .button.button--primary, .btn-primary){
background: var(--ts-accent) !important;
border:1px solid var(--ts-accent) !important;
color:#fff !important;
border-radius:12px !important;
font-weight:800 !important;
}
#pc-configurator :is(.product-form__add-button[disabled], .button.button--primary[disabled], .btn-primary[disabled]){
opacity:.55 !important; cursor:not-allowed !important;
}
/* Blue panel container */
#pc-configurator .card.card-recap{
background:#eaf3ff;
border:1px solid #e1e9f7;
border-radius:12px;
box-shadow:none;
padding:18px;
}
#pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr){
border-bottom:1px solid #eef2f8;
}
#pc-configurator .card-recap :is(.summary__list > *:last-child, .table.table-recap tr:last-child){
border-bottom:0;
}
/* Rows: left = title, right = price */
#pc-configurator .card-recap :is(.summary__list > * , .table.table-recap td){
padding:18px 16px; font-size:16px; color:#14233b; vertical-align:middle;
}
#pc-configurator .card-recap .table__cell--right,
#pc-configurator .card-recap :is(.price, .summary__price){
text-align:right; white-space:nowrap; font-weight:800;
}
/* Product line: green check icon at far left */
#pc-configurator .card-recap :is(.summary__item,.table__row):first-child :is(.summary__title, td:first-child){
position:relative; padding-left:36px;
}
#pc-configurator .card-recap :is(.summary__item,.table__row):first-child :is(.summary__title, td:first-child)::before{
content:""; position:absolute; left:12px; top:50%; width:16px; height:16px;
transform:translateY(-50%);
background:conic-gradient(#14a44d 0 100%); border-radius:50%;
-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
/* “Remise” row (tag icon + negative amount) */
#pc-configurator .card-recap :is(.summary__discount, .discount, .table__row.discount) :is(.summary__title, td:first-child){
position:relative; padding-left:36px; color:#6b7a90; font-weight:700;
}
#pc-configurator .card-recap :is(.summary__discount, .discount, .table__row.discount) :is(.summary__title, td:first-child)::before{
content:""; position:absolute; left:12px; top:50%; width:16px; height:16px; transform:translateY(-50%);
background:#6b7a90;
-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
#pc-configurator .card-recap :is(.summary__discount, .discount, .table__row.discount) :is(.price, .table__cell--right){
color:#6b7a90; font-weight:800;
}
#pc-configurator .bundle-builder--remove-from-bundle-form button:hover{
color:#002fc4; border-color:#cfd6ea;
}
/* Total block */
#pc-configurator .card-recap .builder_total-price{
margin-top:22px; padding:22px 0; border-top:1px solid rgba(1,47,195,.14);
display:flex; align-items:center; justify-content:space-between;
}
#pc-configurator .card-recap .builder_total-price .heading{
color:#012FC3; font-weight:900; font-size: clamp(20px, 2vw, 28px);
}
#pc-configurator .card-recap .builder_total-price .price{
color:#08b6c9; font-weight:900; font-size: clamp(26px, 2.4vw, 40px);
}
/* CTA button (full width, orange) */
#pc-configurator .product-form__payment-container{ margin-top:14px; display:grid; }
#pc-configurator .product-form__add-button.button--primary{
width:100%; padding:18px; border-radius:12px; font-weight:800;
background:#ff6a00 !important; border:1px solid #ff6a00 !important; color:#fff !important;
}
#pc-configurator .product-form__add-button[disabled]{ opacity:.55; cursor:not-allowed; }
/* =========================================================
PC CONFIGURATOR — final polish overrides (fits your Liquid)
Paste at the very end of your CSS file
========================================================= */
/* ---------- Tokens (fallbacks if theme vars are missing) ---------- */
#pc-configurator{
--ts-blue: #012FC3;
--ts-blue-500: #002fc4;
--ts-cyan: #08b6c9;
--ts-accent: #ff6a00;
--ts-border: #e1e9f7;
--ts-border-2: #e7ecf4;
--ts-muted: #6b7a90;
--ts-text: #14233b;
--ts-panel: #eaf3ff;
}
/* =========================================================
LAYOUT (two equal columns; right is sticky on desktop)
========================================================= */
#pc-configurator.page-width,
#pc-configurator.pc-two-col{
max-width:1480px; margin:0 auto; padding:0 25px;
display:grid; grid-template-columns:1fr 1fr; gap:25px; align-items:start;
}
#pc-configurator .pc-left, #pc-configurator .pc-right{ min-width:0; }
#pc-configurator .pc-right{ position:sticky; top:180px; }
/* Page / Section titles (COMPOSANTS, PÉRIPHÉRIQUES) */
#pc-configurator .pc-left h1,
#pc-configurator .pc-left h2,
#pc-configurator .pc-section-title{
font-weight:800;
color:var(--ts-blue);
text-align:center;
margin:10px 0 18px;
font-size: clamp(24px, 2.2vw, 36px);
text-transform:uppercase;
line-height:1.15;
}
/* =========================================================
TILE CARDS (accordion heads + bodies)
========================================================= */
#pc-configurator .pc-tile{
background:#fff; border:1px solid var(--ts-border); border-radius:12px;
margin:14px 0; overflow:hidden; box-shadow:none;
}
#pc-configurator .pc-tile__head{
display:flex; align-items:center; justify-content:space-between;
padding:18px 22px; border-bottom:1px solid var(--ts-border); background:#fff;
}
#pc-configurator .pc-tile__left{ display:flex; align-items:center; gap:14px; }
#pc-configurator .pc-tile__title .pc-t{
color:#6b7a90; font-weight:500;
font-size: clamp(16px, 1.3vw, 20px);
}
#pc-configurator .pc-tile__title .req{ color:var(--ts-accent); }
#pc-configurator .pc-sel{ margin-top:2px; font-size:13px; color:var(--ts-muted); }
#pc-configurator .pc-tile__body{ padding:16px 22px; background:#f7f9fc; }
/* =========================================================
INLINE PREVIEW CARD (selected item under the tile head)
========================================================= */
#pc-configurator .pick-preview > *{
display:flex; gap:12px; align-items:center;
padding:12px; border:1px solid var(--ts-border-2); border-radius:12px; background:#fff;
}
#pc-configurator .pick-preview img{
width:56px; height:56px; object-fit:contain; border:1px solid #eff3f8; border-radius:10px; background:#fff;
}
#pc-configurator .pick-preview .pick-title{ font-weight:500; color:var(--ts-blue-500); font-size:14px; }
#pc-configurator .pick-preview .pick-sub{ color:var(--ts-muted); font-size:12px; }
/* “MODIFIER / RETIRER” row styling if text nodes are injected */
#pc-configurator .pick-preview .pick-actions{ margin-left:auto; display:flex; gap:18px; font-weight:700; color:#6b7a90; }
#pc-configurator .pick-preview .pick-actions .link{ cursor:pointer; }
#pc-configurator .pick-preview .pick-actions .link:hover{ color:var(--ts-blue-500); }
/* Blue panel wrapper */
#pc-configurator .recap{
background:var(--ts-panel);
border:1px solid var(--ts-border);
border-radius:12px; padding:18px; box-shadow:none;
}
/* Empty state row (hide when aria-hidden=true) */
#pc-configurator .recap-empty{
display:flex; gap:14px; align-items:center; color:var(--ts-muted); margin-bottom:14px;
}
#pc-configurator .recap-empty[aria-hidden="true"]{ display:none; }
/* Transparent recap rows (no white background block) */
#pc-configurator .card-recap :is(.summary__list,.table.table-recap){
background:transparent !important;
border:0 !important;
border-radius:0 !important;
}
#pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr){
background:transparent !important;
border-bottom:1px solid #dbe6f5 !important;
}
#pc-configurator .card-recap :is(.summary__list > *:last-child, .table.table-recap tr:last-child){
border-bottom:0 !important;
}
#pc-configurator .recap-list > * {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
padding: 16px;
background: transparent; /* no color */
border-bottom: 1px solid rgb(0 47 196 / 5%) !important;
}
#pc-configurator .recap-list > *:last-child{ border-bottom:0; }
#pc-configurator .recap-item__title{ font-weight:700; color:var(--ts-text); }
#pc-configurator .recap-item__price{ font-weight:800; text-align:right; white-space:nowrap; }
/* Inline thumbnail support if you render it */
#pc-configurator .recap-item__thumb{
width:56px; height:56px; object-fit:contain; border:1px solid #eff3f8; border-radius:10px; background:#transparent; margin-right:8px;
}
/* Remove pill */
#pc-configurator .recap .remove,
#pc-configurator .recap .recap-item__remove{
justify-self:end; margin-left:10px;
padding:6px 12px; border-radius:999px; border:1px solid #d7dbe8; background:#fff;
color:var(--ts-muted); font-size:12px; font-weight:700; text-transform:uppercase; cursor:pointer;
}
#pc-configurator .recap .remove:hover,
#pc-configurator .recap .recap-item__remove:hover{ color:var(--ts-blue-500); border-color:#cfd6ea; }
/* Totals area */
#pc-configurator .recap-row{
display:flex; align-items:center; justify-content:space-between;
padding:16px 4px; color:var(--ts-text); font-size:16px;
}
#pc-configurator .recap-subtotal{ padding-top:18px; }
#pc-configurator .recap-discount{ color:var(--ts-muted); font-weight:700; }
#pc-configurator .recap-discount > :last-child{ color:var(--ts-muted); font-weight:800; }
#pc-configurator .recap-total{
margin-top:4px; padding:22px 4px 6px; border-top:1px solid rgba(1,47,195,.14);
display:flex; align-items:center; justify-content:space-between;
}
#pc-configurator .recap-total > span{
color:var(--ts-blue); font-weight:900; font-size: clamp(20px, 2vw, 28px);
}
#pc-configurator .recap-total > strong{
color:var(--ts-cyan); font-weight:900; font-size: clamp(26px, 2.4vw, 40px);
}
/* CTA buttons */
#pc-configurator .recap .actions{ margin-top:12px; display:grid; gap:10px; }
#pc-configurator .recap .btn-primary{
width:100%; padding:18px; border-radius:12px; font-weight:800;
background:var(--ts-accent) !important; border:1px solid var(--ts-accent) !important; color:#fff !important;
}
#pc-configurator .recap .btn-primary[disabled]{ opacity:.55; cursor:not-allowed; }
#pc-configurator .recap .btn-light{
padding:10px 14px; border:1px solid #d7dbe8; background:#fff; border-radius:12px; font-weight:600;
}
/* =========================================================
MODAL (grid + heading)
========================================================= */
#pc-modal{ position:fixed; inset:0; display:none; z-index:9999; }
#pc-modal.is-open{ display:block; }
#pc-modal .pc-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
#pc-modal .pc-modal__dialog{
position:relative; z-index:1; width:min(100%,1120px); margin:40px auto;
background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:18px;
}
#pc-modal .pc-modal__header{
display:flex; align-items:center; justify-content:center; border-bottom:0; padding:18px 18px 6px;
}
#pc-modal #pc-modal-title.title{
margin:0; text-align:center; text-transform:uppercase; letter-spacing:.04em;
font-weight:800; font-size:22px; color:var(--ts-blue);
}
#pc-modal .pc-modal__close{ position:absolute; right:1px; top:10px; width:28px; height:28px; border:0; background:transparent; cursor:pointer; }
#pc-modal .pc-modal__close::before,#pc-modal .pc-modal__close::after{
content:""; position:absolute; left:4px; right:4px; top:50%; height:2px; background:#012FC3;
}
#pc-modal .pc-modal__close::before{ transform:translateY(-50%) rotate(45deg); }
#pc-modal .pc-modal__close::after{ transform:translateY(-50%) rotate(-45deg); }
#pc-modal .pc-modal__filters{ display:grid; grid-template-columns:1fr 160px 160px auto; gap:10px; padding:6px 18px 16px; }
@media (max-width:860px){ #pc-modal .pc-modal__filters{ grid-template-columns:1fr 1fr; } }
#pc-modal .pc-modal__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
@media (max-width:1100px){ #pc-modal .pc-modal__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){ #pc-modal .pc-modal__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ #pc-modal .pc-modal__grid{ grid-template-columns:1fr; } }
#pc-modal .pc-card{
border:1px solid var(--ts-border-2); border-radius:12px; background:#fff;
padding:16px; display:flex; flex-direction:column; gap:10px;
}
#pc-modal .pc-card__img{
height:200px; border:1px solid #eff3f8; border-radius:10px; display:grid; place-items:center; background:#fff;
}
#pc-modal .pc-card__img img{ max-width:100%; max-height:180px; object-fit:contain; }
#pc-modal .pc-card__title,
#pc-modal .product-item__title,
#pc-modal .product-item-meta__title{ font-weight:800; font-size:14px; min-height:40px; color:var(--ts-blue-500); }
#pc-modal .pc-card__price .now{ color:var(--ts-cyan); font-weight:500; font-size:20px; }
#pc-modal .btn-orange{ width:100%; border-radius:12px; background:var(--ts-accent); border:1px solid var(--ts-accent); color:#fff; font-weight:800; }
/* =========================================================
RESPONSIVE & PRINT
========================================================= */
@media (max-width:1100px){
#pc-configurator.page-width, #pc-configurator.pc-two-col{ grid-template-columns:1fr; }
#pc-configurator .pc-right{ position:static; top:auto; }
}
@media print{
header, footer, #pc-modal { display:none !important; }
#pc-configurator.page-width{ grid-template-columns:1fr !important; }
#pc-configurator .pc-right{ position:static; }
}
/* =========================================================
GLOBAL PRIMARY CTA (safety net)
========================================================= */
#pc-configurator :is(.product-form__add-button, .button.button--primary, .btn-primary){
background: var(--ts-accent) !important;
border:1px solid var(--ts-accent) !important;
color:#fff !important;
border-radius:12px !important;
font-weight:800 !important;
}
#pc-configurator :is(.product-form__add-button[disabled], .button.button--primary[disabled], .btn-primary[disabled]){
opacity:.55 !important; cursor:not-allowed !important;
}
/* ===========================
RIGHT RECAP — fix theme/app markup
(works with bundle-summary / bb-summary DOM)
=========================== */
/* 1) Kill the large hero/gallery image block inside the recap */
#pc-configurator .card-recap :is(.bundle-summary__media,
.bundle-summary__image,
.bb-summary__hero,
.bb-summary__gallery,
.bb-summary__product-media,
.product__media,
.product-media){ display:none !important; }
/* 3) Each product row (thumb | title | price) */
#pc-configurator .card-recap :is(.bundle-summary__product,
.bb-summary__product,
.bb-summary__item){
display:grid;
grid-template-columns: auto 1fr auto;
gap:12px; align-items:center;
padding:16px;
border-bottom:1px solid #eef2f8;
}
#pc-configurator .card-recap :is(.bundle-summary__product:last-child,
.bb-summary__product:last-child,
.bb-summary__item:last-child){ border-bottom:0; }
/* Thumb (make small & neat) */
#pc-configurator .card-recap :is(.bundle-summary__image-wrapper,
.bb-summary__image-wrapper,
.bb-summary__image){
width:56px; height:56px; display:grid; place-items:center;
border:1px solid #eff3f8; border-radius:10px; background:#fff; overflow:hidden;
}
#pc-configurator .card-recap :is(.bundle-summary__image-wrapper img,
.bb-summary__image-wrapper img,
.bb-summary__image img){
max-width:100%; max-height:100%; object-fit:contain;
}
/* Title & meta */
#pc-configurator .card-recap :is(.bundle-summary__title,
.bb-summary__title,
.bb-summary__product-title){
font-weight:700; color:var(--ts-text); margin:0;
line-height:1.25;
}
#pc-configurator .card-recap :is(.bundle-summary__meta,
.bb-summary__meta){ color:var(--ts-muted); font-size:12px; }
/* Price at far right */
#pc-configurator .card-recap :is(.bundle-summary__price,
.bb-summary__price,
.bb-summary__product-price){
text-align:right; white-space:nowrap; font-weight:800; color:var(--ts-text);
}
#pc-configurator .card-recap :is(.bundle-summary__remove:hover,
.bb-summary__remove:hover,
.bb-summary__delete:hover){
color:var(--ts-blue-500); border-color:#cfd6ea;
}
/* 4) Subtotal / Discount (grey) / Totals (cyan) — support both structures */
#pc-configurator .card-recap :is(.builder_total-price,
.bundle-summary__totals,
.bb-summary__totals){
margin-top:22px; padding-top:22px;
border-top:1px solid rgba(1,47,195,.14);
}
/* Rows inside totals blocks */
#pc-configurator .card-recap :is(.bundle-summary__totals-row,
.bb-summary__totals-row){
display:flex; align-items:center; justify-content:space-between;
padding:6px 0; font-size:16px; color:var(--ts-text);
}
/* Discount row look */
#pc-configurator .card-recap :is(.bundle-summary__totals-row--discount,
.bb-summary__totals-row--discount){
color:var(--ts-muted); font-weight:700;
}
#pc-configurator .card-recap :is(.bundle-summary__totals-row--discount > *,
.bb-summary__totals-row--discount > *:last-child){
color:var(--ts-muted); font-weight:800;
}
/* Big TOTAL */
#pc-configurator .card-recap :is(.bundle-summary__total,
.bb-summary__total){
display:flex; align-items:center; justify-content:space-between;
padding-top:12px;
}
#pc-configurator .card-recap :is(.bundle-summary__total-label,
.bb-summary__total-label){
color:var(--ts-blue); font-weight:900; font-size: clamp(20px, 2vw, 28px);
}
#pc-configurator .card-recap :is(.bundle-summary__total-price,
.bb-summary__total-price){
color:var(--ts-cyan); font-weight:900; font-size: clamp(26px, 2.4vw, 40px);
}
/* 5) Buttons under recap (fallback if theme injects its own) */
#pc-configurator .card-recap :is(.bundle-summary__actions, .bb-summary__actions){
margin-top:12px; display:grid; gap:10px;
}
#pc-configurator .card-recap :is(.bundle-summary__actions .button--primary,
.bb-summary__actions .button--primary){
background:var(--ts-accent) !important; border-color:var(--ts-accent) !important;
color:#fff !important; border-radius:12px; font-weight:800; padding:16px 18px;
}
/* ============================
PATCH — match the clean mock
============================ */
/* A) Square corners everywhere (cards, buttons, recap) */
#pc-configurator :is(.pc-tile,
.recap,
.recap-list,
.product-form__add-button,
.button,
.btn,
.btn-primary,
.btn-light,
.plus-button,
.plus-button.plus-button--large){ border-radius:8px !important; }
/* B) “+” button = naked plus (no box) */
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large){
width:26px; height:26px; background:transparent !important; border:0 !important;
position:relative; color:transparent; box-shadow:none !important; padding:0 !important;
}
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large)::before,
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large)::after{
content:""; position:absolute; left:50%; top:50%; width:18px; height:2px;
background:var(--ts-blue-500); transform:translate(-50%,-50%);
}
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large)::after{
transform:translate(-50%,-50%) rotate(90deg);
}
/* C) Accordion heads/bodies – square & tight */
#pc-configurator .pc-tile{ border-radius:8px; }
#pc-configurator .pc-tile__head{ padding:16px 18px; }
#pc-configurator .pc-tile__body{ padding:14px 18px; }
/* D) RECAP — hide thumbs; force simple 3‑col row: ✓ title | price | RETIRER */
#pc-configurator .card-recap :is(.bundle-summary__media,
.bundle-summary__image,
.bundle-summary__image-wrapper,
.bb-summary__hero,
.bb-summary__gallery,
.bb-summary__image,
.bb-summary__product-media){ display:none !important; }
#pc-configurator .card-recap :is(.bundle-summary__product,
.bb-summary__product,
.bb-summary__item){
display:grid; grid-template-columns: 1fr auto auto; /* title | price | retirer */
gap:12px; align-items:center; padding:14px 16px;
border-bottom:1px solid #eef2f8;
}
#pc-configurator .card-recap :is(.bundle-summary__product:last-child,
.bb-summary__product:last-child,
.bb-summary__item:last-child){ border-bottom:0; }
#pc-configurator .card-recap :is(.bundle-summary__title,
.bb-summary__title,
.bb-summary__product-title){
margin:0; font-weight:700; color:var(--ts-text); line-height:1.25;
}
#pc-configurator .card-recap :is(.bundle-summary__price,
.bb-summary__price,
.bb-summary__product-price){
font-weight:800; white-space:nowrap; text-align:right; color:var(--ts-text);
}
#pc-configurator .card-recap :is(.bundle-summary__remove,
.bb-summary__remove,
.bb-summary__delete,
.bundle-builder--remove-from-bundle-form button):hover{
color:var(--ts-blue-500); text-decoration:none;
}
/* E) Discount & totals – grey discount, cyan big total */
#pc-configurator .card-recap :is(.bundle-summary__totals,
.bb-summary__totals,
.builder_total-price){
margin-top:18px; padding-top:18px; border-top:1px solid rgba(1,47,195,.14);
}
#pc-configurator .card-recap :is(.bundle-summary__totals-row,
.bb-summary__totals-row){
display:flex; align-items:center; justify-content:space-between;
padding:6px 0; font-size:16px; color:var(--ts-text);
}
#pc-configurator .card-recap :is(.bundle-summary__totals-row--discount,
.bb-summary__totals-row--discount){
color:var(--ts-muted); font-weight:700;
}
#pc-configurator .card-recap :is(.bundle-summary__totals-row--discount > *:last-child,
.bb-summary__totals-row--discount > *:last-child){ font-weight:800; }
#pc-configurator .card-recap :is(.bundle-summary__total,
.bb-summary__total,
.builder_total-price){
display:flex; align-items:center; justify-content:space-between;
}
#pc-configurator .card-recap :is(.bundle-summary__total-label,
.bb-summary__total .label,
.builder_total-price .heading){
color:var(--ts-blue); font-weight:900; font-size: clamp(20px, 2vw, 28px);
}
#pc-configurator .card-recap :is(.bundle-summary__total-price,
.bb-summary__total .price,
.builder_total-price .price){
color:var(--ts-cyan) !important; font-weight:900; font-size: clamp(26px, 2.4vw, 40px);
}
/* F) Buttons under recap: square & consistent */
#pc-configurator .recap .actions{ margin-top:12px; display:grid; gap:10px; }
#pc-configurator .recap :is(.btn-primary, .button--primary, .product-form__add-button){
border-radius:8px !important; padding:16px 18px !important;
background:var(--ts-accent) !important; border:1px solid var(--ts-accent) !important; color:#fff !important;
}
#pc-configurator .recap :is(.btn-light, .button--secondary, .button--tertiary){
border-radius:8px !important; padding:12px 14px !important;
border:1px solid #d7dbe8 !important; background:#fff !important; color:#14233b !important; font-weight:600 !important;
}
#pc-configurator .card-recap :is(.bundle-summary__title-main,.bb-summary__title-main){ display:none !important; }
/* 1) Kill images/thumbs anywhere inside the recap card (hero or per‑row) */
#pc-configurator .card.card-recap :is(.bb-summary__hero,
.bundle-summary__media,
.bb-summary__image,
.bb-summary__gallery,
.product__media,
.media,
figure,
picture,
img){ display:none !important; }
#pc-configurator .card.card-recap :is(.bb-summary__product,
.bundle-summary__product,
.bb-summary__item){
display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
padding:14px 16px;border-bottom:1px solid #eef2f8;
}
#pc-configurator .card.card-recap :is(.bb-summary__product:last-child,
.bundle-summary__product:last-child,
.bb-summary__item:last-child){ border-bottom:0; }
#pc-configurator .card.card-recap :is(.bb-summary__product-title,
.bundle-summary__title){ margin:0;font-weight:700;color:var(--ts-text);line-height:1.25; }
#pc-configurator .card.card-recap :is(.bb-summary__product-price,
.bundle-summary__price){ font-weight:800;white-space:nowrap;text-align:right;color:var(--ts-text); }
/* 4) Totals block — like the mock */
#pc-configurator .card-recap :is(.builder_total-price,
.bb-summary__totals,
.bundle-summary__totals){
margin-top:18px;padding-top:18px;border-top:1px solid rgba(1,47,195,.14);
}
#pc-configurator .card-recap :is(.bb-summary__totals-row,.bundle-summary__totals-row){
display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:16px;color:var(--ts-text);
}
#pc-configurator .card-recap :is(.bb-summary__totals-row--discount,
.bundle-summary__totals-row--discount){ color:var(--ts-muted);font-weight:700; }
#pc-configurator .card-recap :is(.bb-summary__totals-row--discount > *:last-child,
.bundle-summary__totals-row--discount > *:last-child){ font-weight:800; }
#pc-configurator .card-recap :is(.builder_total-price .heading,
.bb-summary__total-label){ color:var(--ts-blue);font-weight:900;font-size:clamp(20px,2vw,28px); }
#pc-configurator .card-recap :is(.builder_total-price .price,
.bb-summary__total-price){ color:var(--ts-cyan) !important;font-weight:900;font-size:clamp(26px,2.4vw,40px); }
/* 5) Buttons under recap */
#pc-configurator .recap .actions{ margin-top:12px;display:grid;gap:10px; }
#pc-configurator .recap :is(.btn-primary,.product-form__add-button){
border-radius:8px !important;padding:16px 18px !important;background:var(--ts-accent) !important;border:1px solid var(--ts-accent) !important;color:#fff !important;
}
(.btn-light,.button--secondary,.button--tertiary){
border-radius:8px #pc-configurator .recap :is!important;padding:12px 14px !important;border:1px solid #d7dbe8 !important;background:#fff !important;color:#14233b !important;font-weight:600 !important;
}
/* ==== global square look (1px radius everywhere) ==== */
#pc-configurator :is(.pc-tile,.recap,.recap-list, .product-form__add-button,
.button, .btn, .btn-primary, .btn-light, .btn-orange,
.pc-card, .pc-card__img, .pick-preview > *, .bundle-builder--remove-from-bundle-form button){
border-radius: 1px !important;
}
/* keep the "+" icon itself borderless */
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large){
border: 0 !important; background: transparent !important;
}
/* simple white list */
#pc-configurator .recap-list{
background:#fff; border:1px solid var(--ts-border-2);
overflow:hidden;
}
#pc-configurator .recap-list > * {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
padding: 16px;
background: transparent; /* no color */
border-bottom: 1px solid rgb(0 47 196 / 5%) !important;
}
#pc-configurator .recap-list > *:last-child{ border-bottom:0; }
#pc-configurator .recap-item__title{ color:var(--ts-text); font-weight:600; }
#pc-configurator .recap-item__price{ font-weight:800; white-space:nowrap; }
/* discount row tone */
#pc-configurator .recap-row.recap-discount{ color:var(--ts-muted); }
#pc-configurator .recap-row.recap-discount > :last-child{ font-weight:800; }
/* total block like the screenshot */
#pc-configurator .recap-total{
margin-top:4px; padding:22px 4px 6px;
border-top:1px solid rgba(1,47,195,.14);
display:flex; justify-content:space-between; align-items:center;
}
#pc-configurator .recap-total > span{ color:var(--ts-blue); font-weight:900; font-size:28px; }
#pc-configurator .recap-total > strong{ color:var(--ts-cyan); font-weight:900; font-size:40px; }
/* orange CTA (square) */
#pc-configurator .recap .btn-primary{
background:var(--ts-accent) !important; border:1px solid var(--ts-accent) !important;
color:#fff !important; font-weight:800; padding:18px; width:100%;
border-radius:1px !important;
}
#pc-configurator .recap .btn-light{ border-radius:1px !important; }
/* ==== TILES / ACCORDIONS (square) ==== */
#pc-configurator .pc-tile{ border-radius:1px; }
#pc-configurator .pc-tile__head{ border-bottom:1px solid var(--ts-border); }
#pc-configurator .pc-tile__body{ background:#f7f9fc; }
/* ==== MODAL ==== */
/* dialog sizing + scrolling */
#pc-modal .pc-modal__dialog{
max-height: min(90vh, 980px);
overflow: hidden; /* clip edges */
display:flex; flex-direction:column;
border-radius:1px; /* square */
}
/* sticky header, blue title, no bold */
#pc-modal .pc-modal__header{
position:sticky; top:0; z-index:2;
background:#fff; border-bottom:1px solid #e7ecf4;
padding:14px 18px;
}
#pc-modal #pc-modal-title.title{
color: var(--ts-blue);
font-weight:400; /* no bold */
font-size: 22px;
text-transform:uppercase;
letter-spacing:.02em;
}
/* filters sit under the sticky header */
#pc-modal .pc-modal__filters{ padding:12px 18px 14px; border-bottom:1px solid #eef2f8; }
/* scroll the grid area */
#pc-modal .pc-modal__grid{
padding:18px; overflow:auto; /* scrollable grid */
}
/* product cards: square & tidy */
#pc-modal .pc-card{ border-radius:1px; }
#pc-modal .pc-card__img{ border-radius:1px; }
/* card title: blue, not bold */
#pc-modal .pc-card__title,
#pc-modal .product-item__title,
#pc-modal .product-item-meta__title{
color: var(--ts-blue-500);
font-weight:600; /* lighter than bold */
}
/* orange “Ajouter” buttons */
#pc-modal :is(.btn-orange, .button--primary, .btn-primary){
background: var(--ts-accent) !important;
border: 1px solid var(--ts-accent) !important;
color:#fff !important;
border-radius:1px !important;
font-weight:800;
}
/* make the “x” close icon feel sharper */
#pc-modal .pc-modal__close{ border-radius:1px; }
/* ✔ icon for product rows */
#pc-configurator .recap-list > *:not(.recap-discount):not(.recap-total) .recap-item__title::before{
content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
width:16px; height:16px; background:#14a44d; border-radius:50%;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
}
/* 🏷 tag icon for discount rows */
#pc-configurator .recap-row.recap-discount .recap-item__title{
color:var(--ts-muted); font-weight:700; padding-left:32px;
}
#pc-configurator .recap-row.recap-discount .recap-item__title::before{
content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
width:16px; height:16px; background:#6b7a90;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/16px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/16px no-repeat;
}
#pc-configurator .recap-row.recap-discount .recap-item__price{
color:var(--ts-muted); font-weight:800;
}
/* ============= FINAL POLISH (safe overrides) ============= */
/* 0) Make everything square (1px) */
#pc-configurator :is(.pc-tile, .pc-tile__head, .pc-tile__body,
.recap, .recap-list, .recap-list > *, .recap-row, .recap-total,
.btn-primary, .btn-light, .product-form__add-button,
.pc-modal__dialog, .pc-card, .pc-card__img, input, select, .pc-ico){
border-radius:1px !important;
}
/* 1) Recap rows — unify row font size to your formula */
#pc-configurator :is(.recap-list > *, .recap-row){
font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px)) !important;
}
/* 2) Remove any thumbnails inside the recap */
#pc-configurator .recap :is(img, .recap-item__thumb){
display:none !important;
}
/* 3) Add green ✔ icon in front of product titles (no specific class needed) */
#pc-configurator .recap :is(.recap-list > *, .recap-row):not(.recap-discount):not(.recap-total) > :first-child{
position:relative; padding-left:2px;
}
#pc-configurator .recap :is(.recap-list > *, .recap-row):not(.recap-discount):not(.recap-total) > :first-child::before{
content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
width:16px; height:16px; background:#14a44d; border-radius:50%;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
/* 4) “Remise 2%” row — tag icon + muted text */
#pc-configurator .recap :is(.recap-discount, .discount, .table__row.discount){
color:var(--ts-muted) !important; font-weight:700;
}
#pc-configurator .recap :is(.recap-discount, .discount, .table__row.discount) > :first-child{
position:relative; padding-left:1px;
}
#pc-configurator .recap :is(.recap-discount, .discount, .table__row.discount) > :first-child::before{
content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
width:16px; height:16px; background:#6b7a90;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
#pc-configurator .recap :is(.recap-discount, .discount, .table__row.discount) :is(.price, .summary__price, .table__cell--right, :last-child){
color:var(--ts-muted) !important; font-weight:800 !important;
}
/* 5) Make the primary recap CTA perfectly square & full width */
#pc-configurator .recap .btn-primary,
#pc-configurator .product-form__add-button{
border-radius:1px !important;
}
/* 6) Modal header color + scrollable body (your earlier request) */
#pc-modal #pc-modal-title.title{
color:#012FC3 !important; font-weight:600 !important; text-transform:none !important;
}
#pc-modal .pc-modal__dialog{ max-height:calc(100vh - 80px); overflow:auto; }
/* ==== FINAL TOUCHES – recap + tiles + actions ==== */
/* 1) Bigger check & tag icons in the recap */
#pc-configurator .recap :is(.recap-list > *, .recap-row):not(.recap-discount):not(.recap-total) > :first-child{
position:relative; padding-left:2px !important;
}
#pc-configurator .recap :is(.recap-list > *, .recap-row):not(.recap-discount):not(.recap-total) > :first-child::before{
content:""; position:absolute; left:-25px; top:50%; transform:translateY(-50%);
width:20px; height:20px; background:#14a44d; border-radius:50%;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
/* Discount row “tag” icon a bit larger too */
#pc-configurator .recap :is(.recap-discount, .discount, .table__row.discount) > :first-child{
position:relative; padding-left:1px !important;
}
#pc-configurator .recap :is(.recap-discount, .discount, .table__row.discount) > :first-child::before{
content:""; position:absolute; left:-25px; top:50%; transform:translateY(-50%);
width:20px; height:20px; background:#6b7a90;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
/* Hide the tiny meta line UNDER the title, but only in the table markup */
#pc-configurator .card-recap td:first-child > :not(:first-child),
#pc-configurator .card-recap .summary__title > :not(:first-child){
display:none !important;
}
#pc-configurator .recap-list > .recap-row .recap-text,
#pc-configurator .recap-list > .recap-row .recap-title{
display:block !important; visibility:visible !important;
}
/* 3) Exact sizes for TOTAL area in the recap */
#pc-configurator .recap-total > span{ font-size:18px !important; font-weight:900; }
#pc-configurator .recap-total > strong{ font-size:24px !important; font-weight:900; }
/* 4) Left accordion — price in accent color */
#pc-configurator .pc-tile .pick-preview :is(.price, .money, .price-item, .price__regular, .price__current, .bundle-item-price){
color:#00badb !important;
font-weight:700;
}
/* 5) Make “MODIFIER / RETIRER” lighter & smaller in the tile preview */
#pc-configurator .pick-preview :is(.pick-actions, a, .link, button){
font-size:12px !important;
font-weight:500 !important;
color:#6b7a90 !important;
text-transform:uppercase;
letter-spacing:.02em;
}
#pc-configurator .pick-preview :is(.pick-actions, a, .link, button):hover{
color:#002fc4 !important;
}
/* (keep squares) */
#pc-configurator :is(.pc-tile, .pc-tile__head, .pc-tile__body, .recap, .recap-list, .recap-list > *,
.recap-row, .recap-total, .btn-primary, .btn-light, .product-form__add-button,
.pc-modal__dialog, .pc-card, .pc-card__img){ border-radius:1px !important; }
/* ========== RECAP — make check/tag bigger + hide the category line ========== */
/* Bigger check icon on each recap row (left of the product title) */
#pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr) :is(.summary__title, td:first-child){
position: relative;
padding-left: 42px; /* space for the icon */
}
#pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr) :is(.summary__title, td:first-child)::before{
content:"";
position:absolute; left:14px; top:50%; transform:translateY(-50%);
width:20px; height:20px; /* bigger */
background: conic-gradient(#14a44d 0 100%);
border-radius:50%;
-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}
/* Hide the extra “category” / collection text (keep only the product name) */
#pc-configurator .card-recap :is(.summary__title, td:first-child) :is(small, em, .subtitle, .sub, .meta, .type){ display:none !important; }
/* If it's rendered as a
+ text node, hide that too */
#pc-configurator .card-recap td:first-child br{ display:none !important; }
#pc-configurator .card-recap td:first-child br + *{ display:none !important; }
/* Discount row “tag” icon a touch larger (keeps original style) */
#pc-configurator .card-recap :is(.summary__discount, .discount, .table__row.discount) :is(.summary__title, td:first-child){
padding-left: 42px;
}
#pc-configurator .card-recap :is(.summary__discount, .discount, .table__row.discount) :is(.summary__title, td:first-child)::before{
width:20px; height:20px; left:14px;
}
/* “Total” text and amount sizes */
#pc-configurator .card-recap .builder_total-price .heading{ font-size:18px !important; }
#pc-configurator .card-recap .builder_total-price .price{ font-size:24px !important; }
/* ========== LEFT ACCORDION — price color + lighter actions ========== */
/* Price under the chosen item (cyan accent) */
#pc-configurator .pick-preview :is(.price, .money, .pick-price){
color:#00badb !important;
font-weight:500;
}
/* “MODIFIER / RETIRER” smaller & lighter */
#pc-configurator .pick-preview .pick-actions,
#pc-configurator .pick-preview .pick-actions .link{
font-size:12px; font-weight:500; color:#9aa7bd;
}
#pc-configurator .pick-preview .pick-actions .link:hover{ color:#002fc4; }
/* Supprimer la collection/catégorie (garder seulement le titre produit) */
#pc-configurator .card-recap td:first-child small,
#pc-configurator .card-recap td:first-child em,
#pc-configurator .card-recap td:first-child .subtitle,
#pc-configurator .card-recap td:first-child .meta,
#pc-configurator .card-recap td:first-child br{
display:none !important;
}
/* Taille Total et montant */
#pc-configurator .card-recap .builder_total-price .heading{
font-size:18px !important;
font-weight:700;
}
#pc-configurator .card-recap .builder_total-price .price{
font-size:24px !important;
font-weight:900;
color:#00badb !important;
}
/* === ACCORDÉON (à gauche) === */
/* Prix sélectionné en bleu cyan */
#pc-configurator .pick-preview .price,
#pc-configurator .pick-preview .money{
color:#00badb !important;
font-weight:800;
}
/* MODIFIER / RETIRER plus petit et plus clair */
#pc-configurator .pick-preview .pick-actions,
#pc-configurator .pick-preview .pick-actions .link{
font-size:12px !important;
font-weight:500 !important;
color:#a0a9b8 !important;
}
#pc-configurator .pick-preview .pick-actions .link:hover{
color:#002fc4 !important;
}
/* 2) No white blocks inside the recap list, keep only separators */
#pc-configurator .card-recap :is(.summary__list,.table.table-recap){
background:transparent !important;
border:0 !important;
border-radius:0 !important;
}
#pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr){
background:transparent !important;
border-bottom:1px solid #dbe6f5 !important;
}
#pc-configurator .card-recap :is(.summary__list > *:last-child, .table.table-recap tr:last-child){
border-bottom:0 !important;
}
/* 3) Bigger green check (left edge of each product row) */
#pc-configurator .card-recap td:first-child{
position:relative;
padding-left:42px !important;
}
#pc-configurator .card-recap td:first-child::before{
content:"";
position:absolute; left:14px; top:50%; transform:translateY(-50%);
width:22px; height:22px; border-radius:50%;
background:conic-gradient(#14a44d 0 100%);
-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
/* 4) Total typography (Total 18px / Amount 24px) */
#pc-configurator .card-recap .builder_total-price .heading{
font-size:18px !important; font-weight:700 !important;
}
#pc-configurator .card-recap .builder_total-price .price{
font-size:24px !important; font-weight:900 !important; color:#00badb !important;
}
/* =========================
LEFT ACCORDIONS
========================= */
/* 5) Square everything (1px radius) */
#pc-configurator .pc-tile,
#pc-configurator .pc-tile__head,
#pc-configurator .pc-tile__body,
#pc-configurator .recap,
#pc-configurator .card-recap,
#pc-configurator .btn-primary,
#pc-configurator .btn-light,
#pc-modal .pc-modal__dialog,
#pc-modal .pc-card{
border-radius:1px !important;
}
/* 6) Flat white cards; remove the grey slab background inside bodies */
#pc-configurator .pc-tile{
background:#fff !important;
border:1px solid var(--ts-border) !important;
margin:14px 0;
}
#pc-configurator .pc-tile__head{
background:#fff !important;
border-bottom:1px solid var(--ts-border) !important;
padding:24px 18px;
}
#pc-configurator .pc-tile__body{
background:#fff !important; /* <- no tinted area */
padding:12px 20px !important;
}
/* 7) In the selected-line preview: price in cyan; actions lighter & smaller */
#pc-configurator .pick-preview .money,
#pc-configurator .pick-preview .price{ color:#00badb !important; font-weight:800; }
#pc-configurator .pick-preview .pick-actions,
#pc-configurator .pick-preview .pick-actions .link{
font-size:12px !important; font-weight:500 !important; color:#a0a9b8 !important;
}
#pc-configurator .pick-preview .pick-actions .link:hover{ color:#002fc4 !important; }
/* =========================
MODAL (choose product)
========================= */
/* 8) Scrollable dialog */
#pc-modal .pc-modal__dialog{
max-height:calc(100vh - 80px) !important;
overflow:auto !important;
}
/* 9) Blue title, not bold, just the group name */
#pc-modal #pc-modal-title.title{
color:#012FC3 !important;
font-weight:500 !important;
letter-spacing:.02em;
}
/* 10) Product cards: clean titles/prices + orange CTA */
#pc-modal .pc-card__title,
#pc-modal .product-item__title,
#pc-modal .product-item-meta__title{
color:#002fc4 !important; font-weight:500 !important; min-height:auto;
}
#pc-modal .pc-card__price .now{ color:#00badb !important; font-weight:800; }
#pc-modal .btn-orange,
#pc-modal .product-form__add-button,
#pc-modal .button.button--primary{
background:#ff6a00 !important; border:1px solid #ff6a00 !important; color:#fff !important;
border-radius:1px !important; font-weight:800 !important;
}
/* Keep grid gutters tidy */
#pc-modal .pc-modal__grid{ gap:16px !important; }
/* ================================================
PC Config — polish patch (paste at end)
================================================ */
/* ---------- Global “square” look (1px radius) ---------- */
#pc-configurator .pc-tile,
#pc-configurator .pc-tile__head,
#pc-configurator .pc-tile__body,
#pc-configurator .recap,
#pc-configurator .recap-list,
#pc-configurator .recap-list > *,
#pc-configurator .card.card-recap,
#pc-modal .pc-modal__dialog,
#pc-modal .pc-card,
#pc-configurator .btn-primary,
#pc-configurator .btn-light,
#pc-configurator .product-form__add-button { border-radius: 1px !important; }
/* =========================================================
RIGHT COLUMN — RÉCAPITULATIF
========================================================= */
/* Remove thumbs and any image cells */
#pc-configurator .card-recap .summary__image,
#pc-configurator .card-recap .table__cell--image,
#pc-configurator .recap-item__thumb { display:none !important; }
/* Make each line transparent with a single light divider */
#pc-configurator .card-recap :is(.summary__list, .table.table-recap){
background: transparent !important; border:0 !important;
}
#pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr){
background: transparent !important; border-bottom:1px solid #e8edf3 !important;
}
#pc-configurator .card-recap :is(.summary__list > *:last-child, .table.table-recap tr:last-child){
border-bottom:0 !important;
}
/* Always show product title; hide small collection/type line */
#pc-configurator .card-recap :is(.summary__title, .table__cell--name){
display:block !important;
color:#14233b !important;
font-weight:600 !important;
font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px)) !important;
line-height:1.35;
}
#pc-configurator .card-recap :is(.summary__subtitle, .summary__product-type, .summary__category, .product-type){
display:none !important;
}
/* Price column stays bold/right */
#pc-configurator .card-recap :is(.summary__price, .table__cell--right, .price){
text-align:right !important; white-space:nowrap; font-weight:800 !important;
}
/* Bigger “✔” check + tag icon */
#pc-configurator .card-recap .summary__item::before,
#pc-configurator .card-recap .table__row::before{
content:""; width:18px; height:18px; margin-right:8px; display:inline-block;
background:conic-gradient(#18b368 0 100%); border-radius:50%;
-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
#pc-configurator .card-recap :is(.summary__item, .table__row){
display:flex; align-items:center; gap:10px;
}
/* “Total” sizes: 18 (label) / 24 (amount) */
#pc-configurator .card-recap .builder_total-price .heading{ font-size:18px !important; }
#pc-configurator .card-recap .builder_total-price .price{ font-size:24px !important; }
/* =========================================================
LEFT COLUMN — ACCORDIONS / PICKS
========================================================= */
/* One white slab, thin grey separators, no inner blue padding */
#pc-configurator .pc-tile{
background:#fff !important; margin:0 0 8px !important; border:1px solid #e8edf3 !important;
}
#pc-configurator .pc-tile__head{
background:#fff !important; border-bottom:1px solid #e8edf3 !important; padding:24px 18px !important;
}
#pc-configurator .pc-tile__body{
background:#fff !important; padding:12px 18px !important;
}
/* Preview line + lighter/smaller actions */
#pc-configurator .pick-preview > *{ border:0; padding:10px 0; }
#pc-configurator .pick-preview .pick-actions{ gap:14px; margin-left:auto; }
#pc-configurator .pick-preview .pick-actions .link{
font-size:12px; font-weight:600; color:#8a94a7;
}
#pc-configurator .pick-preview .pick-actions .link:hover{ color:#002fc4; }
/* Price accent in preview (several common classes covered) */
#pc-configurator .pick-preview :is(.price, .money, .pick-price){ color:#00badb !important; font-weight:700; }
/* Plus is already glyph-only; keep square look */
#pc-configurator :is(.pc-plus, .plus-button, .plus-button.plus-button--large){
border-radius:1px !important;
}
/* =========================================================
MODAL — colors, spacing, scrollable, single dividers
========================================================= */
/* Title just the group (blue), not bold-heavy */
#pc-modal #pc-modal-title.title{
color:#012FC3 !important; font-weight:700 !important; text-transform:none !important;
}
/* Scrollable content; dialog max height */
#pc-modal .pc-modal__dialog{ max-height:90vh; overflow:hidden; }
#pc-modal .pc-modal__filters{ position:sticky; top:0; background:#fff; z-index:3; }
#pc-modal .pc-modal__grid{ overflow:auto; max-height:calc(90vh - 110px); padding:0 6px 10px; }
/* Remove image frames; cleaner cards with one divider */
#pc-modal .pc-card{
border:0 !important; border-bottom:1px solid #e8edf3 !important;
padding:16px 8px 18px !important; gap:12px !important;
}
#pc-modal .pc-card__img{
height:200px; border:0 !important; background:transparent !important;
}
#pc-modal .pc-card__img img{ max-height:190px; }
/* Blue titles, cyan price, orange CTA */
#pc-modal :is(.pc-card__title, .product-item__title, .product-item-meta__title){
color:#002fc4 !important; font-weight:700 !important;
}
#pc-modal .pc-card__price .now{ color:#08b6c9 !important; font-weight:500; }
/* Taller orange buttons, bigger “+” */
#pc-modal .btn-orange,
#pc-modal button[type="button"].btn-orange{
height:48px; line-height:48px; border-radius:1px !important;
background:#ff6a00 !important; border:1px solid #ff6a00 !important; color:#fff !important; font-weight:800;
}
#pc-modal .btn-orange::before{
content:"+"; display:inline-block; margin-right:8px; font-size:20px; line-height:1;
}
/* Thin single separators between product columns on wide screens */
@media (min-width:900px){
#pc-modal .pc-modal__grid{ column-gap:24px !important; }
}
/* =========================================================
MISC
========================================================= */
/* Remove any leftover rounded corners from theme cards inside recap */
#pc-configurator .grid__cell--inner.card--sticky,
#pc-configurator .grid__cell--inner.card--sticky > * { border-radius:1px !important; }
/* =========================
FINAL POLISH — as requested
========================= */
/* 0) GLOBAL SQUARE CORNERS (1px) */
#pc-configurator :is(.pc-tile, .recap, .card-recap, .pc-modal__dialog,
.product-form__payment-container .button, .btn-primary, .btn-light,
.pc-card, .pc-card__img) { border-radius: 1px !important; }
/* 1) LEFT ACCORDION — one white block, grey separators, tighter look */
#pc-configurator .pc-left{ border:0px solid #e7ecf4; }
#pc-configurator .pc-left .pc-tile{
margin:0; border:0; background:#fff;
border-top:1px solid #e7ecf4; /* row dividers */
}
#pc-configurator .pc-left .pc-tile:first-of-type{ border-top:0; }
#pc-configurator .pc-tile__body{ background:#fff; padding:14px 20px; }
/* price in tiles = accent cyan */
#pc-configurator .pick-preview .pick-sub + *,
#pc-configurator .pick-preview .price,
#pc-configurator .pc-tile .money { color:#00badb !important; }
/* “MODIFIER / RETIRER” → lighter & smaller */
#pc-configurator .pick-actions,
#pc-configurator .pick-preview .pick-actions,
#pc-configurator .pc-tile .pick-actions,
#pc-configurator .pc-tile .link {
font-size:12px; font-weight:500; color:#8a98ac;
}
#pc-configurator .pick-actions .link:hover{ color:#002fc4; }
/* 2) RIGHT RECAP — show titles, no row white card, simple lines */
#pc-configurator .card-recap{ background:#eaf3ff; }
#pc-configurator .card-recap :is(.summary__list,.table.table-recap){
background:transparent; border:0 !important;
}
#pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr){
background:transparent !important;
border-bottom:1px solid #e7ecf4; /* single grey separator */
}
#pc-configurator .card-recap :is(.summary__list > *:last-child,
.table.table-recap tr:last-child){ border-bottom:0; }
/* make sure product title is visible and grey */
#pc-configurator .card-recap :is(.summary__title, td:first-child){
color:#4b5563 !important;
font-weight:600;
font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}
#pc-configurator .card-recap :is(.summary__item,.table__row) :is(.summary__title, td:first-child)::before{
content:""; position:absolute; left:8px; top:50%; width:14px; height:14px;
transform:translateY(-50%);
background:conic-gradient(#14a44d 0 100%); border-radius:50%;
-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/14px 14px no-repeat;
mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
#pc-configurator .bundle-builder--remove-from-bundle-form button{
padding:6px 10px; border-radius:999px; border:1px solid #d7dbe8; background:#fff;
color:#8a98ac; font-size:12px; font-weight:600; text-transform:uppercase; cursor:pointer;
}
/* Total sizing exactly: label 18px, amount 24px */
#pc-configurator .card-recap .builder_total-price .heading{ font-size:18px; }
#pc-configurator .card-recap .builder_total-price .price{ font-size:24px; }
/* 3) HIDE THUMBNAILS IN RECAP (titles only) */
#pc-configurator .card-recap :is(.summary__image, .table__cell--image){ display:none !important; }
/* 4) MODAL — match colors like your reference */
#pc-modal .pc-modal__dialog{ border:1px solid #e7ecf4; }
#pc-modal #pc-modal-title.title{
color:#012FC3; font-weight:700; text-transform:none; letter-spacing:0;
}
/* remove picture frame, keep clean */
#pc-modal .pc-card__img{ border:0; background:transparent; }
/* one grey line between products (both axes) */
#pc-modal .pc-modal__grid{ row-gap:24px; column-gap:24px; }
#pc-modal .pc-card{
border:0; border-bottom:1px solid #e7ecf4; padding:0 4px 18px;
}
/* title and price */
#pc-modal :is(.pc-card__title, .product-item__title){ color:#002fc4; font-weight:700; }
#pc-modal .pc-card__price .now{ color:#08b6c9; font-weight:500; }
/* orange button higher; bigger plus */
#pc-modal .btn-orange{
margin-top:12px; padding:14px 16px; font-weight:800;
background:#ff6a00; border:1px solid #ff6a00; color:#fff;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
#pc-modal .btn-orange::before{
content:"+"; font-size:18px; line-height:1; font-weight:900;
}
/* 5) RECAP ROW WHITE BACKGROUND → OFF (ensure no leftover) */
#pc-configurator .card-recap .table__row td{ background:transparent !important; }
/* RECAP: transparent rows (no white blocks) */
#pc-configurator .card-recap :is(.summary__list, .table.table-recap){
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}
#pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr){
background: transparent !important;
border-bottom: 1px solid #e7ecf4 !important; /* light separator only */
}
#pc-configurator .card-recap :is(.summary__list > *:last-child, .table.table-recap tr:last-child){
border-bottom: 0 !important;
}
/* Force transparent recap rows + thin separators */
#pc-configurator .card-recap :is(.summary__list, .table.table-recap){
background:transparent !important; border:0 !important; border-radius:0 !important;
}
#pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr){
background:transparent !important; border-bottom:1px solid #e7ecf4 !important;
}
/* ===== RÉCAP RIGHT COLUMN — final (screenshot #1) ===== */
#pc-configurator .recap__title,
#pc-configurator .grid__cell--inner.card--sticky .builder__group-title,
#pc-configurator .grid__cell--inner.card--sticky .heading.h2{ display:none !important; }
/* Blue panel wrapper */
#pc-configurator .card.card-recap{
background: var(--ts-panel);
border:1px solid var(--ts-border);
border-radius:1px; /* square look as requested */
box-shadow:none; padding:18px;
}
/* Kill any images/thumbs inside recap */
#pc-configurator .card.card-recap :is(
.bundle-summary__media, .bundle-summary__image, .bundle-summary__image-wrapper,
.bb-summary__hero, .bb-summary__gallery, .bb-summary__image,
.product__media, .media, figure, picture, img
){ display:none !important; }
/* Transparent rows with single thin divider (works for both table/list DOMs) */
#pc-configurator .card.card-recap :is(.summary__list, .table.table-recap){
background:transparent !important; border:0 !important; border-radius:0 !important;
}
#pc-configurator .card.card-recap :is(.summary__list > *, .table.table-recap tr){
background:transparent !important; border-bottom:1px solid #e7ecf4 !important;
}
#pc-configurator .card.card-recap :is(.summary__list > *:last-child, .table.table-recap tr:last-child){
border-bottom:0 !important;
}
/* Product row: ✓ icon + title left, price right, RETIRER link */
#pc-configurator .card.card-recap :is(.summary__title, td:first-child){
position:relative; padding-left:36px;
color:var(--ts-text) !important; font-weight:700; line-height:1.25;
font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}
/* green check */
#pc-configurator .card.card-recap :is(.summary__title, td:first-child)::before{
content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
width:20px; height:20px; background:#14a44d; border-radius:50%;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px no-repeat;
}
/* hide small meta/category line under titles if present */
#pc-configurator .card.card-recap :is(.summary__subtitle, .summary__product-type, .summary__category, .product-type, small, em){ display:none !important; }
/* price cell right & bold */
#pc-configurator .card.card-recap :is(.table__cell--right, .summary__price, .price){
text-align:right; white-space:nowrap; font-weight:800 !important; color:var(--ts-text);
}
/* Discount row (tag icon + muted) */
#pc-configurator .card.card-recap :is(.summary__discount, .discount, .table__row.discount) :is(.summary__title, td:first-child){
color:var(--ts-muted) !important; font-weight:700; padding-left:36px;
}
#pc-configurator .card.card-recap :is(.summary__discount, .discount, .table__row.discount) :is(.summary__title, td:first-child)::before{
content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
width:20px; height:20px; background:#6b7a90;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/20px no-repeat;
}
#pc-configurator .card.card-recap :is(.summary__discount, .discount, .table__row.discount) :is(.price, .table__cell--right){ color:var(--ts-muted) !important; font-weight:800 !important; }
/* Totals (label blue 18px / amount cyan big) */
#pc-configurator .card.card-recap :is(.builder_total-price, .bundle-summary__totals, .bb-summary__totals){
margin-top:22px; padding-top:22px; border-top:1px solid rgba(1,47,195,.14);
}
#pc-configurator .card.card-recap :is(.bundle-summary__total, .bb-summary__total, .builder_total-price){
display:flex; align-items:center; justify-content:space-between;
}
#pc-configurator .card.card-recap :is(.bundle-summary__total-label, .bb-summary__total-label, .builder_total-price .heading){
color:var(--ts-blue); font-weight:900; font-size:18px;
}
#pc-configurator .card.card-recap :is(.bundle-summary__total-price, .bb-summary__total-price, .builder_total-price .price){
color:var(--ts-cyan) !important; font-weight:900; font-size:24px;
}
/* Primary CTA under recap = orange, full width, square */
#pc-configurator .card.card-recap :is(.bundle-summary__actions .button--primary, .bb-summary__actions .button--primary, .product-form__add-button){
width:100%; padding:18px; border-radius:1px !important; font-weight:800;
background:var(--ts-accent) !important; border:1px solid var(--ts-accent) !important; color:#fff !important;
}
#pc-configurator .card.card-recap :is(.bundle-summary__actions .button--primary[disabled], .bb-summary__actions .button--primary[disabled], .product-form__add-button[disabled]){
opacity:.55; cursor:not-allowed;
}
/* ======================================
PC CONFIGURATOR — RECAP (final clean)
====================================== */
/* Section */
#pc-configurator .recap{
background:#eff8ff;
border:1px solid var(--ts-border,#e1e9f7);
border-radius:12px;
padding:18px;
}
#pc-configurator .recap__title{
margin:0 0 12px;
font-size:16px;
font-weight:800;
text-align:center;
color:var(--ts-blue,#012FC3);
}
/* ---- Base resets (remove leftovers) ---- */
#pc-configurator .recap-list{ background:transparent; border:0; border-radius:0; overflow:visible; }
#pc-configurator .recap-row::before{ content:none !important; } /* reset any old global check */
#pc-configurator .recap-img{ display:none !important; }
/* Only product rows get a check (re-enable here) */
#pc-configurator .recap-list > .recap-row::before{
content:"";
width:18px; height:18px; justify-self:center; border-radius:4px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23008a00' d='M9 20l-7-7 3-3 4 4L19 4l3 3z'/%3E%3C/svg%3E")
no-repeat center/18px 18px;
}
/* Titles visible (Safari-safe: no display:contents) */
#pc-configurator .recap-left{ grid-column:2; display:block !important; }
#pc-configurator .recap-text{ display:block; }
#pc-configurator .recap-title{
display:block;
font-size:12px; font-weight:500; line-height:1.25;
color:var(--ts-text,#677279);
}
#pc-configurator .recap a{ color:inherit; text-decoration:none; }
#pc-configurator .recap a:hover{ text-decoration:underline; }
/* Price */
#pc-configurator .recap-right{ display:contents; }
#pc-configurator .recap-price{ justify-self:end; font-size:14px; color: #08b6c9 (--ts-text,#14233b); }
#pc-configurator .recap-x:hover::before{ text-decoration:underline; }
/* Summary rows (no checks) */
#pc-configurator .recap-row.recap-subtotal,
#pc-configurator .recap-row.recap-discount{
display:grid; grid-template-columns:1fr auto;
background:transparent; border:0; border-top:1px solid #e7ecf4; padding:14px 0;
}
#pc-configurator .recap-discount{ color:#0f5132; }
/* Total */
#pc-configurator .recap-total{
display:grid; grid-template-columns:1fr auto;
border-top:1px solid #e1e9f7; padding:16px 0 8px;
}
#pc-configurator .recap-total span{ font-weight:800; color:var(--ts-blue,#012FC3); }
#pc-configurator #recap-sum{ font-size:22px; font-weight:500; color:var(--ts-cyan,#08b6c9); }
/* Actions */
#pc-configurator .actions{
display:flex; gap:10px; align-items:center; justify-content:stretch; margin-top:12px;
}
#pc-configurator .actions .btn-primary{
flex:1 1 auto; padding:14px;
border:1px solid var(--ts-accent,#ff6a00); background:var(--ts-accent,#ff6a00);
color:#fff; border-radius:10px; font-weight:800; cursor:pointer;
display:flex; align-items:center; justify-content:center; gap:10px;
}
#pc-configurator .actions .btn-light{
padding:10px 12px; border:1px solid #d7dbe8; background:#fff;
border-radius:12px; font-weight:700;
}
/* Empty state */
#pc-configurator .recap-empty{ text-align:center; padding:18px 10px; color:#6b7a90; background:transparent; }
/* Mobile */
@media (max-width:720px){
#pc-configurator .recap-list > .recap-row{
grid-template-columns:18px 1fr auto auto;
gap:10px; padding:10px 6px;
}
#pc-configurator #recap-sum{ font-size:20px; }
}
/* RECAP — kill ALL thumbnails (all markup variants), but keep SVG icons */
#pc-configurator .recap :is(
.recap-img,
.summary__image,
.summary__image-wrapper,
.table__cell--image,
.bundle-summary__media,
.bundle-summary__image,
.bundle-summary__image-wrapper,
.bb-summary__hero,
.bb-summary__gallery,
.bb-summary__image,
.bb-summary__image-wrapper,
.bb-summary__product-media,
.product__media,
.product-thumbnail,
figure,
picture,
img
){
display: none !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
/* Table cells that are dedicated to images */
#pc-configurator .card-recap :is(td.table__cell--image, th.table__cell--image){
display: none !important;
}
/* RECAP: layout + spacing */
#pc-configurator .pc-recap__item{
display:flex; align-items:center; justify-content:space-between;
padding:10px 14px; border-bottom:1px solid var(--ts-border-2);
}
#pc-configurator .pc-recap__left{display:flex; align-items:center; gap:10px;}
#pc-configurator .pc-recap__left input[type="checkbox"]{margin:0;}
#pc-configurator .pc-recap__title{
font-weight:400; color:#677279; line-height:1.2; /* title style */
}
#pc-configurator .pc-recap__price{white-space:nowrap; font-weight:600;}
/* tighter top/bottom around the heading "RÉCAPITULATIF" */
#pc-configurator .pc-recap__heading{padding:8px 0 6px;}
/* ===== PC CONFIG — FINAL PATCH (stability + single icons + buttons) ===== */
/* A) Make our recap skin stick even after the app re-renders */
html.pc-patched #pc-configurator .card-recap :is(.summary__list,.table.table-recap){
background:transparent !important; border:0 !important; border-radius:0 !important;
}
html.pc-patched #pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr){
background:transparent !important; border-bottom:1px solid #e7ecf4 !important;
}
html.pc-patched #pc-configurator .card-recap :is(.summary__list > *:last-child, .table.table-recap tr:last-child){
border-bottom:0 !important;
}
/* B) Prevent duplicated check/tag icons (keep ONLY our pseudo ones) */
#pc-configurator .card-recap :is(.summary__icon, .bb-icon, .bb-check, .bundle-summary__icon){ display:none !important; }
#pc-configurator .card-recap :is(.summary__item, .table__row) > :first-child{
position:relative; padding-left:36px !important;
}
#pc-configurator .card-recap :is(.summary__item, .table__row) > :first-child::before{
content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
width:20px; height:20px; background:#14a44d; border-radius:50%;
-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px no-repeat;
}
/* Discount/tag row (muted + tag icon) */
#pc-configurator .card-recap :is(.summary__discount, .discount, .table__row.discount) > :first-child{
color:#6b7a90 !important; font-weight:700; padding-left:36px !important;
}
#pc-configurator .card-recap :is(.summary__discount, .discount, .table__row.discount) > :first-child::before{
content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
width:20px; height:20px; background:#6b7a90;
-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/20px no-repeat;
}
#pc-configurator .card-recap :is(.summary__discount, .discount, .table__row.discount) :is(.price, .summary__price, .table__cell--right){
color:#6b7a90 !important; font-weight:800 !important;
}
/* D) Fix tile “RETIRER” (left column) so it’s always hit-testable */
#pc-configurator .pick-actions .link[data-action="remove"],
#pc-configurator .pick-actions .link.remove{
display:inline-block; padding:4px 6px; cursor:pointer;
}
/* E) Modal: remove our extra “+” if theme already shows one */
#pc-modal .btn-orange::before{ content:none !important; }
/* …and hide any built-in icon so we never get double symbols */
#pc-modal .btn-orange :is(svg, .icon){ display:none !important; }
/* ========= PC CONFIG — SAFE END PATCH (no breakage) ========= */
/* 0) Stabilize recap look after any app re-render */
html.pc-patched #pc-configurator .card-recap :is(.summary__list,.table.table-recap){
background:transparent !important; border:0 !important; border-radius:0 !important;
}
html.pc-patched #pc-configurator .card-recap :is(.summary__list > *, .table.table-recap tr){
background:transparent !important; border-bottom:1px solid #e7ecf4 !important;
}
html.pc-patched #pc-configurator .card-recap :is(.summary__list > *:last-child, .table.table-recap tr:last-child){
border-bottom:0 !important;
}
/* 1) Kill duplicate built-in check/tag icons so only our pseudo-icons show */
#pc-configurator .card-recap :is(.summary__icon,.bb-icon,.bb-check,.bundle-summary__icon){ display:none !important; }
#pc-configurator :is(.bundle-summary__remove,.bb-summary__remove,.bb-summary__delete,
.bundle-builder--remove-from-bundle-form button):hover{
color:#002fc4; text-decoration:none;
}
/* 3) Modal “Ajouter” button — remove extra plus if theme already adds one */
#pc-modal .btn-orange::before{ content:none !important; }
#pc-modal .btn-orange :is(svg,.icon){ display:none !important; }
/* 4) OLD PRICE (compare-at) — strike-through + muted
Works in MODAL cards, COLLECTION grid cards, and RECAP lines */
:root{
--ts-old: #9aa7bd; /* muted grey for old price */
}
/* 4a) MODAL cards (several app/theme variants covered) */
#pc-modal .pc-card__price :is(.was,.compare,.compare-at,.price__compare,.price-item--regular,del, s){
color:var(--ts-old) !important;
text-decoration:line-through !important;
font-weight:500 !important;
margin-right:6px;
}
#pc-modal .pc-card__price :is(.now,.price__current,.price-item--sale,.price--sale .price-item--last){
color:var(--ts-cyan) !important;
font-weight:500 !important;
}
/* 4b) COLLECTION product tiles/cards */
#pc-configurator, .collection, .product-grid, .grid, .main-content {
/* scope not to leak globally but catch common sections */
}
.collection :is(.price,.card__information .price,.product-card__price){
white-space:nowrap;
}
.collection :is(.price__compare, .price .price-item--regular, .price del, .price s){
color:var(--ts-old) !important;
text-decoration:line-through !important;
font-weight:500 !important;
margin-right:6px;
}
.collection :is(.price__sale, .price .price-item--sale, .price .price-item--last, .price .price__current){
color:var(--ts-cyan) !important;
font-weight:500 !important;
}
/* 4c) RECAP (right column) — if a compare price is rendered, style it */
#pc-configurator .card-recap :is(.summary__price,.table__cell--right,.price){
white-space:nowrap;
}
#pc-configurator .card-recap :is(.price--compare .price__compare,
.compare,.compare-at, del, s){
color:var(--ts-old) !important;
text-decoration:line-through !important;
font-weight:500 !important;
margin-right:6px;
}
#pc-configurator .card-recap :is(.price--sale .price__current,
.now,.price__current,.price-item--sale){
color:var(--ts-cyan) !important;
font-weight:800 !important;
}
/* 5) Bigger single ✓ and 🏷 in recap (no duplicates) */
#pc-configurator .card-recap :is(.summary__item,.table__row) > :first-child{
position:relative; padding-left:36px !important;
}
#pc-configurator .card-recap :is(.summary__item,.table__row) > :first-child::before{
content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
width:20px; height:20px; background:#14a44d; border-radius:50%;
-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px no-repeat;
}
#pc-configurator .card-recap :is(.summary__discount,.discount,.table__row.discount) > :first-child{
color:#6b7a90 !important; font-weight:700; padding-left:36px !important;
}
#pc-configurator .card-recap :is(.summary__discount,.discount,.table__row.discount) > :first-child::before{
content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
width:20px; height:20px; background:#6b7a90;
-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M21 12 12 21l-9-9 9-9 9 9Zm-12 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center/20px no-repeat;
}
/* 6) Left tiles — ensure “RETIRER” link is hit-testable */
#pc-configurator .pick-actions .link[data-action="remove"],
#pc-configurator .pick-actions .link.remove{
display:inline-block; padding:4px 6px; cursor:pointer;
}
/* 7) If your theme also paints a “+” inside modal buttons, keep only one */
#pc-modal .btn-orange::before{ content:none !important; }
/* =========================
PATCH — colors & filters (drop-in)
========================= */
#pc-configurator, #pc-modal, .collection, .collection-template, .template-collection{
--ts-price: #08b6c9; /* light blue you liked */
--ts-green: #18b368; /* site green for “En stock” (fallback) */
--ts-muted-2: #8a98ac; /* soft grey for compare/hyperlinked price */
}
/* 1) MAIN PRICE COLOR — tiles (left), modal cards, recap (right) */
#pc-configurator :is(.pick-preview .price,
.pick-preview .money,
.pick-price,
.pc-tile .money){ color:var(--ts-price) !important; font-weight:800; }
#pc-modal :is(.pc-card__price .now,
.product-item__price .price-item--sale,
.product-item__price .price-item--regular){ color:var(--ts-price) !important; }
#pc-configurator .card-recap :is(.summary__price, .table__cell--right, .price){
color:var(--ts-price) !important; font-weight:800 !important;
}
/* 2) OLD/COMPARE PRICE — grey + strikethrough (tiles, modal, collection) */
#pc-configurator :is(.price__regular,
.price--compare,
.compare-at,
.was,
.price-item--compare),
#pc-modal :is(.price__regular,
.price--compare,
.compare-at,
.was,
.price-item--compare),
.collection :is(.price__regular,
.price--compare,
.compare-at,
.was,
.price-item--compare){
color:var(--ts-muted-2) !important;
text-decoration: line-through;
font-weight:450;
margin-right:.35rem;
}
/* 3) HYPERLINKED PRICE — keep muted grey (don’t turn blue) */
#pc-configurator :is(.price a, .money a, .pick-price a),
#pc-modal :is(.price a, .money a),
.collection :is(.price a, .money a){
color:var(--ts-muted-2) !important;
text-decoration: underline;
}
/* 4) COLLECTION GRID — unify sizes like modal */
.collection :is(.price, .money){ font-size:16px; line-height:1.2; }
.collection :is(.price .price-item--sale,
.money .current){ color:var(--ts-price) !important; font-weight:800; }
/* 5) “EN STOCK” — site green in the modal (and anywhere in configurator) */
#pc-modal :is(.badge--in-stock, .stock, .productitem__availability, .in-stock),
#pc-configurator :is(.badge--in-stock, .stock, .in-stock){
color:var(--ts-green) !important;
font-weight:700;
}
/* 6) MODAL — Search bar, filters & “Effacer” (luxury look) */
#pc-modal .pc-modal__filters{
gap:12px;
padding:10px 18px 16px;
background:#fff;
border-bottom:1px solid #e7ecf4;
}
#pc-modal .pc-modal__filters input[type="search"],
#pc-modal .pc-modal__filters input[type="text"]{
height:44px; padding:0 14px; border:1px solid #e1e9f7; border-radius:8px;
outline:0; font-size:14px;
}
#pc-modal .pc-modal__filters select{
height:44px; padding:0 12px; border:1px solid #e1e9f7; border-radius:8px; background:#fff;
font-size:14px;
}
#pc-modal .pc-modal__filters :is(input, select):focus{
border-color:#bcd0ff; box-shadow:0 0 0 3px rgba(0,47,196,.08);
}
/* “Effacer” → subtle ghost button on the right */
#pc-modal .pc-modal__filters a[href*="clear"],
#pc-modal .pc-modal__filters .clear,
#pc-modal .pc-modal__filters .btn-clear,
#pc-modal .pc-modal__filters [data-action="clear"]{
justify-self:end;
display:inline-flex; align-items:center; gap:8px;
height:36px; padding:0 12px;
border:1px dashed #cfd6ea; border-radius:999px; background:#fff;
color:#6b7a90; font-weight:600; font-size:13px; text-decoration:none;
}
#pc-modal .pc-modal__filters a[href*="clear"]::before,
#pc-modal .pc-modal__filters .clear::before,
#pc-modal .pc-modal__filters .btn-clear::before{
content:"⟲";
font-size:14px; line-height:1;
}
#pc-modal .pc-modal__filters a[href*="clear"]:hover,
#pc-modal .pc-modal__filters .clear:hover,
#pc-modal .pc-modal__filters .btn-clear:hover{
border-color:#b8c3da; color:#002fc4;
}
/* 7) (safety) don’t add a second “+” on modal buttons */
#pc-modal .btn-orange::before{ content:none !important; }
#pc-modal .btn-orange :is(svg, .icon){ display:none !important; }
/* ===== MODAL — prices, stock color, filters sizing (final pass) ===== */
#pc-modal{
--ts-price: #08b6c9; /* light blue you picked */
--ts-green: #18b368; /* site green for stock */
--ctrl-h: 40px; /* unified control height for filters */
}
/* 1) PRICE COLORS in product cards */
#pc-modal :is(.pc-card__price .now,
.product-item__price .price-item--sale,
.product-item__price .price__current,
.product-item__price .price--highlight){
color: var(--ts-price) !important;
font-weight: 800;
}
#pc-modal :is(.pc-card__price .compare,
.product-item__price .price-item--compare,
.product-item__price .price__regular,
.product-item__price .price--compare){
color: #8a98ac !important;
text-decoration: line-through;
font-weight: 450;
}
/* 2) “EN STOCK” → site green */
#pc-modal :is(.in-stock,
.stock,
.stock--text,
.badge--in-stock,
.product-item__availability,
.productitem__availability,
.product__availability){
color: var(--ts-green) !important;
font-weight: 700;
}
/* 3) FILTER STRIP — compact, luxury feel + proper sizes */
#pc-modal .pc-modal__filters{
display: grid;
grid-template-columns: 1fr 180px 180px auto; /* search | brand | price | effacer */
gap: 12px;
padding: 10px 18px 14px;
background: #fff;
border-bottom: 1px solid #e7ecf4;
}
/* Search input */
#pc-modal .pc-modal__filters input[type="search"],
#pc-modal .pc-modal__filters input[type="text"]{
height: var(--ctrl-h);
padding: 0 12px;
border: 1px solid #e1e9f7;
border-radius: 8px;
font-size: 14px;
outline: 0;
}
#pc-modal .pc-modal__filters input::placeholder{ color:#9aa7bd; }
/* Selects */
#pc-modal .pc-modal__filters select{
height: var(--ctrl-h);
padding: 0 12px;
border: 1px solid #e1e9f7;
border-radius: 8px;
background: #fff;
font-size: 14px;
outline: 0;
}
/* Focus state */
#pc-modal .pc-modal__filters :is(input, select):focus{
border-color:#bcd0ff;
box-shadow: 0 0 0 3px rgba(0,47,196,.08);
}
/* “Effacer” on the right */
#pc-modal .pc-modal__filters a[href*="clear"],
#pc-modal .pc-modal__filters .clear,
#pc-modal .pc-modal__filters .btn-clear,
#pc-modal .pc-modal__filters [data-action="clear"]{
justify-self: end;
align-self: center;
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 12px;
border: 1px dashed #cfd6ea;
border-radius: 999px;
background: #fff;
color: #6b7a90;
font-weight: 600;
font-size: 13px;
text-decoration: none;
line-height: 1;
}
#pc-modal .pc-modal__filters a[href*="clear"]::before,
#pc-modal .pc-modal__filters .clear::before,
#pc-modal .pc-modal__filters .btn-clear::before{
content:"⟲";
font-size: 14px;
}
#pc-modal .pc-modal__filters a[href*="clear"]:hover,
#pc-modal .pc-modal__filters .clear:hover,
#pc-modal .pc-modal__filters .btn-clear:hover{
border-color:#b8c3da;
color:#002fc4;
}
/* Mobile tweak: 2 columns */
@media (max-width: 860px){
#pc-modal .pc-modal__filters{
grid-template-columns: 1fr 1fr;
}
}
/* =========================
PC CONFIG — Price & Filters patch
(paste at end of pc-configurator.css)
========================= */
/* ---- Tokens ---- */
#pc-configurator{
--ts-price: var(--ts-cyan, #08b6c9); /* light blue you liked */
--ts-price-muted: #4b5563; /* grey for linked/secondary price */
--ts-green: #14a44d; /* site green (En stock) */
}
/* ---------------------------------
1) LEFT TILES — price under collection
- current price in light blue
- compare price (old) grey + strikethrough
- both same size across tiles
---------------------------------- */
#pc-configurator .pick-preview :is(.price,.money,.price__current,.price--current,.pick-price){
color: var(--ts-price) !important;
font-weight: 800 !important;
font-size: 16px !important;
line-height: 1.2;
}
#pc-configurator .pick-preview :is(.compare,.price__compare,.price--compare,.price__was,.was){
color: var(--ts-price-muted) !important;
text-decoration: line-through !important;
opacity: .9;
margin-right: 10px;
font-size: 12px !important; /* keep same size as current */
font-weight: 500 !important;
}
/* Keep the small grey for “hyperlinked” inline prices (if a price is an ) */
#pc-configurator .pick-preview a:is(.price,.money,.price__current,.price--current){
color: var(--ts-price-muted) !important;
font-weight: 700 !important;
}
/* ---------------------------------
2) RECAP — prices in the same light blue
---------------------------------- */
#pc-configurator :is(.recap-item__price,
.card-recap .summary__price,
.card-recap .table__cell--right,
.card-recap .price){
color: var(--ts-price) !important;
font-weight: 800 !important;
}
/* ---------------------------------
3) MODAL — product card prices + “En stock”
- current price light blue
- old price grey + strike
- stock line in website green
---------------------------------- */
#pc-modal :is(.pc-card__price .now,
.product-item__price .price__current,
.price--current,
.price-item--regular){
color: var(--ts-price) !important;
font-weight: 800 !important;
}
#pc-modal :is(.pc-card__price .compare,
.product-item__price .price__compare,
.price--compare,
.price-item--compare,
.price__was){
color: var(--ts-price-muted) !important;
text-decoration: line-through !important;
font-weight: 450 !important;
}
/* “En stock” badge/line (covers common markup names) */
#pc-modal :is(.stock,.in-stock,.product-item__availability,.badge--instock,.availability){
color: var(--ts-green) !important;
font-weight: 700 !important;
}
/* ---------------------------------
4) MODAL — filters & search bar sizing / look
(make search a bit smaller; align heights)
---------------------------------- */
/* Grid balance: Search a bit narrower, selects equal, clear auto */
#pc-modal .pc-modal__filters{
grid-template-columns: minmax(320px, 1.1fr) 180px 180px auto !important;
}
/* Unified control height/size */
#pc-modal .pc-modal__filters :is(input[type="search"], select, button){
height: 42px !important;
line-height: 42px !important;
padding: 0 12px !important;
font-size: 14px !important;
border-radius: 1px !important;
}
/* Search input polish */
#pc-modal #modal-search{
border: 1px solid var(--ts-border-2) !important;
background: #fff !important;
}
/* Selects */
#pc-modal .pc-modal__filters select{
border: 1px solid var(--ts-border-2) !important;
background: #fff !important;
}
/* “Effacer” button = subtle secondary */
#pc-modal #modal-clear.btn-light{
border: 1px solid #d7dbe8 !important;
background: #fff !important;
color: #374151 !important;
font-weight: 700 !important;
}
#pc-modal #modal-clear.btn-light:hover{
border-color: #cfd6ea !important;
color: var(--ts-blue-500) !important;
}
/* Mobile filter stack still OK */
@media (max-width: 860px){
#pc-modal .pc-modal__filters{
grid-template-columns: 1fr 1fr !important;
}
}
/* (Optional) tighten the big top title spacing inside modal a touch */
#pc-modal .pc-modal__header{ padding-bottom: 10px !important; }
/* ====== Techspace: quick polish overrides ====== */
:root{
/* use your existing tokens if present; these are safe fallbacks */
--ts-blue: #012FC3;
--ts-cyan: #2BBFFB; /* light blue for active prices / totals */
--ts-green: #10B981; /* site green for "En stock" */
--ts-gray-7: #374151;
--ts-gray-5: #6B7280;
--ts-gray-4: #9CA3AF;
}
/* --- Tile titles: not bold, same feel as live --- */
.pc-tile .pc-t{ font-weight:500; letter-spacing:.2px; }
/* --- Selected line under each tile stays grey --- */
.pc-tile .pc-sel{ color:#64748B; }
/* --- Recap: keep ONE style, align like "Sous-total" --- */
.recap .summary__list,
.recap .table-recap,
.recap .bundle-summary,
.recap .bb-summary{ display:none !important; } /* kill theme duplicates */
.recap .recap-list{ margin:0; }
.recap .recap-left{
display:flex; align-items:center; gap:10px;
}
.recap .recap-left::before{
content:""; width:14px; height:14px; flex:0 0 14px;
border-radius:999px; background:var(--ts-green);
box-shadow:0 0 0 3px rgba(16,185,129,.15);
}
.recap .recap-title{ font-weight:460; color:#6b7a90; }
.recap .recap-price{ color:var(--ts-cyan); font-weight:450; }
.recap .recap-x{
background:none; border:0; padding:0; margin:0;
color:var(--ts-blue); font-weight:700; text-transform:uppercase;
cursor:pointer;
}
/* Subtotal / discount / total lines match alignment */
.recap .recap-subtotal,
.recap .recap-discount{ display:flex; justify-content:space-between; align-items:center; padding:10px 20px; }
.recap .recap-discount{ padding-top:6px; padding-bottom:6px; }
.recap .recap-total{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 20px 6px; }
.recap .recap-total strong{ color:var(--ts-cyan); font-size:28px; }
/* --- Modal: filters sizing & tidy look --- */
#pc-modal .pc-modal__filters{
display:grid;
grid-template-columns: minmax(260px,1.4fr) minmax(160px,.9fr) minmax(160px,.9fr) auto; /* search | brand | price | clear */
gap:16px; align-items:end; margin-bottom:8px;
}
#pc-modal #modal-search{ height:44px; }
#pc-modal .pc-modal__filters label{ display:flex; flex-direction:column; gap:6px; color:var(--ts-gray-7); font-weight:500; }
#pc-modal .pc-modal__filters select,
#pc-modal .pc-modal__filters input[type="search"]{
height:44px; border-radius:12px;
}
/* --- Modal: price & stock colors inside cards --- */
#pc-modal .pc-card_price .now,
#pc-modal .product-item__price .price__current,
#pc-modal .price-item__price .price__current{
color:var(--ts-cyan) !important; font-weight:500;
}
#pc-modal .pc-card_price .was,
#pc-modal .product-item__price .price__was,
#pc-modal .price__compare{
color:var(--ts-gray-4) !important;
}
#pc-modal .pc-card_stock,
#pc-modal .product-item__stock,
#pc-modal .pc-stock,
#pc-modal [class*="stock"]{
color:var(--ts-green) !important; font-weight:600;
}
/* --- Modal: pager (Précédent / Suivant) --- */
#pc-modal .pc-modal__pager{
display:flex; gap:12px; padding:14px 24px;
color:var(--ts-gray-7);
}
#pc-modal .pc-modal__pager .prev,
#pc-modal .pc-modal__pager .next{ color:var(--ts-blue); font-weight:600; cursor:pointer; }
/* --- Collection tiles: price colors (current = light blue, linked/compare = grey) --- */
.pick-preview .now,
.pc-card_price .now{ color:var(--ts-cyan); font-weight:500; }
.pick-preview .was,
.pc-card_price .was,
.pick-preview a.price-link{ color:#64748B; }
/* --- RAM quantity stepper: tolerant selectors to catch your markup --- */
.pc-tile[data-key="ram"] [class*="qty"],
.pc-tile[data-key="ram"] .quantity,
.pc-tile[data-key="ram"] .pc-qty{
display:inline-flex; align-items:center; gap:6px;
background:#fff; border:1px solid #E5E7EB; border-radius:10px; padding:2px;
}
.pc-tile[data-key="ram"] [class*="qty"] input[type="number"]{
width:44px; height:36px; text-align:center; border:0; outline:0; font-weight:600;
}
.pc-tile[data-key="ram"] [class*="qty"] .minus,
.pc-tile[data-key="ram"] [class*="qty"] .plus,
.pc-tile[data-key="ram"] [class*="qty"] button{
width:36px; height:36px; border:0; border-radius:8px; background:#F3F4F6; cursor:pointer; font-weight:700;
}
.pc-tile[data-key="ram"] [class*="qty"] .minus:hover,
.pc-tile[data-key="ram"] [class*="qty"] .plus:hover{ background:#E5E7EB; }
/* ---------- Catalog modal tiles (equal height) ---------- */
#pc-configurator .pc-grid {
display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px;
}
@media (max-width: 1100px){ #pc-configurator .pc-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 820px) { #pc-configurator .pc-grid{ grid-template-columns: repeat(2,1fr); } }
#pc-configurator .pc-card{
display:flex; flex-direction:column; background:var(--ts-card-bg);
border:1px solid var(--ts-border); border-radius: var(--ts-r);
padding: var(--ts-pad); min-height: 360px; /* forces consistent height */
}
#pc-configurator .pc-card__img{ height:140px; display:flex; align-items:center; justify-content:center; }
#pc-configurator .pc-card__img img{ max-height:100%; width:auto; height:auto; }
#pc-configurator .pc-card__title{ font-weight:700; color:#0b2dbd; margin:10px 0 4px; min-height:44px; }
#pc-configurator .pc-card__meta{ color:var(--ts-muted); font-size:13px; margin-bottom:8px; }
#pc-configurator .pc-card__price{ margin-top:auto; } /* push down */
#pc-configurator .pc-card__price-old{ color:#9aa7bf; text-decoration: line-through; margin-right:8px; }
#pc-configurator .pc-card__cta{ margin-top:10px; }
#pc-configurator .pc-card .btn-add{
display:block; width:100%; height:48px; line-height:48px; text-align:center;
background: var(--ts-accent); color:#fff; border-radius:10px; font-weight:700;
}
/* green stock dot + single check icon */
#pc-configurator .stock-ok{ color:#1ba94c; font-weight:600; }
#pc-configurator .check-dot{
width:14px; height:14px; border-radius:50%; background:#14a44d; display:inline-block; vertical-align:middle; margin-right:6px;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox%3D'0 0 24 24'%3E%3Cpath fill%3D'%23000' d%3D'M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox%3D'0 0 24 24'%3E%3Cpath fill%3D'%23000' d%3D'M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
}
/* ================================
MODAL GRID (single, merged block)
================================ */
/* columns */
#pc-modal .pc-modal__grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:0 !important;}
@media(max-width:1100px){#pc-modal .pc-modal__grid{grid-template-columns:repeat(3,1fr) !important;}}
@media(max-width:820px){ #pc-modal .pc-modal__grid{grid-template-columns:repeat(2,1fr) !important;} }
@media(max-width:560px){ #pc-modal .pc-modal__grid{grid-template-columns:1fr !important;} }
/* no shadows/legacy bars */
#pc-modal .pc-card{box-shadow:none !important;border-radius:0 !important;background:#fff !important;}
#pc-modal .pc-card::before,#pc-modal .pc-card::after{content:none !important;}
/* solid, gap-free lines (per-card borders) */
#pc-modal .pc-card{border-right:1px solid #e5e7eb !important;border-bottom:1px solid #e5e7eb !important;border-left:0 !important;border-top:0 !important;}
#pc-modal .pc-card:nth-child(4n+1){border-left:1px solid #e5e7eb !important;}
#pc-modal .pc-card:nth-child(-n+4){border-top:1px solid #e5e7eb !important;}
@media(max-width:1100px){
#pc-modal .pc-card{border-left:0 !important;border-top:0 !important;}
#pc-modal .pc-card:nth-child(3n+1){border-left:1px solid #e5e7eb !important;}
#pc-modal .pc-card:nth-child(-n+3){border-top:1px solid #e5e7eb !important;}
}
@media(max-width:820px){
#pc-modal .pc-card{border-left:0 !important;border-top:0 !important;}
#pc-modal .pc-card:nth-child(2n+1){border-left:1px solid #e5e7eb !important;}
#pc-modal .pc-card:nth-child(-n+2){border-top:1px solid #e5e7eb !important;}
}
@media(max-width:560px){
#pc-modal .pc-card{border-left:1px solid #e5e7eb !important;}
#pc-modal .pc-card:first-child{border-top:1px solid #e5e7eb !important;}
}
/* make the product area scroll on mobile (keyboard-safe) */
#pc-modal .pc-modal__grid,
#pc-modal .pc-modal__content,
#pc-modal .pc-modal__body{
max-height:calc(100vh - 220px) !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
}
/* ==========================
FILTER BAR (final polish)
========================== */
#pc-modal .pc-modal__filters{
background:#fff !important;
border:0 !important;
border-radius:0 !important;
padding:10px 0 !important;
display:grid !important;
grid-template-columns: 1.8fr 1fr 1fr auto !important;
gap:12px !important;
position:relative !important; /* not fixed = scrolls away on mobile */
}
/* All fields: search, selects, clear → same style */
#pc-modal .pc-modal__filters input[type="search"],
#pc-modal .pc-modal__filters select,
#pc-modal .pc-modal__filters #modal-clear{
height:42px !important;
line-height:40px !important;
font-size:14px !important;
padding:0 12px !important;
border:1px solid #d1d5db !important;
border-radius:1px !important;
background:#fff !important;
box-shadow:none !important;
appearance:none;
font-weight:400 !important; /* Effacer not bold */
}
/* Search wider */
#pc-modal .pc-modal__filters input[type="search"]{
min-width:20px !important;
font-size:16px !important; /* iOS zoom fix */
}
/* Selects: padding for text + arrow */
#pc-modal .pc-modal__filters select{
padding:0 36px 0 12px !important;
background:
#fff url("data:image/svg+xml;utf8,")
no-repeat right 10px center/16px !important;
}
/* Clear button smaller + margin-right inside frame */
#pc-modal .pc-modal__filters #modal-clear{
padding:0 16px !important;
width:auto !important;
margin-right:8px !important; /* keeps it inside right border line */
}
/* Responsive fallbacks */
@media(max-width:900px){
#pc-modal .pc-modal__filters{ grid-template-columns: 1fr 1fr; }
#pc-modal .pc-modal__filters #modal-clear{ grid-column:1/-1; }
}
@media(max-width:640px){
#pc-modal .pc-modal__filters{ display:flex !important; flex-direction:column !important; }
#pc-modal .pc-modal__filters > *{ width:100% !important; }
#pc-modal .pc-modal__filters{ margin-bottom:10px; }
}
/* ===== CARD VERTICAL RHYTHM — hard align CTA ===== */
#pc-modal .pc-card{
display:flex !important;
flex-direction:column !important;
}
/* 1) Fix image block height (already close, keep consistent) */
#pc-modal .pc-card__img{ height:200px !important; }
/* 2) Title height: reserve exactly 2 lines */
#pc-modal .pc-card__title{
line-height:1.4 !important;
min-height:2.8em !important; /* 2 lines x 1.4 */
display:-webkit-box !important;
-webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden;
}
/* 3) Stock/status row: keep same height whether 1 or 2 words */
#pc-modal .pc-card__stock{ min-height:22px !important; }
/* 4) Price block: normalize height when old price appears */
#pc-modal .pc-card__price{
display:flex !important;
align-items:baseline !important;
gap:10px !important;
min-height:32px !important; /* one tidy row */
}
/* 5) CTA pinned to bottom on every card */
#pc-modal .pc-card .btn-orange,
#pc-modal .pc-card .btn-add{
height:48px !important;
line-height:48px !important;
margin-top:auto !important; /* <-- pushes button to bottom */
}
/* ===== Kill duplicate collection label under picked items (tile + recap) ===== */
#pc-configurator .pick-preview .pc-prev-collection,
#pc-configurator .recap-list .recap-item .recap-collection {
display: none !important;
}
/* Hide body (the grey under bar) unless the tile has content */
.pc-tile:not(.show-body) .pc-tile__body{
display:none !important;
}
/* RAM quantity controls: center the + / − and make them larger */
.pc-left .qty{
display:flex; align-items:center; gap:8px;
}
.pc-left .qty .qty-dec,
.pc-left .qty .qty-inc{
width:36px; height:36px;
display:inline-flex; align-items:center; justify-content:center;
font-size:20px; line-height:1; padding:0;
border:1px solid #d1d5db; border-radius:8px; background:#fff;
}
.pc-left .qty .qty-val{
min-width:24px; text-align:center; font-weight:600;
}
/* RAM quantity controls */
.pick-actions .qty{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}
/* The ± buttons */
.pick-actions .qty .qty-dec,
.pick-actions .qty .qty-inc{
width:40px;
height:40px;
font-size:26px; /* bigger icons */
line-height:1;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #d1d5db;
border-radius:2px;
background:#fff;
cursor:pointer;
}
/* The number in the middle */
.pick-actions .qty .qty-val{
min-width:10px;
text-align:center;
font-size:18px;
font-weight:400;
line-height:40px; /* centers vertically */
}
/* ===== PC CONFIGURATOR — RECAP (final tidy layout) ===================== */
/* Do not edit earlier blocks; this one wins via “placed at end” + !important */
#pc-configurator .recap{
padding:16px 18px 20px !important; /* remove the big left gutter */
}
#pc-configurator .recap__title{ /* title aligns with rows */
margin-left: 0 !important;
padding: 0 18px !important;
}
#pc-configurator .recap-list{ padding:0 !important; margin:0 !important; }
#pc-configurator .recap-list .recap-row:first-child{ border-top:0 !important; }
/* ----- LEFT (icon rail + title) */
#pc-configurator .recap-left{
grid-column: 1 / 3 !important; /* spans icon rail + title column */
display:flex !important;
align-items:center !important;
gap:10px !important; /* title closer to the check tag */
min-width:0 !important; /* allow ellipsis */
}
#pc-configurator .recap-img{ width:32px; height:32px; object-fit:contain; }
#pc-configurator .recap-title{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
line-height:1.28 !important;
font-weight:600 !important;
}
/* ✅ Draw a compact green check for product rows only */
#pc-configurator .recap-list .recap-row[data-key]::before{
content:"";
width:12px;height:7px;
border:2px solid #008a00; border-top:0;border-left:0;
transform:rotate(45deg);
justify-self:center; align-self:center;
}
/* Keep the same left start for subtotal/discount/total (no icon, just spacer) */
#pc-configurator .recap-subtotal::before,
#pc-configurator .recap-discount::before,
#pc-configurator .recap-total::before{
content:""; /* empty spacer in the 28px rail */
}
#pc-configurator .recap-price{
display:flex !important;
flex-direction:column !important; /* was above now */
align-items:flex-end !important;
text-align:right !important;
min-width:170px !important; /* shared width → same right edge */
}
#pc-configurator .recap-price .was{
margin:0 0 2px 0 !important;
color:#94a3b8 !important;
text-decoration:line-through !important;
}
#pc-configurator .recap-price .now{
color:#10b5cf !important;
font-weight:700 !important;
}
/* Subtotal & Discount use same columns: label at left, amount at the shared right edge */
#pc-configurator .recap-subtotal > *:nth-child(2),
#pc-configurator .recap-discount > *:nth-child(2){
grid-column: 2 / 3 !important; /* titles align with product titles */
font-weight:700 !important;
}
#pc-configurator .recap-subtotal > *:last-child,
#pc-configurator .recap-discount > *:last-child{
grid-column: 3 / 4 !important; /* amount sits in the price column */
justify-self:end !important;
min-width:170px !important; /* same right edge */
text-align:right !important;
}
/* Total line: left label aligned; big number on the same right edge as prices */
#pc-configurator .recap-total{
padding-top:18px !important;
padding-bottom:18px !important;
}
#pc-configurator .recap-total > span{ grid-column:2 / 3 !important; }
#pc-configurator .recap-total > strong{
grid-column:3 / 4 !important;
justify-self:end !important;
min-width:170px !important;
text-align:right !important;
}
/* Responsive guards */
@media (max-width: 1024px){
#pc-configurator .recap-list .recap-row,
#pc-configurator .recap-subtotal,
#pc-configurator .recap-discount,
#pc-configurator .recap-total{
grid-template-columns: 28px 1fr minmax(150px,auto) auto !important;
}
}
@media (max-width: 768px){
#pc-configurator .recap-list .recap-row,
#pc-configurator .recap-subtotal,
#pc-configurator .recap-discount,
#pc-configurator .recap-total{
grid-template-columns: 28px 1fr minmax(130px,auto) auto !important;
}
}
/* --- Fix: keep “Sous-total” on one line in recap --- */
#pc-configurator .recap-subtotal > *:first-child,
#pc-configurator .recap-discount > *:first-child {
white-space: nowrap !important; /* no wrapping at the hyphen */
overflow-wrap: normal !important; /* don’t allow soft-wrap */
word-break: keep-all !important; /* keep words together */
}
/* (optional) if you want a tiny bit more room before prices */
#pc-configurator .recap-list .recap-price,
#pc-configurator .recap-row.recap-subtotal .recap-right,
#pc-configurator .recap-row.recap-discount .recap-right {
min-width: 160px !important; /* already used; keeps right edge aligned */
}
/* ====================================================================== */
/* Title block spans icon+title columns; allow wrapping and truncation */
#pc-configurator .recap-left {
grid-column: 1 / 3 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important; /* lets the text shrink before pushing */
}
#pc-configurator .recap-title {
white-space: normal !important; /* wrap to 2+ lines if needed */
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.3 !important;
}
/* Price block keeps a fixed minimum width so all prices align vertically */
#pc-configurator .recap-price {
min-width: 180px !important;
text-align: right !important;
}
/* Subtotal / Discount rows use the exact same grid and alignment */
#pc-configurator .recap-subtotal > div:first-child,
#pc-configurator .recap-discount > div:first-child {
/* aligns with product titles */
font-weight: 500;
}
#pc-configurator .recap-subtotal > div:last-child,
#pc-configurator .recap-discount > div:last-child {
grid-column: 3 / 4 !important; /* aligns with product prices */
text-align: right !important;
white-space: nowrap;
}
/* Total number keeps the same right edge as prices */
#pc-configurator .recap-total {
display: grid !important;
grid-template-columns: 28px 1fr minmax(180px, auto) !important;
align-items: center !important;
column-gap: 12px !important;
padding: 18px 0px !important;
}
#pc-configurator .recap-total > span { grid-column: 1 / 3 !important; }
#pc-configurator .recap-total > strong {
grid-column: 3 / 4 !important;
justify-self: end !important;
min-width: 180px !important;
text-align: right !important;
}
/* Small screens – keep the same logic but relax the min-width a bit */
@media (max-width: 840px) {
#pc-configurator .recap-row,
#pc-configurator .recap-subtotal,
#pc-configurator .recap-discount,
#pc-configurator .recap-total {
grid-template-columns: 26px 1fr minmax(150px, auto) !important;
}
#pc-configurator .recap-price { min-width: 150px !important; }
}
#pc-configurator .recap-price.only {
color:#10b5cf; font-weight:500;
}
/* Product titles wrap on 2 lines max without overlapping */
#pc-configurator .recap-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal !important;
line-height: 1.4;
max-width: 100%;
}
/* Prices: keep light blue but unify font size/weight */
#pc-configurator .recap-price {
display: flex !important;
align-items: flex-end;
justify-content: flex-end;
min-width: 140px !important;
text-align: right !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #10b5cf !important;
}
/* Remove extra "was" look (no strikethrough, no margin) */
#pc-configurator .recap-price .was {
text-decoration: none !important;
margin: 0 !important;
color: #10b5cf !important;
}
/* Right block (price + RETIRER) tidy alignment */
#pc-configurator .recap-right {
display: flex !important;
gap: 10px !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap;
}
/* Titles closer to price but not overlapping */
#pc-configurator .recap-price {
min-width: 120px !important; /* was 140–160px, reduced */
}
/* Kill any theme-provided pseudo content to avoid duplicates */
#pc-configurator .recap-right .recap-x::before,
#pc-configurator .recap-right .recap-x::after {
content: none !important;
}
/* Optional hover feedback */
#pc-configurator .recap-right .recap-x:hover { opacity: .85; }
/* Titles slightly closer to price but never overlapping */
#pc-configurator .recap-left { gap: 10px !important; }
#pc-configurator .recap-price {
min-width: 120px !important; /* shared right column; tighten a bit */
text-align: right;
white-space: nowrap;
}
/* Hide the in-box recap H2 to avoid double titles */
#pc-configurator .recap__title{ display: none; }
/* Right-column title (outside the box) — same size as left */
#pc-configurator .pc-right::before{
content: "RÉCAPITULATIF";
display: block;
text-align: center;
color: var(--ts-blue);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .02em;
/* use the SAME size formula as your COMPOSANTS h2 */
font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 25px));
line-height: 1.1;
margin: 10px 0 21px; /* same spacing as left */
}
/* Make sure the blue recap panel doesn’t add extra space above */
#pc-configurator .recap{ margin-top: 0; padding-top: 18px; }
/* ==== TITLES EQUALIZER — match .h2 sizing ==== */
#pc-configurator{
--pc-title-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 25px));
--pc-title-lh: 1.5;
}
/* Left: COMPOSANTS + PÉRIPHÉRIQUES */
#pc-configurator .pc-left h1,
#pc-configurator .pc-left h2,
#pc-configurator .pc-section-title{
font-size: var(--pc-title-size) !important;
line-height: var(--pc-title-lh) !important;
font-weight: 600;
text-transform: uppercase;
color: var(--ts-blue);
text-align: center;
margin: 10px 0 18px;
}
/* Right: RÉCAPITULATIF (outside the box) */
#pc-configurator .pc-right::before{
content: "RÉCAPITULATIF";
display: block;
font-size: var(--pc-title-size) !important;
line-height: var(--pc-title-lh) !important;
font-weight: 600;
text-transform: uppercase;
color: var(--ts-blue);
text-align: center;
margin: 10px 0 18px;
}
/* Hide in-box fallback to avoid duplicate */
#pc-configurator #recap-title{ display: none !important; }
/* Keep top edges aligned */
#pc-configurator .recap{ padding-top: 0 !important; margin-top: 0 !important; }
#pc-configurator .pc-left .pc-tile:first-child{ margin-top: 0 !important; }
#pc-configurator .recap{ margin-top: -2px !important; } /* try -2 / 0 / +2 */
/* === RECAP — single source of truth for layout + RETIRER === */
/* Row layout: [icon] [title] [price] [RETIRER] */
#pc-configurator .recap-list > .recap-row{
display: grid;
grid-template-columns: 28px 1fr minmax(170px,auto) auto;
align-items: center;
column-gap: 12px;
padding: 14px 18px;
border-top: 1px solid #e7edf6;
}
/* Right block (price + RETIRER) */
#pc-configurator .recap-right{
grid-column: 3 / 5;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
white-space: nowrap;
text-align: right;
}
/* RETIRER — recap ONLY (no underline, medium weight) */
#pc-configurator .recap .recap-x,
#pc-configurator .recap .recap-remove,
#pc-configurator .recap [data-action="remove"],
#pc-configurator .recap .bundle-summary__remove,
#pc-configurator .recap .bb-summary__remove,
#pc-configurator .recap .bb-summary__delete,
#pc-configurator .recap .remove,
#pc-configurator .recap .bundle-builder--remove-from-bundle-form button{
all: unset;
display: inline-block;
cursor: pointer;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #677279 !important;
}
/* Force the label to be “RETIRER” even if the theme uses × or empty */
#pc-configurator .recap .bundle-summary__remove::after,
#pc-configurator .recap .bb-summary__remove::after,
#pc-configurator .recap .bb-summary__delete::after,
#pc-configurator .recap .remove::after,
#pc-configurator .recap .bundle-builder--remove-from-bundle-form button::after{
content: "RETIRER";
}
/* Hover tone only (no underline) */
#pc-configurator .recap .recap-x:hover,
#pc-configurator .recap [data-action="remove"]:hover,
#pc-configurator .recap .bundle-summary__remove:hover,
#pc-configurator .recap .bb-summary__remove:hover,
#pc-configurator .recap .bb-summary__delete:hover,
#pc-configurator .recap .remove:hover{
text-decoration: none !important;
color: var(--ts-blue-500) !important;
}
/* Configurator modal stock line */
#pc-modal .pc-card__stock{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--product-in-stock-color);
font-weight:var(--text-font-bolder-weight);
line-height:1.2;
}
/* Thicker green dot */
#pc-modal .pc-card__stock .dot{
width:10px;
height:10px;
border-radius:50%;
background:var(--product-in-stock-color);
display:inline-block;
}
/* MODAL: unify stock color + keep the dot same color as the text */
:root { --pc-stock-green: #008a00; } /* change once if you want a different green */
#pc-modal .pc-card__stock{
color: var(--pc-stock-green) !important;
font-weight: 600;
line-height: 1.2;
}
#pc-modal .pc-card__stock .dot{
width: 10px; /* make the bullet a bit thicker */
height: 10px;
border-radius: 50%;
background: currentColor !important; /* dot follows text color */
display: inline-block;
}
/* === Consistent site fonts on the builder === */
#pc-configurator,
#pc-configurator .pc-modal,
#pc-configurator * {
font-family: var(--text-font-family, Montserrat, sans-serif);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#pc-configurator h1,
#pc-configurator h2,
#pc-configurator h3,
#pc-configurator .pc-title,
#pc-configurator .pc-tile__title {
font-family: var(--heading-font-family, Montserrat, sans-serif);
font-weight: var(--heading-font-weight, 700);
}
/* === Empty recap styling (matches site’s empty state) === */
#recap-list .recap-empty{
display:flex;
align-items:center;
gap:16px;
padding:22px 20px;
border-radius:12px;
background: var(--el-fill-color-light, #f5f7fa);
color: var(--text-color, #677279);
}
#recap-list .recap-empty__icon{
display:grid; place-items:center;
width:96px; height:72px; /* proportions look good with your card height */
color: var(--heading-color, #002fc4);
}
#recap-list .recap-empty__icon svg{
width:100%; height:100%; display:block;
}
#recap-list .recap-empty__text{
font-size: clamp(14px, 1.8vw, 16px);
font-weight: 600;
}
/* === Tile icon placement/sizing in headers === */
.pc-tile .pc-tile__ico{
display:inline-grid;
place-items:center;
width:36px; height:36px;
margin-right:12px;
color: var(--heading-color, #002fc4);
flex: 0 0 auto;
}
.pc-tile .pc-tile__ico svg{
width:100%; height:100%;
display:block;
}
/* ===== PC Configurator — visual tweaks ===== */
#pc-configurator {
font-family: var(--text-font-family, Montserrat, sans-serif);
}
/* Tile icon we inject (left of titles) */
#pc-configurator .pc-tile__ico svg {
width: 28px; height: 28px;
margin-right: 14px;
color: var(--heading-color, #002fc4);
flex: 0 0 28px;
}
/* Hide the little blue “CPU / GPU / RAM …” squares in tile headers */
#pc-configurator .pc-tile__head .pc-code,
#pc-configurator .pc-tile__head .pc-badge,
#pc-configurator .pc-tile__head .pc-label,
#pc-configurator .pc-tile__head .pc-chip {
display: none !important;
}
/* Empty recap state */
#recap.is-empty #recap-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 240px;
padding: 24px 12px;
text-align: center;
gap: 12px;
}
/* Hide everything after the list (rows, totals, buttons) when empty */
#recap.is-empty #recap-list ~ * {
display: none !important;
}
/* Empty icon size + color */
#recap.is-empty .recap-empty__icon .icon {
width: 112px; height: 112px;
color: var(--border-color, #6b7a90);
}
@media (max-width: 768px) {
#recap.is-empty .recap-empty__icon .icon { width: 104px; height: 104px; }
}
#pc-configurator .pc-tile__left{ display:flex; align-items:center; gap:2px; }
#pc-configurator .pc-tile__title{ margin:0 !important; }
/* When empty, hide everything in #recap except the list */
#recap.is-empty > *:not(#recap-list){ display:none !important; }
/* Center the empty state horizontally: [icon] [text] */
#recap.is-empty #recap-list{
display:flex; align-items:center; justify-content:center;
min-height:220px; padding:28px 8px;
}
#recap.is-empty .recap-empty{ display:flex; align-items:center; gap:16px; }
#recap.is-empty .recap-empty__icon .icon{ width:112px; height:112px; color:#6b7a90; }
@media (max-width:768px){
#recap.is-empty .recap-empty__icon .icon{ width:104px; height:104px; }
}
#recap.is-empty .recap-empty__text{ font-weight:600; color:#677279; }
/* =========================
Recap — EMPTY STATE
========================= */
#pc-configurator #recap.is-empty .recap-list{
display:flex;
align-items:center;
justify-content:center;
min-height: 220px; /* keeps it tall enough */
padding: 28px 12px;
}
/* the empty block: icon + text side by side */
#pc-configurator #recap.is-empty .recap-empty{
display:flex;
align-items:center;
gap: 18px;
background: none !important; /* remove translucent panel */
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* hide the green check that our generic recap rule adds */
#pc-configurator #recap.is-empty .recap-list > *:first-child::before{
content:none !important;
}
#pc-configurator #recap.is-empty .recap-empty > :first-child{
padding-left: 0 !important; /* cancel left offset from generic rule */
}
/* icon box (desktop) */
#pc-configurator #recap.is-empty .recap-empty__icon{
width:112px; height:112px;
display:grid; place-items:center;
color:#6b7a90; /* grey; SVG uses currentColor */
}
#pc-configurator #recap.is-empty .recap-empty__icon > svg{
width:100%; height:100%;
}
/* text to the right of the box */
#pc-configurator #recap.is-empty .recap-empty__text{
font-weight:400;
font-size: clamp(12px, 1.6vw, 14px);
color:#6b7a90;
white-space: nowrap;
}
/* when empty, hide totals/cta if any happen to be present */
#pc-configurator #recap.is-empty :is(.recap-row, .recap-total, .recap-discount, .recap-cta, .btn-orange){
display:none !important;
}
/* mobile sizes for the icon box */
@media (max-width: 767px){
#pc-configurator #recap.is-empty .recap-empty__icon{
width:104px; height:104px;
}
#pc-configurator #recap.is-empty .recap-empty__text{
font-size: 14px;
}
}
/* Kill the green check ONLY when recap is empty */
#pc-configurator #recap.is-empty .recap-list > .recap-empty > :first-child::before{
content: none !important;
display: none !important;
}
/* And undo the padding that rule adds to make room for the check */
#pc-configurator #recap.is-empty .recap-list > .recap-empty > :first-child{
padding-left: 0 !important;
}
/* PC Configurator: icon color system */
.icon--component-icon .heading-color{ fill: var(--heading-color, currentColor); stroke: none; }
.icon--component-icon .accent-color { fill: var(--accent-color, currentColor); stroke: none; }
/* Stroke-only variants for peripherals (no fills) */
.icon--component-icon .heading-stroke,
.icon--component-icon .accent-stroke{
fill: none;
stroke-width: 2.2;
stroke-linecap: butt;
stroke-linejoin: miter;
}
.icon--component-icon .heading-stroke{ stroke: var(--heading-color, currentColor); }
.icon--component-icon .accent-stroke { stroke: var(--accent-color, currentColor); }
/* PC Configurator — normalize stroke-only icons */
.icon--component-icon .heading-stroke,
.icon--component-icon .accent-stroke{
fill: none;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-width: var(--pc-icon-stroke, 1.1); /* tweak 1.4–1.8 to taste */
vector-effect: non-scaling-stroke; /* keep thickness when scaled */
}
.icon--component-icon .heading-stroke{ stroke: var(--heading-color, currentColor); }
.icon--component-icon .accent-stroke { stroke: var(--accent-color, currentColor); }
/* --- Stroke-only icons for peripherals (no accidental fills) --- */
.pc-tile__ico .icon--stroke .heading-color,
.pc-tile__ico .icon--stroke .accent-color {
fill: none !important;
stroke: currentColor !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* Unify stroke thickness (looks right with your design scale) */
.pc-tile__ico .icon--stroke * { stroke-width: 1.8 !important; }
/* Make all tile icons visually consistent in size */
.pc-tile__ico svg.icon { width: 28px; height: 28px; display: block; }
/* Recap: title text smaller & responsive */
#pc-configurator .recap-title{
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
white-space: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
@media (min-width: 768px){
#pc-configurator .recap-title{ font-size: 13px !important; }
}
/* Recap totals (Sous-total / Remise) aligned left like the rows above */
#pc-configurator .recap-sums,
#pc-configurator .recap-sums .recap-line{
display: flex !important;
justify-content: flex-start !important;
text-align: left !important;
}
#pc-configurator .recap-sums .recap-line .label{
min-width: 140px; /* keeps labels aligned; tweak if needed */
margin-right: .5rem;
}
/* ==== Recap alignment v4 (exact offsets + mobile price safe) ==== */
#pc-configurator .recap{
--check: 16px; /* size of the green check icon (adjust if needed) */
--pad-left: calc(10px + var(--check) + 5px); /* border→check 10px, check→title 5px */
--gap: 14px;
--price-col: 220px; /* desktop price column */
}
/* Product rows: [ title | price | RETIRER ] */
#pc-configurator .recap .recap-list > *{
display: grid !important;
grid-template-columns: 1fr var(--price-col) auto;
align-items: center;
column-gap: var(--gap);
padding-left: var(--pad-left) !important;
}
#pc-configurator .recap .recap-list > * > :nth-last-child(2){ /* price */
justify-self: end; text-align: left;
}
#pc-configurator .recap .recap-list > * > :first-child{
font-size: 14px; /* 2px smaller */
color: #6b7a90;
line-height: 1.35;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere; /* only breaks very long tokens */
hyphens: auto;
}
#pc-configurator .recap .recap-list > * > :last-child{ /* RETIRER */
white-space: nowrap; text-decoration: none !important;
}
/* Sous-total / Remise rows: [ label | amount ] */
#pc-configurator .recap .recap-row{
display: grid !important;
grid-template-columns: 1fr var(--price-col);
align-items: center;
column-gap: var(--gap);
padding: 12px 0 !important;
padding-left: var(--pad-left) !important;
background: transparent; border: 0; border-top: 0px solid #e7ecf4;
}
#pc-configurator .recap .recap-row > :first-child{ justify-self: start; }
#pc-configurator .recap .recap-row > :last-child { justify-self: end; text-align: right; }
/* Total row aligned to same columns */
#pc-configurator .recap .recap-total{
display: grid !important;
grid-template-columns: 1fr var(--price-col);
align-items: center;
column-gap: var(--gap);
padding-left: var(--pad-left) !important;
}
#pc-configurator .recap .recap-total > span{ justify-self: start; }
#pc-configurator .recap .recap-total > strong{ justify-self: end; text-align: right; }
/* Mobile: keep prices visible; RETIRER drops under price */
@media (max-width: 640px){
#pc-configurator .recap{ --price-col: auto; } /* let price size to its content */
#pc-configurator .recap .recap-list > *{
grid-template-columns: 1fr auto !important; /* title | price */
padding-left: var(--pad-left) !important; /* keep exact left offsets */
}
#pc-configurator .recap .recap-list > * > :last-child{ /* RETIRER */
grid-column: 1 / -1; justify-self: end; margin-top: 4px;
}
#pc-configurator .recap .recap-row,
#pc-configurator .recap .recap-total{
grid-template-columns: 1fr auto !important; /* label | amount */
}
}
/* Optional: if your check icon uses a ::before, nudge it closer to the border */
#pc-configurator .recap .recap-item__title::before{ left: 10px !important; width: var(--check); height: var(--check); }
/* === Force SAME left start for products, subtotal, discount, total === */
#pc-configurator .recap-list > * > :first-child,
#pc-configurator .recap-row > :first-child,
#pc-configurator .recap-total > span {
position: relative;
padding-left: 0px !important;
}
#pc-configurator .recap-list > * > :first-child::before,
#pc-configurator .recap-row > :first-child::before,
#pc-configurator .recap-total > span::before {
content: "";
position: absolute;
left: -25px; /* same gutter as products */
top: .15em; /* anchor to first text line */
transform: none; /* remove vertical centering */
width: 20px; height: 20px;
}
/* icons — only products get the green check */
#pc-configurator .recap-list > * > :first-child::before {
background: #14a44d;
border-radius: 50%;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.54 4.8 12.8l1.4-1.4 3.35 3.35 7.25-7.25 1.4 1.4z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
/* subtotal, discount, total: reserve same space, no icon */
#pc-configurator .recap-subtotal > :first-child::before,
#pc-configurator .recap-discount > :first-child::before,
#pc-configurator .recap-total > span::before {
background: transparent;
}
/* HOTFIX: recap titles wrap from the start, not mid-line */
#pc-configurator .recap-item__title{
text-indent: 0 !important;
padding-left: 28px !important; /* room for the check icon */
line-height: 1.35;
word-break: break-word;
}
/* Tile icons (SVG inline) */
.pc-ico.usb{
width:22px;height:22px; display:inline-block;
background: no-repeat center / contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23012FC3' d='M10 3h4v4h2v6h-2v4h-4v-4H8V7h2V3Z'/%3E%3Crect width='10' height='4' x='7' y='17' rx='1' fill='%23012FC3'/%3E%3C/svg%3E");
}
.pc-ico.fan{
width:22px;height:22px; display:inline-block;
background: no-repeat center / contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23012FC3' d='M12 7a5 5 0 1 1-4 8.66A5 5 0 1 1 12 7Zm0-2a7 7 0 1 0 0 14a7 7 0 0 0 0-14Z'/%3E%3Cpath fill='%23012FC3' d='M12 2l1.2 3.6L17 7l-3.6 1.2L12 12l-1.2-3.8L7 7l3.8-1.4L12 2Z' opacity='.25'/%3E%3C/svg%3E");
}
/* If the theme already adds a star somewhere, kill it */
.pc-tile.is-required .pc-tile__head::after { content: none !important; }
/* never show a right-side pseudo star */
.pc-tile.is-required .pc-tile__right::before {
content: none !important;
background: none !important;
width: 0 !important;
margin: 0 !important;
}
/* --- Uniform required star using your SVG shape (CPU / MB / RAM / CASE) --- */
.pc-tile[data-key="cpu"] .pc-tile__title .pc-t,
.pc-tile[data-key="motherboard"] .pc-tile__title .pc-t,
.pc-tile[data-key="ram"] .pc-tile__title .pc-t,
.pc-tile[data-key="case"] .pc-tile__title .pc-t { position: relative; }
.pc-tile[data-key="cpu"] .pc-tile__title .pc-t::after,
.pc-tile[data-key="motherboard"] .pc-tile__title .pc-t::after,
.pc-tile[data-key="ram"] .pc-tile__title .pc-t::after,
.pc-tile[data-key="case"] .pc-tile__title .pc-t::after {
/* size + spacing (tweak to taste) */
--req-size: 14px; /* star size */
--req-gap: 6px; /* distance from label */
content: "";
display: inline-block;
width: var(--req-size);
height: var(--req-size);
margin-left: var(--req-gap);
vertical-align: baseline; /* keeps it aligned with text */
transform: translateY(-1px); /* nudge for optical centering */
/* color comes from this background */
background-color: var(--pc-accent, #FF6F0B);
/* use your polygon as a mask so we can tint with background-color */
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* kill any old right-side stars, if the theme injects them */
.pc-tile .pc-req-star { display: none !important; }
/* optional: if you still have * in Liquid, hide it */
.pc-tile .pc-tile__title .req { display: none !important; }
/* Colors (your palette) */
:root {
--pc-blue: #002fc4; /* primary */
--pc-cyan: #00badb; /* accent */
}
/* Scope to peripherals only */
.pc-tile .icon--periph {
width: 28px; height: 28px; /* same box as composants */
display: inline-block;
}
/* Uniform stroke look */
.pc-tile .icon--periph * {
vector-effect: non-scaling-stroke;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Slightly thinner lines (≈ -1px vs typical 2px) */
.pc-tile .icon--periph .heading-color,
.pc-tile .icon--periph .accent-color {
fill: none;
stroke-width: 1.5;
}
/* Two-blues theme */
.pc-tile .icon--periph .heading-color { stroke: var(--pc-blue); }
.pc-tile .icon--periph .accent-color { stroke: var(--pc-cyan); }
/* If an icon uses tiny dots/rects with fill, keep consistency */
.pc-tile .icon--periph .accent-fill { fill: var(--pc-cyan); stroke: none; }
/* -------- PC Configurator — Cart v1 -------- */
.pc-bundle-banner{
margin: 8px 0 0;
padding: 10px 12px;
background: #f0fff4;
border: 1px solid #b7f5c9;
border-radius: 10px;
font-weight: 600;
}
.pc-bundle-head td,
.pc-bundle-foot td{ padding: 0; border: 0; }
.pc-bundle__head{
display:flex; align-items:center; justify-content:space-between;
padding:12px 16px; margin:10px 0 6px;
background: var(--pc-bundle-bg, #F6F7FB);
border:1px solid var(--color-border, #E5E7EB);
border-radius:12px;
}
.pc-bundle__title{ font-weight:700; letter-spacing:.01em; }
.pc-bundle__remove{
appearance:none; background:transparent; border:0; cursor:pointer;
color: var(--color-accent, #D12D2D);
font-weight:700;
}
.pc-bundle__remove:hover{ text-decoration: underline; }
.pc-bundle__remove[disabled]{ opacity:.6; cursor: not-allowed; }
tr.line-item[data-bid] td{
border-left: 3px solid var(--color-accent, #5B7AFF);
}
.pc-bundle__foot{
margin: 0 0 12px; padding:10px 14px;
background: var(--pc-bundle-bg, #F6F7FB);
border:1px dashed var(--color-border, #E5E7EB);
border-radius:10px;
color: var(--color-text-subdued, #555);
font-size: .92rem;
}
@media (max-width: 749px){
.pc-bundle__head, .pc-bundle__foot{ padding:10px 12px; }
.pc-bundle-banner{ font-size:.92rem; }
}
.pc-bundle-banner{
margin:12px 0; padding:10px 12px;
border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc;
}
.pc-bundle__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pc-bundle__title{ font-weight:700; }
.pc-bundle__remove{ color:#ef4444; background:none; border:0; cursor:pointer; text-decoration:underline; }
.pc2-hint{font-size:.875rem;opacity:.85;margin-top:.25rem}
.pc2-pill{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:.05rem .4rem;margin-right:.35rem;font-size:.75rem}
.pc-bundle-banner{background:#f5fff7;border:1px solid #ccebd6;color:#18794e;padding:.6rem .8rem;border-radius:.5rem;margin:.5rem 0}
.pc-bundle__head{display:flex;justify-content:space-between;align-items:center}
.pc-bundle__remove{background:none;border:0;color:#d12a2a;cursor:pointer}
.cart-alert--error{background:#fff5f5;border:1px solid #ffd5d5;color:#a40000;border-radius:.5rem;padding:.5rem .75rem;margin-top:.5rem}
@media (max-width: 768px) {
.pc-modal__filters {
display: none;
}
.pc-modal.is-filters-open .pc-modal__filters {
display: block;
}
}
/* --- Mobile filter toggle button --- */
.pc-filter-toggle{
display:inline-flex; align-items:center; gap:.5rem;
padding:.55rem 1rem; border-radius:999px;
background:#1e3d8f; color:#fff; font-weight:700; border:0; cursor:pointer;
}
.pc-filter-toggle .pc-caret{ display:inline-block; transition:transform .2s ease; }
/* Collapsible wrapper: hidden by [hidden]; we animate via height */
#pc-filter-wrap{ overflow:hidden; transition:height .25s ease; }
/* Desktop: hide the toggle; keep filters visible and unlocked */
@media (min-width: 992px){
.pc-filter-toggle{ display:none; }
#pc-filter-wrap{ display:block !important; height:auto !important; }
}
/* When open on mobile, rotate caret */
.pc-modal.is-filters-open .pc-filter-toggle .pc-caret{ transform:rotate(180deg); }
/* Filter wrapper is collapsed by default on mobile */
#pc-filter-wrap {
overflow: hidden;
height: 0;
transition: height .26s ease;
}
/* Desktop: keep filters always visible (no animation there) */
@media (min-width: 992px) {
#pc-filter-wrap {
height: auto !important;
overflow: visible;
}
}
/* Let the modal body scroll so nothing gets cut off at the bottom */
.pc-modal__content {
max-height: 90vh; /* or 92–94vh if you prefer */
overflow: auto; /* scroll the inside, not the page behind */
padding-bottom: 16px; /* tiny breathing room for the last row */
}
/* Space below the title */
.pc-modal__title {
margin-bottom: 12px;
}
/* Space between the filter controls */
.pc-filters, .pc-modal__filters {
display: grid;
gap: 12px; /* vertical AND horizontal gap */
}
/* On desktop, make it a row with gaps */
@media (min-width: 992px) {
.pc-filters, .pc-modal__filters {
grid-template-columns: 1fr 220px 220px auto; /* Search | Brand | Sort | Clear */
align-items: end;
}
}
/* spacing between title and filters */
#pc-filter-wrap { margin-top: 10px; }
/* ensure the product list is the scroller on mobile */
@media (max-width: 991.98px) {
#pc-modal .pc-modal__dialog {
display: flex;
flex-direction: column;
max-height: 100svh;
overflow: hidden;
}
#pc-modal-grid {
flex: 1 1 auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-top: 12px;
}
}
/* small bottom breathing room on all sizes so content isn’t “cut” */
#pc-modal-grid { padding-bottom: 16px; }
/* spacing between title and filters */
#pc-filter-wrap { margin-top: 10px; }
#pc-filter-wrap label { display: grid; gap: 6px; margin-bottom: 12px; }
/* make the product grid the scroller on mobile,
so clicking FILTRER reveals the filters */
@media (max-width: 991.98px) {
#pc-modal .pc-modal__dialog {
display: flex;
flex-direction: column;
max-height: 100svh;
overflow: hidden;
}
#pc-modal-grid {
flex: 1 1 auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-top: 12px;
}
}
/* a little breathing room at the bottom (desktop & mobile) */
#pc-modal-grid { padding-bottom: 16px; }
/* --- Filters visibility + spacing --- */
/* Desktop: filters always shown, toggle hidden */
@media (min-width: 992px){
#pc-filter-wrap{ display:block !important; max-height:none !important; }
#pc-filter-toggle{ display:none; }
}
/* Mobile: closed by default; open when .is-filters-open is on the modal */
@media (max-width: 991.98px){
#pc-filter-wrap{
display:none;
margin-top:12px; /* spacing under the title */
}
.pc-modal.is-filters-open #pc-filter-wrap{
display:block;
}
/* Make the dialog the scroller so filters stay visible at top */
#pc-modal .pc-modal__dialog{
max-height:100svh;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
}
/* Comfortable spacing inside the filter area */
#pc-filter-wrap label{ display:grid; gap:6px; margin-bottom:12px; }
#pc-modal-grid{ padding-bottom:16px; }
/* put Filtrer next to the title with spacing */
#pc-modal .pc-modal__head {
display: flex;
align-items: center;
justify-content: space-between; /* keeps the X on the far right */
}
/* if your title and filter sit together on the left, use a gap */
#pc-modal .pc-modal__title {
display: inline-flex;
align-items: center;
gap: .5rem; /* space between “PROCESSEUR” and “Filtrer” */
}
#pc-filter-toggle {
margin-left: .5rem; /* fallback spacing */
padding: 2px 8px;
border-radius: 6px;
background: #eef2f7;
font-weight: 600;
cursor: pointer;
}
#pc-filter-toggle:hover { text-decoration: underline; }
/* Keep filters fully hidden when collapsed */
#pc-filter-wrap[hidden]{ display:none !important; }
#pc-filter-wrap{ border:0; overscroll-behavior: contain; }
/* Desktop: hide “Appliquer” */
@media (min-width:992px){
#pc-filter-apply{ display:none !important; }
}
/* Mobile layout quality-of-life */
@media (max-width:991px){
#pc-filter-wrap { display:flex !important; flex-direction:column !important; margin-bottom:10px; }
#pc-filter-wrap .button--secondary,
#pc-filter-apply { height:48px; }
}
/* Optional: tidy “Refroidissement” row on desktop */
@media (min-width:1200px){
#pc-modal.is-cooling .pc-modal__filters{
display:grid !important;
grid-template-columns: 1.5fr 1fr 1fr 1fr auto !important; /* Search | Brand | Price | Type | Clear */
gap:12px !important;
align-items:end;
}
#pc-modal.is-cooling #modal-clear{ white-space:nowrap; }
}
/* ---------- Montage choice card ---------- */
.montage-choice{
margin:14px 0 12px;
padding:12px;
border:1px solid #e6e7eb;
border-radius:10px;
background:#fafbff;
}
.montage-choice__head{ display:flex; gap:8px; align-items:center; font-weight:600; margin-bottom:10px; }
.montage-choice__ico{ font-size:18px; line-height:1; }
.montage-choice__options{ display:flex; gap:8px; flex-wrap:wrap; }
.montage-choice .pill{
position:relative; display:inline-flex; align-items:center;
border:1px solid #d8dbe4; border-radius:999px; padding:6px 12px;
cursor:pointer; user-select:none; transition:box-shadow .15s, border-color .15s;
}
.montage-choice .pill:hover{ border-color:#c6cad6; }
.montage-choice .pill input{ position:absolute; inset:0; opacity:0; }
.montage-choice .pill span{ font-size:14px; }
.montage-choice .pill input:checked + span{ font-weight:600; }
.montage-choice .pill input:checked ~ *{ text-shadow:0 0 .01px rgba(0,0,0,.1); }
.montage-choice .pill:has(input:checked){
border-color:#1c64f2; box-shadow:0 0 0 3px rgba(28,100,242,.12);
}
/* hint + status */
.montage-choice__hint{ margin-top:4px; font-size:13px; color:#b91c1c; }
.add-status{ margin-top:4px; font-size:13px; color:#374151; min-height:1em; }
/* Show the montage hint block only when recap has items */
#pc-configurator .recap #montage-block{ display:none; }
#pc-configurator .recap:not(.is-empty) #montage-block{ display:block; }
/* Optional shake */
.montage-choice.shake{ animation:pc-shake .35s; }
@keyframes pc-shake{
10%{transform:translateX(-3px)}20%{transform:translateX(3px)}
30%{transform:translateX(-2px)}40%{transform:translateX(2px)}
}
/* ---------- SAFER scoping for “hide old montage UI” ---------- */
#pc-configurator #montage-check,
#pc-configurator [name="montage-check"],
#pc-configurator [name="pc-montage"],
#pc-configurator label[for="montage-check"],
#pc-configurator .pc-footer .montage,
#pc-configurator .montage-row { display:none !important; }
/* ---------- Montage icon (single, non-duplicated) ---------- */
.pc-ico.montage{
width:28px; height:28px;
display:inline-flex; align-items:center; justify-content:center;
color:var(--pc-ico-color, var(--pc-accent, #012FC3));
background:none; border-radius:0;
}
.pc-ico.montage svg{ width:22px; height:22px; display:block; }
.pc-ico.montage svg path{ fill:currentColor; }
/* ---------- Uniform required star across ALL tiles ---------- */
.pc-tile .pc-tile__title .req{
display:inline-flex; align-items:center; margin-left:6px; color:#FF6F0B;
}
.pc-tile .pc-tile__title .req .icon--asterisk{ width:14px; height:14px; }
/* Force the Montage asterisk to render like all others */
.pc-tile[data-key="montage"] .pc-tile__title .req{
display:inline-flex; /* make the container take size */
align-items:center;
margin-left:6px;
color:#FF6F0B; /* same orange */
}
/* size the SVG if JS injected the star, or any icon inside req */
.pc-tile[data-key="montage"] .pc-tile__title .req svg{
width:14px;
height:14px;
display:block;
}
/* Force the Montage asterisk to render like others */
.pc-tile[data-key="montage"] .pc-tile__title .req{
display:inline-flex !important;
align-items:center;
margin-left:6px;
color:#FF6F0B; /* same orange */
}
.pc-tile[data-key="montage"] .pc-tile__title .req .icon--asterisk{
width:14px;
height:14px;
display:block;
}
@media (max-width: 991px){
#pc-filter-wrap #modal-clear,
#pc-filter-wrap #pc-filter-apply{
display:inline-flex; align-items:center; justify-content:center;
width:calc(50% - 6px); height:48px;
}
#pc-filter-wrap #modal-clear{ margin-right:12px; }
}
/* Mobile filter action buttons: equal size */
@media (max-width: 991px){
#pc-filter-wrap #modal-clear,
#pc-filter-wrap #pc-filter-apply{
display:inline-flex;
align-items:center;
justify-content:center;
width:calc(50% - 6px);
height:48px;
line-height:48px; /* keeps text vertically centered in some themes */
border-radius:8px;
font-weight:600;
}
#pc-filter-wrap #modal-clear{ margin-right:12px; }
/* Primary style for Appliquer */
#pc-filter-wrap #pc-filter-apply{
background:#FF6F0B; /* pick your site’s orange if different */
border-color:#FF6F0B;
color:#fff;
}
#pc-filter-wrap #pc-filter-apply:hover{ filter:brightness(.95); }
#pc-filter-wrap #pc-filter-apply:active{ transform:translateY(1px); }
}
/* Brand color (already used elsewhere) */
:root { --pc-orange:#FF6F0B; }
/* brand blue (adjust if you like) */
:root{
--pc-blue: #012FC3; /* site blue */
--pc-blue-100: #F2F6FF; /* very light */
--pc-blue-200: #E0E7FF; /* light border */
}
/* ---- brand hues (keep if you already have them) ---- */
:root{
--pc-blue: #012FC3;
--pc-blue-100: #F2F6FF;
--pc-blue-200: #E0E7FF;
}
/* ---- DESKTOP: never show the mobile filter toggle ---- */
@media (min-width: 992px){
#pc-filter-toggle{ display:none !important; }
}
/* ---- brand hues (keep if you already have them) ---- */
:root{
--pc-blue: #012FC3;
--pc-blue-100: #F2F6FF;
--pc-blue-200: #E0E7FF;
}
/* ---- DESKTOP: never show the mobile filter toggle ---- */
@media (min-width: 992px){
#pc-filter-toggle{ display:none !important; }
}
/* ---- MOBILE header: smaller title, no underline, pill on the left ---- */
@media (max-width: 991px){
/* your theme may use .pc-modal__head or .pc-modal__header – target both */
#pc-modal .pc-modal__head,
#pc-modal .pc-modal__header{
position: relative;
padding-left: 15px; /* room for the pill; tweak if needed */
border-bottom: 0 !important; /* remove the faint line */
box-shadow: none !important;
}
#pc-modal-title{
font-size: 14px !important;
line-height: 1.15;
margin: 0;
font-weight: 800;
letter-spacing: .2px;
text-align: center;
}
#pc-filter-toggle{
position: absolute;
left: 0px; /* align with modal padding */
top: 50%;
transform: translateY(-50%);
z-index: 2;
max-width: 42vw; /* keep it from running under the title */
white-space: nowrap;
}
}
/* ---- ONE canonical definition for the pill ---- */
#pc-filter-toggle{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 4px;
border: 1px solid var(--pc-blue-200);
border-radius: 1px; /* square-ish corners */
background: var(--pc-blue-100);
color: var(--pc-blue);
font-size: 13px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
#pc-filter-toggle:hover{ border-color:#cbd6ff; }
/* chevron: down when closed, up when open */
#pc-filter-toggle::after{
content:"";
width:10px; height:10px;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
transition: transform .18s ease;
}
#pc-filter-toggle[aria-expanded="true"]::after,
html:has(#pc-modal #pc-filter-wrap:not([hidden])) #pc-filter-toggle::after{
transform: rotate(180deg);
}
/* ===== Cart: shipping line under the H1 ===== */
.pc-cart-ship{
margin: 6px 0 0;
display: flex; align-items: center; gap: 8px;
font-size: 16px; line-height: 1.4;
color: #667085; /* subtle grey like theme body copy */
}
.pc-cart-ship .truck{ font-size: 18px; transform: translateY(1px); }
/* ===== Cart: PC bundle banner (with ✅) ===== */
.pc-bundle-banner{
margin: 10px auto 18px;
padding: 10px 12px;
background: #F2F6FF; /* very light brand blue */
border: 1px solid #E0E7FF;
border-radius: 1px; /* you asked for 1px corners */
color: #012FC3; /* site blue */
font-weight: 600;
}
/* ===== Cart: bundle header row (title + remove link) ===== */
.pc-bundle-head td{ padding: 0; border: 0; }
.pc-bundle__head{
margin: 12px 0 6px;
padding: 12px 16px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
background: #F8FAFF;
border: 1px solid #E0E7FF;
border-radius: 1px;
}
.pc-bundle__title{
font-weight: 800;
letter-spacing: .2px;
color: #012FC3; /* heading blue */
font-size: 18px; /* looks like your h5/h6 scale */
}
.pc-bundle__remove{
appearance: none; border: 0; background: transparent; padding: 0;
color: #FF6A00; /* your orange accent */
font-weight: 700;
text-decoration: underline;
cursor: pointer; line-height: 1;
}
.pc-bundle__remove:hover{ opacity: .85; }
.pc-bundle__remove:disabled{ opacity: .45; cursor: not-allowed; }
/* Foot note under a bundle (optional – you already output .pc-bundle__foot) */
.pc-bundle-foot .pc-bundle__foot{
padding: 8px 16px 0; color: #64748b; font-size: 14px;
}
/* Small screens: keep things readable */
@media (max-width: 740px){
.pc-bundle__title{ font-size: 16px; }
.pc-bundle__head{ padding: 10px 12px; }
}
/* --- PC configurator pick row: mobile layout --- */
@media (max-width: 600px){
#pc-configurator .pick-line{
display: grid;
grid-template-columns: 56px 1fr; /* image | content */
column-gap: 12px;
align-items: center;
}
#pc-configurator .pick-line > img{
grid-column: 1;
grid-row: 1 / span 2; /* image spans both rows */
}
#pc-configurator .pick-info{
grid-column: 2;
min-width: 0; /* let text shrink instead of overflow */
}
#pc-configurator .pick-actions{
grid-column: 2; /* sit under the text */
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 3px;
flex-wrap: wrap;
}
#pc-configurator .pick-actions .qty{
order: -1; /* qty first on the second row */
min-width: 100px;
}
#pc-configurator .pick-actions .pick-edit,
#pc-configurator .pick-actions .pick-remove{
padding: 6px 10px;
font-size: 12px;
}
}
@media (max-width:600px){
#pc-configurator .pick-actions{
justify-content: flex-start; /* align left */
}
#pc-configurator .pick-actions .pick-edit{
margin-left: 50px; /* small gap from the qty box */
}
}
/* === RECAP: layout + scrollbar safety === */
#pc-configurator .recap{
display:flex;
flex-direction:column;
/* Keep recap within viewport (tweak 220px if your header/footer changes) */
max-height: calc(100vh - 220px);
}
#pc-configurator #recap-list{
overflow:auto;
/* Fallback height (~5 rows) for older browsers */
max-height: 320px;
/* Make room for overlay scrollbars so text/icons (RETIRER) never sit under it */
padding-right: 20px;
-webkit-overflow-scrolling: touch; /* smooth on iOS */
}
@supports (max-height: min(360px, 40vh)){
#pc-configurator #recap-list{
max-height: min(360px, 40vh); /* nicer on laptops */
}
}
/* If the browser supports a real scrollbar gutter, use it and remove the padding */
@supports (scrollbar-gutter: stable){
#pc-configurator #recap-list{
scrollbar-gutter: stable; /* or 'stable both-edges' if you prefer */
padding-right: 0;
}
}
/* Sticky CTA stays visible and clearly separated from the list */
#pc-configurator .recap .actions{
position: sticky;
bottom: 0;
background: var(--ts-panel, #fff);
padding-top: 8px;
z-index: 1; /* sit above list items */
box-shadow: 0 -6px 12px rgba(0,0,0,.04); /* subtle divider */
}
/* Image paint stability (prevents jumpiness while images load) */
.pc-card__img{ width:160px; height:160px; margin:0 auto; }
.pc-card__img img{
width:100%; height:100%;
object-fit:contain; display:block; background:#fff;
}
/* === Make "Rechercher…" look like the other controls === */
/* Same height & box frame */
#pc-modal .pc-modal__filters #modal-search{
height: var(--ctrl-h, 40px);
line-height: var(--ctrl-h, 40px);
width: 100%;
box-sizing: border-box;
padding: 0 12px;
background: #fff;
border: 1px solid var(--pc-border, #dce1e8);
border-radius: 6px;
outline: none;
}
/* Match placeholder + focus visuals */
#pc-modal #modal-search::placeholder{ color:#8a94a6; }
#pc-modal #modal-search:focus{
border-color: var(--pc-accent, #1d4ed8);
box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
/* Keep all filter controls aligned & same height */
#pc-modal .pc-modal__filters select{
height: var(--ctrl-h, 40px);
}
#pc-modal .pc-modal__filters > *{
align-self: end;
}
/* Remove Safari’s default search decorations so it looks clean */
#pc-modal #modal-search::-webkit-search-decoration,
#pc-modal #modal-search::-webkit-search-cancel-button{
-webkit-appearance: none;
}
/* Search field same frame as other filters */
#pc-modal .pc-modal__filters #modal-search{
height: var(--ctrl-h, 40px);
line-height: var(--ctrl-h, 40px);
width: 100%;
box-sizing: border-box;
padding: 0 12px;
background: #fff;
border: 1px solid var(--pc-border, #dce1e8);
border-radius: 6px;
outline: none;
}
#pc-modal #modal-search::placeholder{ color:#8a94a6; }
#pc-modal #modal-search:focus{
border-color: var(--pc-accent, #1d4ed8);
box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
/* Keep selects the same height */
#pc-modal .pc-modal__filters select{ height: var(--ctrl-h, 40px); }
#pc-modal .pc-modal__filters > *{ align-self: end; }
#pc-modal #modal-search::-webkit-search-decoration,
#pc-modal #modal-search::-webkit-search-cancel-button{ -webkit-appearance: none; }