/* Multi-combination picker — matches the store's minimal black/white look */
.tcpm-form { margin: 0 0 24px; }
.tcpm { --tcpm-ink: #111; --tcpm-line: #e3e3e3; --tcpm-soft: #f7f7f7; font-size: 14px; }

.tcpm-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.tcpm-title { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #555; }
.tcpm-hint { font-size: 13px; color: #777; }

.tcpm-grid { border: 1px solid var(--tcpm-line); border-radius: 6px; overflow: hidden; }
.tcpm-row { display: grid; grid-template-columns: minmax(110px, 1.1fr) repeat(2, 1fr); align-items: stretch; border-top: 1px solid var(--tcpm-line); }
.tcpm-grid--single .tcpm-row { grid-template-columns: minmax(110px, 1.1fr) 1fr; }
.tcpm-row:first-child { border-top: 0; }
.tcpm-row--head { background: var(--tcpm-soft); }
.tcpm-row--head > span { padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.tcpm-rowlabel { padding: 12px; font-weight: 600; color: var(--tcpm-ink); display: flex; align-items: center; line-height: 1.3; }
.tcpm-row--head .tcpm-rowlabel { font-weight: 600; }

.tcpm-cell { border-left: 1px solid var(--tcpm-line); padding: 12px; display: flex; align-items: center; min-height: 48px; transition: background .15s; }
.tcpm-cell--na { color: #bbb; align-items: center; }
.tcpm-cell.is-selected { background: #f3f3f3; box-shadow: inset 3px 0 0 var(--tcpm-ink); }
.tcpm-cell--out { opacity: .5; }

.tcpm-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; flex-wrap: wrap; }
.tcpm-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tcpm-box { width: 18px; height: 18px; flex: 0 0 18px; border: 1.5px solid #999; border-radius: 3px; position: relative; background: #fff; transition: all .15s; }
.tcpm-check:checked + .tcpm-box { background: var(--tcpm-ink); border-color: var(--tcpm-ink); }
.tcpm-check:checked + .tcpm-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tcpm-check:focus-visible + .tcpm-box { outline: 2px solid var(--tcpm-ink); outline-offset: 2px; }
.tcpm-cellname { display: none; font-size: 12px; color: #666; }
.tcpm-price { font-weight: 600; color: var(--tcpm-ink); white-space: nowrap; }

.tcpm-stepper { display: inline-flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; width: max-content; background: #fff; }
.tcpm-stepper button { width: 28px; height: 28px; border: 0; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: var(--tcpm-ink); padding: 0; }
.tcpm-stepper button:hover { background: var(--tcpm-soft); }
.tcpm-lq { min-width: 26px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.tcpm-summary { margin-top: 16px; border: 1px solid var(--tcpm-line); border-radius: 6px; padding: 14px 16px; background: #fff; }
.tcpm-summary-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #555; margin-bottom: 8px; }
.tcpm-lines { list-style: none; margin: 0; padding: 0; }
.tcpm-lines li { display: grid; grid-template-columns: 1fr auto minmax(78px, auto) 22px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--tcpm-line); }
.tcpm-line-name { line-height: 1.35; }
.tcpm-line-price { font-weight: 600; white-space: nowrap; text-align: right; }
.tcpm-remove { border: 0; background: transparent; color: #999; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.tcpm-remove:hover { color: var(--tcpm-ink); }
.tcpm-empty { margin: 4px 0; color: #888; font-size: 13px; }
.tcpm-empty[hidden] { display: none; }
.tcpm-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-weight: 700; font-size: 16px; color: var(--tcpm-ink); }

.tcpm-submit { width: 100%; margin-top: 14px; min-height: 50px; background: var(--tcpm-ink) !important; color: #fff !important; border: 0; border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.tcpm-submit:disabled { opacity: .35; cursor: not-allowed; }
.tcpm-submit.is-loading { opacity: .6; }

@media (max-width: 480px) {
    .tcpm-row { grid-template-columns: 92px repeat(2, 1fr); }
    .tcpm-rowlabel { padding: 10px 8px; font-size: 12.5px; }
    .tcpm-cell { padding: 10px 8px; }
    .tcpm-row--head > span { padding: 8px; font-size: 10px; letter-spacing: .04em; }
    .tcpm-price { font-size: 13px; }
}

@media (max-width: 480px) {
    .tcpm-lines li { grid-template-columns: 1fr auto 22px; grid-template-areas: "name name rm" "step price price"; row-gap: 6px; }
    .tcpm-line-name { grid-area: name; }
    .tcpm-lines .tcpm-stepper { grid-area: step; }
    .tcpm-line-price { grid-area: price; }
    .tcpm-remove { grid-area: rm; }
}

/* Desktop: freeze the shorter column while the other scrolls. The summary side is the theme's own
   fixed summary (top tuned in matrix.js); this lets a short gallery stay in view beside a long summary. */
@media (min-width: 1025px) {
    .single-product.--fixed-summary .rey-product .woocommerce-product-gallery {
        position: sticky;
        top: 40px;
        align-self: flex-start;
    }
}

/* ===== v1.5: designs + friendly format/size layer ===== */
.tcpm-grid--hidden{display:none!important}
.tcps{margin:0 0 22px}
.tcps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:12px}
.tcps-card{position:relative;display:flex;flex-direction:column;gap:6px;cursor:pointer;margin:0;user-select:none}
.tcps-check{position:absolute;opacity:0;pointer-events:none}
.tcps-img{display:block;aspect-ratio:4/5;background:#fff;border:2px solid #e6e6e6;border-radius:6px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.tcps-img img{width:100%;height:100%;object-fit:contain;display:block}
.tcps-card:hover .tcps-img{border-color:#bdbdbd}
.tcps-card.is-selected .tcps-img{border-color:#111;box-shadow:0 0 0 1px #111}
.tcps-name{font-size:13px;line-height:1.3;font-weight:500;text-align:center;color:#333}
.tcps-card.is-selected .tcps-name{font-weight:700;color:#111}
.tcps-tick{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid #bdbdbd;box-sizing:border-box}
.tcps-card.is-selected .tcps-tick{background:#111;border-color:#111}
.tcps-card.is-selected .tcps-tick::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tcps-check:focus-visible + .tcps-img{outline:2px solid #111;outline-offset:2px}
.tcps-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;font-size:13px}
.tcps-tools button{background:none;border:0;padding:0;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:#111}
.tcps-setlink{margin-left:auto;font-weight:600;color:#111;text-decoration:underline;text-underline-offset:3px}
.tcps-others{font-size:13px;color:#666;margin:10px 0 0}
.tcps-others a{color:#111;text-decoration:underline}
.tcps-setnote{font-size:14px;margin:6px 0 14px}
.tcps-setnote a{font-weight:600;text-decoration:underline}

.tcpx{display:flex;flex-direction:column;gap:20px;margin:0 0 18px}
.tcpx-step{display:flex;flex-direction:column;gap:10px}
.tcpx-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#111}
.tcpx-hint{font-size:13px;color:#777;margin-top:-6px}
.tcpx-formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tcpx-format{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px;border:1.5px solid #ddd;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;position:relative}
.tcpx-format:hover{border-color:#999}
.tcpx-format.is-active{border-color:#111;background:#fafafa;box-shadow:0 0 0 1px #111}
.tcpx-format-name{font-size:15px;font-weight:700;color:#111}
.tcpx-format-note{font-size:12.5px;line-height:1.4;color:#666}
.tcpx-format.has-picks::after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:#111}
.tcpx-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tcpx-size{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px 12px 14px;border:1.5px solid #ddd;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s}
.tcpx-size:hover{border-color:#999}
.tcpx-size.is-selected{border-color:#111;box-shadow:0 0 0 1px #111}
.tcpx-size:disabled{opacity:.45;cursor:not-allowed}
.tcpx-size-name{font-size:14px;font-weight:600;color:#111;padding-right:22px}
.tcpx-size-price{font-size:14px;color:#444}
.tcpx-size-tick{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:4px;border:1.5px solid #bbb;box-sizing:border-box}
.tcpx-size.is-selected .tcpx-size-tick{background:#111;border-color:#111}
.tcpx-size.is-selected .tcpx-size-tick::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tcpm-submit{width:100%}
@media (max-width:767px){
  .tcps-grid{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
  .tcps-card{flex:0 0 96px;scroll-snap-align:start}
  .tcpx-formats{grid-template-columns:1fr 1fr}
  .tcpx-format{padding:10px 12px}
  .tcpx-format-note{font-size:12px}
  .tcpx-sizes{grid-template-columns:1fr 1fr}
  .tcpm-submit{position:sticky;bottom:10px;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.18)}
}
/* beat the theme's button styles */
.tcpx .tcpx-format, .tcpx .tcpx-size{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;text-align:left!important;background:#fff!important;color:#111!important;border:1.5px solid #ddd!important;border-radius:8px!important;padding:12px 40px 12px 14px!important;min-height:0!important;height:auto!important;line-height:1.3!important;text-transform:none!important;letter-spacing:0!important;font-family:inherit!important;box-shadow:none!important;margin:0!important;width:100%!important}
.tcpx .tcpx-format:hover, .tcpx .tcpx-size:hover{border-color:#999!important}
.tcpx .tcpx-format.is-active, .tcpx .tcpx-size.is-selected{border-color:#111!important;box-shadow:0 0 0 1px #111!important;background:#fafafa!important}
.tcpx .tcpx-format-name{font-size:15px!important;font-weight:700!important;color:#111!important}
.tcpx .tcpx-format-note{font-size:12.5px!important;font-weight:400!important;color:#666!important;white-space:normal!important}
.tcpx .tcpx-size-name{font-size:14px!important;font-weight:600!important;color:#111!important;white-space:normal!important;padding:0!important}
.tcpx .tcpx-size-price{font-size:14px!important;font-weight:500!important;color:#444!important}
.tcpx .tcpx-size-tick{top:12px!important;right:12px!important}
.tcpx .tcpx-format.has-picks::after{top:12px;right:12px}
.tcps-tools button{background:none!important;border:0!important;padding:0!important;color:#111!important;box-shadow:none!important;min-height:0!important;height:auto!important;text-transform:none!important;letter-spacing:0!important;font-size:13px!important}