.cp{gap:var(--space-2);flex-direction:column;display:flex}.cp section{background:var(--color-surface);padding:var(--space-4)}.cp-gallery{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.cp-main{aspect-ratio:63/88;border-radius:var(--radius-md);background:var(--color-placeholder);width:min(240px,62vw);display:block;overflow:hidden}.cp-main img{object-fit:cover;width:100%;height:100%;display:block}.cp-placeholder{color:var(--color-muted);font-size:var(--text-sm);justify-content:center;align-items:center;display:flex}.cp-thumbs{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.cp-thumb{border-radius:var(--radius-sm);background:var(--color-placeholder);cursor:pointer;min-width:var(--touch);min-height:var(--touch);border:2px solid #0000;padding:0;display:flex;overflow:hidden}.cp-thumb[aria-pressed=true]{border-color:var(--color-brand)}.cp-thumb img{width:48px;height:auto;display:block}.cp-info{gap:var(--space-1);flex-direction:column;display:flex}.cp-info h1{font-size:var(--text-xl);margin:0;font-weight:600;line-height:1.3}.cp-badges{gap:6px;display:flex}.cp-badge{padding:2px var(--space-2);background:var(--color-brand-tint);color:var(--color-brand);border-radius:6px;font-size:12px}.cp-muted{color:var(--color-muted);font-size:var(--text-sm);margin:0}.cp-price{margin-top:var(--space-1);align-items:baseline;gap:var(--space-2);display:flex}.cp-now{font-size:var(--text-2xl);font-weight:600}.cp-sale{color:var(--color-sale)}.cp-was{color:var(--color-muted);text-decoration:line-through}.cp-off{background:var(--color-sale);color:var(--color-on-brand);border-radius:6px;padding:2px 6px;font-size:12px;font-weight:600}.cp-options{gap:var(--space-4);flex-direction:column;display:flex}.cp-options fieldset{gap:var(--space-2);border:0;flex-direction:column;margin:0;padding:0;display:flex}.cp-options legend{margin-bottom:var(--space-2);font-size:var(--text-sm);padding:0;font-weight:500}.cp-chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.cp-chip,.cp-tile{min-height:var(--touch);border-radius:var(--radius-sm);border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);cursor:pointer}.cp-chip{padding:0 var(--space-3);font-size:var(--text-sm)}.cp-chip[aria-pressed=true],.cp-tile[aria-pressed=true]{border:2px solid var(--color-brand);background:var(--color-brand-tint);color:var(--color-brand);font-weight:500}.cp-tiles{gap:var(--space-2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.cp-tile{min-height:56px;padding:var(--space-1);flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex}.cp-tile:disabled{background:var(--color-bg);color:var(--color-muted);cursor:not-allowed;border-style:dashed}.cp-tile-name{font-size:var(--text-base);font-weight:600}.cp-tile-sub{font-size:var(--text-xs);color:var(--color-muted)}.cp-notice{margin:0 0 var(--space-2);font-size:var(--text-sm);color:var(--color-brand);text-align:center}.cp-bar{z-index:10;padding:10px var(--space-4) calc(14px + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--color-border);flex-direction:column;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.cp-actions{gap:var(--space-2);width:100%;max-width:560px;display:flex}.cp-ask{height:48px;padding:0 var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-brand);flex:none;align-items:center;font-weight:600;text-decoration:none;display:flex}.cp-add{border-radius:var(--radius-md);background:var(--color-brand);width:100%;height:48px;color:var(--color-on-brand);cursor:pointer;border:0;flex:1;font-size:16px;font-weight:600}.cp-add:disabled{background:var(--color-chip);color:var(--color-muted);cursor:not-allowed}@media (width>=768px){.cp{grid-template-columns:340px minmax(0,1fr);align-items:start;display:grid}.cp section{border-radius:var(--radius-lg)}.cp-gallery{grid-row:span 3}}@media (width>=900px){.cp{column-gap:var(--space-4);grid-template-columns:420px minmax(0,1fr)}.cp-bar{padding:var(--space-4);border-radius:var(--radius-lg);border:0;grid-column:2;align-items:stretch;position:static}.cp-actions{max-width:none}.cp-notice{align-self:flex-start}}
