/* Ochre embed widget styling — shared by shop.html and the homepage buy modal.

   The embed library injects its own stylesheet at runtime. Because that
   lands after any <link> or <style> in the document head, it wins every
   equal-specificity contest, and its defaults are a light theme built on
   floats with black text and hairline black borders.

   Every rule here is therefore scoped under .panel (product lists) or
   .cart-dock (the basket), so the extra class outranks the library's
   single-class selectors without !important. !important is reserved for
   the two rules that must beat an inline style set by the library.

   The host page supplies .panel / .cart-dock positioning and the font.
*/

/* ══════════════════════════════════════════════════════════
   Ochre widget styling.

   The embed library INJECTS ITS OWN STYLESHEET at runtime, and
   because it lands after this one in the document it wins every
   equal-specificity contest. Its defaults are a light theme built on
   floats (.ochre-product-*-wrapper are float:left; width:50%) with
   black text and hairline black borders — all wrong over the shader.

   So every rule below is deliberately scoped under .panel or
   .cart-dock. That extra class outranks the library's single-class
   selectors without needing !important, which is reserved here for
   the two cases that must beat an inline style.
   ══════════════════════════════════════════════════════════ */

.panel .ochre-product-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.panel li.ochre-product {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.95rem 0;
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.panel .ochre-product-list li:first-child { border-top: none; }
.panel li.ochre-product:last-child { border-bottom: none; }

/* The library's clearfix would become a stray flex item */
.panel .ochre-product-list li::after { display: none; }

/* Undo the library's float/50% grid so flex controls the row */
.panel .ochre-product-format-wrapper {
  float: none;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.panel .ochre-product-format {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* The library prints "Released: 13.8.2026" in dd.mm.yyyy, which both reads
   as the wrong date to a US audience and duplicates the release line we
   write ourselves. Hidden; the "pre-order" flag is kept. */
.panel .ochre-product-release-date { display: none; }

.panel .ochre-product-preorder-flag {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  opacity: 0.75;
  margin-right: 0;
}

/* The library leaves .ochre-product-variant empty and renders only the
   format name — which makes the two vinyl variants of a release read as
   an identical "Vinyl" at different prices. These fill in the difference.
   Collapsed by default so uncaptioned rows (MP3, WAV) don't reserve a
   blank line. :empty can't do this job — the captions are ::after
   content, which leaves the span itself empty either way. */
.panel .ochre-product-variant {
  display: none;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  opacity: 0.72;
}

/* The library gives every variant span a `content: "\a "` newline;
   the per-product rules below replace it with a real caption. */
#ochre-product-201989153 .ochre-product-variant,
#ochre-product-201989152 .ochre-product-variant,
#ochre-product-201369620 .ochre-product-variant,
#ochre-product-201369624 .ochre-product-variant,
#ochre-product-201298031 .ochre-product-variant,
#ochre-product-201298032 .ochre-product-variant { display: block; }

#ochre-product-201989153 .ochre-product-variant::after { content: "Rose of Jericho Glow — limited, store exclusive"; }
#ochre-product-201989152 .ochre-product-variant::after { content: "Black vinyl"; }
#ochre-product-201369620 .ochre-product-variant::after { content: "Oxblood"; }
#ochre-product-201369624 .ochre-product-variant::after { content: "Black vinyl"; }
#ochre-product-201298031 .ochre-product-variant::after { content: "Black vinyl"; }
#ochre-product-201298032 .ochre-product-variant::after { content: "Crystal Waters Green"; }

.panel .ochre-product-price-wrapper {
  float: none;
  width: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

.panel .ochre-product-price {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin-right: 0;
  opacity: 0.95;
  white-space: nowrap;
}

.panel a.ochre-buy-button {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  white-space: nowrap;
  padding: 0.4rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s;
}

.panel a.ochre-buy-button:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.85);
}

/* Sold out: the library keeps the same <a> but adds
   .ochre-buy-button-disabled and swaps the label to "Out of stock".
   Both classes sit on one element, so this needs to outrank
   `.panel a.ochre-buy-button` (0,0,2,1) — hence both classes here. */
.panel a.ochre-buy-button.ochre-buy-button-disabled {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;   /* it's an href="#" that would jump to the top */
}

.panel li.ochre-product:has(a.ochre-buy-button-disabled) { opacity: 0.6; }

/* One "powered by Ochre" credit is fine; four is noise. Hidden per-list,
   reinstated once in the page footer. */
.panel .ochre-products-store-name { display: none; }

/* The library injects the toggle and the panel inside our placeholder,
   so the placeholder — not .cart-dock — is the real flex parent. It has
   to span the dock's full width, otherwise it shrink-wraps to the toggle
   pill and the panel's width:100% collapses to match it.
   The library also sets Helvetica + a 40px bottom margin here. */
.cart-dock .ochre-cart-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  font: inherit;
  margin-bottom: 0;
}

.cart-dock a.ochre-cart-toggle {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 100px;
  background: rgba(38, 18, 42, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s;
}

.cart-dock a.ochre-cart-toggle:hover { background: rgba(38, 18, 42, 0.62); }

.cart-dock .ochre-cart-count {
  min-width: 1.35em;
  margin-left: 0.3rem;
  padding: 0 0.32em;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.92);
  color: #4a2144;
  font-size: 0.82rem;
  text-align: center;
}

/* The library positions this absolutely (top:20px; left:0) against the
   container it made relative. Static keeps it in our flex column instead. */
.cart-dock .ochre-cart {
  position: static;
  width: 100%;
  margin-top: 0;
  background-color: rgba(34, 16, 38, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  padding: 1rem 1.1rem;
  box-shadow: 0 16px 50px rgba(30, 14, 34, 0.5);
  font-size: 0.95rem;
}

/* The library drives this panel with an INLINE style, toggling
   display:table (open) / display:none (closed) from the basket link.
   Inline beats a normal stylesheet rule, so `table` would otherwise
   reshape our panel into a table box. Hidden by default, forced back
   to block whenever the library has opened it. */
.cart-dock .ochre-cart { display: none; }
.cart-dock .ochre-cart[style*="table"] { display: block !important; }

/* Nothing in the basket → stay collapsed even if toggled open.
   Author !important is the one thing that outranks an inline style. */
.cart-dock .ochre-cart:has(.ochre-cart-list:empty) { display: none !important; }

.cart-dock .ochre-cart-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
}

.cart-dock .ochre-cart-table th {
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  padding: 0 0 0.4rem 0;
}

/* Library default is a black bottom hairline — invisible on a dark panel */
.cart-dock .ochre-cart-table td {
  padding: 0.5rem 0.4rem 0.5rem 0;
  border-bottom: none;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  vertical-align: middle;
}

.cart-dock .ochre-cart-table tr:first-child td {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.cart-dock .ochre-cart-table td:first-child { padding-left: 0; }
.cart-dock .ochre-cart-table td:last-child  { padding-right: 0; }

.cart-dock .ochre-cart-artist { opacity: 0.7; }
.cart-dock .ochre-cart-format { opacity: 0.8; font-size: 0.9rem; }
.cart-dock .ochre-cart-price  { white-space: nowrap; text-align: right; }

.cart-dock input.ochre-cart-quantity {
  width: 3.2rem;
  padding: 0.22rem 0.35rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.cart-dock a.ochre-cart-delete-button {
  color: #fff;
  opacity: 0.6;
  font-size: 0.85rem;
  text-transform: lowercase;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.cart-dock a.ochre-cart-delete-button:hover { opacity: 1; }

.cart-dock .ochre-cart-total-wrapper {
  padding-top: 0.75rem;
  font-size: 1.05rem;
}

.cart-dock .ochre-cart-shipping-message {
  font-size: 0.85rem;
  opacity: 0.65;
  margin-left: 0.3rem;
}

.cart-dock a.ochre-checkout-button {
  display: block;
  margin-top: 0.85rem;
  padding: 0.6rem 1rem;
  text-align: center;
  color: #40173c;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid transparent;
  border-radius: 100px;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  transition: background 0.2s;
}

.cart-dock a.ochre-checkout-button:hover { background: #fff; }

/* Checkout completes on the Ochre store, so say so rather than surprise people */
.cart-dock .ochre-cart-store-name {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  opacity: 0.6;
  text-align: center;
}

.cart-dock .ochre-cart-empty-message { margin: 0; opacity: 0.7; }

.cart-dock .ochre-cart-store-name a,
.panel .ochre-products-store-name a { color: #fff; }

.cart-dock .ochre-cart iframe.cart-check-if { display: none; }