[data-ourobor-look] .op-price-row { align-items: end; }
[data-ourobor-look] .ol-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
[data-ourobor-look] .ol-price s { color: #969692; font-size: 13px; font-weight: 400; }
[data-ourobor-look] .ol-saving { font: 9px/1.3 "IBM Plex Mono", monospace; letter-spacing: .12em; color: #72726e; }
[data-ourobor-look] .op-description { white-space: pre-line; }
[data-ourobor-look] .ol-preorder .op-preorder-head { align-items: flex-start; flex-wrap: wrap; }
[data-ourobor-look] .ol-preorder [data-op-preorder-date] { white-space: nowrap; }
[data-ourobor-look] .ol-component-options .ol-preorder { margin: 2px 0 0; }

[data-ourobor-look] .op-config,
[data-ourobor-look] .op-quantity-row,
[data-ourobor-look] .op-details { display: none; }

.ol-components { margin-top: 24px; border-top: 1px solid var(--op-line, #d8d8d2); }
.ol-look-preorder-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 14px; margin: -1px 0 0; padding: 14px 16px; border: 1px solid #111; background: rgba(17,17,17,.94); color: #fff; }
.ol-look-preorder-notice span { font: 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .13em; }
.ol-look-preorder-notice strong { overflow: hidden; font: 500 12px/1.2 Arial, sans-serif; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ol-look-preorder-notice small { grid-column: 1 / -1; color: rgba(255,255,255,.64); font: 7px/1.35 "IBM Plex Mono", monospace; letter-spacing: .1em; }
.ol-components-head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font: 9px/1.2 "IBM Plex Mono", monospace; letter-spacing: .13em; color: #777773; }
.ol-component { border-top: 1px solid var(--op-line, #d8d8d2); }
.ol-component:first-of-type { border-top: 0; }
.ol-component-summary { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; min-height: 108px; padding: 12px 0; cursor: pointer; list-style: none; }
.ol-component-summary::-webkit-details-marker { display: none; }
.ol-component-summary:focus-visible { outline: 1px solid #111; outline-offset: 3px; }
.ol-component-thumb { display: block; width: 68px; height: 84px; border: 1px solid var(--op-line, #d8d8d2); background: #f2f1ec; overflow: hidden; }
.ol-component-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ol-component-copy { min-width: 0; }
.ol-component-index { display: block; margin-bottom: 6px; font: 8px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; color: #969692; }
.ol-component-title { display: block; overflow: hidden; color: inherit; font: 500 15px/1.1 Arial, sans-serif; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ol-component-preorder-colors { display: block; width: fit-content; max-width: 100%; margin-top: 7px; overflow: hidden; color: #111; font: 7px/1.2 "IBM Plex Mono", monospace; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ol-component-selection { display: block; margin-top: 7px; font: 8px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; color: #969692; }
.ol-component-price { display: grid; justify-items: stretch; gap: 7px; min-width: 128px; white-space: nowrap; }
.ol-component-price-row { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: space-between; gap: 10px; }
.ol-component-price-row small { font: 7px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; color: #969692; }
.ol-component-price-row s { color: #969692; font: 400 11px/1 Arial, sans-serif; }
.ol-component-price-row strong { color: #111; font: 500 15px/1 Arial, sans-serif; }
.ol-component-price > small { justify-self: end; font: 8px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; color: #969692; }
.ol-component-toggle { position: relative; display: block; width: 18px; height: 18px; }
.ol-component-toggle::before,
.ol-component-toggle::after { content: ""; position: absolute; left: 2px; top: 8px; width: 14px; height: 1px; background: #111; transition: transform .25s ease; }
.ol-component-toggle::after { transform: rotate(90deg); }
.ol-component[open] .ol-component-toggle::after { transform: rotate(0deg); }
.ol-component-body { padding: 2px 0 18px 82px; }
.ol-component-description { margin: 0 0 16px; font-size: 12px; line-height: 1.55; white-space: pre-line; color: #30302e; }
.ol-component-options { display: grid; gap: 8px; margin-bottom: 15px; }
.ol-component-options label { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; font: 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .11em; color: #777773; }
.ol-component-options select { width: 100%; height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--op-line, #d8d8d2); border-radius: 0; background: #f7f6f1; color: #111; font: 10px/1 Arial, sans-serif; appearance: auto; }
.ol-color-option { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 40px; }
.ol-option-label { font: 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .11em; color: #777773; }
.ol-option-label small { display: block; margin-top: 5px; color: #111; font: inherit; }
.ol-color-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-height: 32px; }
.ol-color-choice { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; }
.ol-color-choice.is-preorder { margin-right: 4px; }
.ol-color-swatch { position: relative; width: 25px; height: 25px; padding: 0; border: 1px solid #c9c9c3; border-radius: 50%; background: var(--ol-swatch, #111); cursor: pointer; box-shadow: inset 0 0 0 2px #f7f6f1; }
.ol-color-swatch::after { content: ""; position: absolute; inset: -4px; border: 1px solid transparent; border-radius: 50%; transition: border-color .18s ease; }
.ol-color-swatch:hover::after,
.ol-color-swatch:focus-visible::after,
.ol-color-swatch.is-active::after { border-color: #111; }
.ol-color-swatch:focus-visible { outline: 0; }
.ol-color-preorder-mark { color: #111; font: 7px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ol-component-details { margin: 0 -0px; border-top: 1px solid var(--op-line, #d8d8d2); }
.ol-component-details details { border-bottom: 1px solid var(--op-line, #d8d8d2); }
.ol-component-details summary { position: relative; padding: 13px 26px 13px 0; cursor: pointer; list-style: none; font: 9px/1.2 "IBM Plex Mono", monospace; letter-spacing: .11em; }
.ol-component-details summary::-webkit-details-marker { display: none; }
.ol-component-details summary::after { content: "+"; position: absolute; right: 2px; top: 11px; font-size: 16px; font-weight: 300; }
.ol-component-details details[open] summary::after { content: "−"; }
.ol-component-detail { padding: 0 0 16px; font-size: 11px; line-height: 1.55; white-space: pre-line; color: #555550; }
.ol-size-guide { display: block; width: 100%; margin-top: 12px; padding: 0; border: 1px solid var(--op-line, #d8d8d2); background: #f2f1ec; cursor: zoom-in; }
.ol-size-guide img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.ol-size-guide span { display: block; padding: 10px; border-top: 1px solid var(--op-line, #d8d8d2); font: 8px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; }
.ol-component-link { display: block; padding: 14px 0 0; color: #111; font: 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .11em; text-decoration: none; }
.ol-component-link:hover { text-decoration: underline; text-underline-offset: 4px; }
[data-ourobor-look] .op-buy { margin-top: 24px; }
[data-ourobor-look] .op-cart-status { min-height: 20px; }

[data-ourobor-look] .op-gallery .op-media { background: #f2f1ec; }
[data-ourobor-look] .op-gallery .op-media img { object-fit: contain; }
[data-ourobor-look] .op-life-card img { object-fit: cover; }
.or-review-product { display: inline-block; margin: 5px 0 10px; color: #777773; font: 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .12em; text-decoration: none; }
[data-ourobor-look] .op-related-media { position: relative; }
[data-ourobor-look] .op-related-preorder { position: absolute; z-index: 2; left: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; padding: 7px 8px; background: rgba(17,17,17,.88); color: #fff; font: 7px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

@media (max-width: 760px) {
  [data-ourobor-look] .op-panel-inner { padding-bottom: 24px; }
  [data-ourobor-look] .ol-preorder .op-preorder-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ol-components { margin-top: 20px; }
  .ol-look-preorder-notice { grid-template-columns: 1fr; gap: 6px; padding: 13px 14px; }
  .ol-look-preorder-notice strong { font-size: 11px; white-space: normal; }
  .ol-look-preorder-notice small { grid-column: auto; }
  .ol-component-summary { grid-template-columns: 60px minmax(0, 1fr) auto 18px; gap: 10px; min-height: 94px; padding: 10px 0; }
  .ol-component-thumb { width: 60px; height: 74px; }
  .ol-component-title { font-size: 13px; }
  .ol-component-price { min-width: 112px; gap: 6px; }
  .ol-component-price-row { gap: 7px; }
  .ol-component-price-row small { font-size: 6px; }
  .ol-component-price-row strong { font-size: 13px; }
  .ol-component-body { padding: 4px 0 17px; }
  .ol-component-description { font-size: 12px; }
  .ol-component-options label { grid-template-columns: 76px minmax(0, 1fr); }
  .ol-color-option { grid-template-columns: 76px minmax(0, 1fr); }
  [data-ourobor-look] .op-mobile-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 1.35fr);
  }
  [data-ourobor-look] .op-mobile-buy {
    width: 100%;
    justify-self: end;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  [data-ourobor-look] .op-mobile-bar {
    grid-template-columns: minmax(0, 1fr) 170px;
  }
}
