/*
   price.display.css
   ------------------
   Styles for the shared price-display markup emitted by:
     - includes/price.display.cfm  (server-side)
     - ajax/get.trade.prices.cfm   (async-patched into existing rows)
     - ajax/get.basket.suggestions.cfm  (initial card render)

   Was previously injected per-request from inside the include.
   Moved to its own file so async-rendered markup (e.g. the
   "you might also like" strip) inherits the styles without
   the include needing to fire server-side.
*/

/* The PDPs put the trade block inside a <form>; forms.css applies
   width:95% to form:not(.frm-add-to-basket) > div > div (specificity
   0,1,3) which beats our class selector. !important is the cleanest
   way to win the cascade without contorting the selector. */
.price-trade-block > div { width:auto !important; float:none !important; text-align:center !important; }

.price-trade-block       { margin:12px 0; text-align:center; }
.price-trade-badge       { display:inline-block; padding:3px 10px; background:#ff8f00; color:#fff; font-size:11px; font-weight:700; border-radius:3px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:16px; }
.price-trade-main        { font-size:30px; font-weight:700; color:#222; line-height:1.1; margin-bottom:6px; }
.price-trade-vat-note    { font-size:13px; font-weight:600; color:#666; margin-left:6px; }
.price-trade-vat-sub     { display:block; font-size:14px; font-weight:500; color:#666; margin-top:4px; }
.price-trade-rrp         { font-size:13px; color:#555; margin:16px 0; }
.price-trade-discount    { display:inline-block; padding:3px 10px; background:#2e7d32; color:#fff; font-size:12px; font-weight:700; border-radius:3px; text-transform:uppercase; letter-spacing:.3px; margin-top:4px; }
.price-unavailable       { font-style:italic; color:#777; }

.price-compact           { font-size:14px; }
.price-compact strong    { font-weight:700; color:#222; }
.price-compact-vat       { font-size:11px; color:#666; margin-left:4px; }
.price-compact-trade     { font-size:14px; }
.price-compact-trade strong { font-weight:700; color:#222; }
.price-compact-trade::before { content:"TRADE"; display:inline-block; padding:1px 5px; background:#ff8f00; color:#fff; font-size:9px; font-weight:700; border-radius:2px; margin-right:6px; letter-spacing:.3px; vertical-align:1px; }