/* ═══════════════════════════════════════════════════════════════════════════
   NELLO OLIVO × ORDERPORT — v2
   Not a recolour. This mirrors nelloolivo.com's actual design tokens, type
   scale and card treatment so the store reads as the same publication.
   Loaded from https://nelloolivo.com/op/skin.css — edit there, no OrderPort
   login required. Remove the File 2 entry in Scripts & Styles to revert.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Radley:ital@0;1&display=swap');

:root{
  --paper:#FDFCF9; --paper-2:#FFFFFF;
  --black:#000000; --black-2:#161616; --ink-3:#1D1B1A;
  --gold-lo:#D4B68E; --gold-hi:#8C6F47;
  --wine:#5C1526; --ember:#C2703A;
  --cream:#F2EAD9; --dim:#9C8E7C;
  --line:rgba(242,234,217,.15); --line-2:rgba(242,234,217,.30);
  --brand:"Radley",Georgia,serif;
  --label:"Montserrat",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --card:#FBF8F2; --card-ink:#1A1512;
}

/* ── the ground ───────────────────────────────────────────────────────────── */
html,body,form,.jqp{background:var(--black)!important;color:var(--cream)!important}
body{font-family:var(--label)!important;-webkit-font-smoothing:antialiased}

/* ── chrome ───────────────────────────────────────────────────────────────── */
.banner,.header-wrapper,.header-background,.header-inner,
.header-announcement-bar-wrapper,.footer-wrapper,.footer-inner{
  background:var(--black)!important}
.header-border{border-color:var(--line)!important}
.header-dropshadow{box-shadow:0 12px 34px rgba(0,0,0,.5)!important}

.header-nav-item a,.auth-item,.auth-item a{
  font-family:var(--label)!important;font-weight:500!important;font-size:12px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  color:var(--cream)!important;text-decoration:none!important;
  transition:color .3s var(--ease)!important}
.header-nav-item a:hover,.auth-item a:hover{color:var(--gold-lo)!important}
.header-nav-submenu{background:var(--black-2)!important;border:1px solid var(--line)!important}

/* ── the category rail: the site's own label treatment ────────────────────── */
.shop-left-menu,.shop-left-menu.same-height,.three-items-across-menu,
.product-search,.product-search-options{background:var(--black)!important}
html body .shop-left-menu a{
  font-family:var(--label)!important;font-weight:600!important;font-size:11.5px!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  color:#D8CCBA!important;padding:14px 18px!important;
  transition:color .3s var(--ease),background .3s var(--ease)!important}
.shop-left-menu a:hover{color:var(--gold-lo)!important}
html body .shop-left-menu .selected,html body .shop-left-menu .selected a{
  background:transparent!important;color:var(--gold-lo)!important;
  border-bottom:1px solid var(--gold-lo)!important}

/* ── search: a cream field on the dark ground, like the site's forms ─────── */
html body input.txt-product-search{
  background:rgba(242,234,217,.06)!important;color:var(--cream)!important;
  border:1px solid var(--line-2)!important;border-radius:0!important;
  font-family:var(--brand)!important;font-size:15px!important;padding:13px 16px!important;
  transition:border-color .3s var(--ease),background .3s var(--ease)!important}
html body input.txt-product-search::placeholder{color:var(--dim)!important}
html body input.txt-product-search:focus{background:rgba(242,234,217,.10)!important;
  border-color:var(--gold-lo)!important;outline:none!important}
/* the search sits with the page rather than spanning it end to end */
.product-search{max-width:620px!important;margin-left:auto!important;margin-right:auto!important}
html body .button-search-product{
  background:var(--wine)!important;border:1px solid var(--wine)!important;
  border-radius:0!important;color:var(--cream)!important}

/* ── product tiles: the site's sealed cream card, verbatim ────────────────── */
.productItem{
  background:var(--card)!important;color:var(--card-ink)!important;
  border:1px solid rgba(212,182,142,.22)!important;border-radius:2px!important;
  padding:clamp(16px,1.8vw,26px)!important;
  box-shadow:0 18px 44px -28px rgba(0,0,0,.9)!important;
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease)!important}
.productItem:hover{
  border-color:rgba(212,182,142,.55)!important;
  box-shadow:0 26px 60px -26px rgba(0,0,0,1)!important}
.pi-content,.prod-content,.prod-summary{background:transparent!important}

.prod-name,.prod-title,.prod-name a,.prod-title a{
  font-family:var(--brand)!important;font-weight:400!important;
  font-size:clamp(19px,1.5vw,23px)!important;line-height:1.25!important;
  color:var(--card-ink)!important;text-decoration:none!important;letter-spacing:.01em!important}
.prod-summary{font-family:var(--brand)!important;color:#5A5248!important;
  font-size:15px!important;line-height:1.65!important}

.price,.price-container .price{
  font-family:var(--brand)!important;font-weight:400!important;
  font-size:clamp(21px,1.7vw,26px)!important;color:var(--card-ink)!important}
.price-label,.qty-label,.subtotal{
  font-family:var(--label)!important;font-weight:600!important;font-size:10.5px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;color:#6A6055!important}

/* a hairline above the price, the way the site separates card sections */
.price-container{border-top:1px solid rgba(26,21,18,.14)!important;
  padding-top:14px!important;margin-top:14px!important}

/* ── buttons: the site's wine-red solid, same weight and tracking ─────────── */
html body .btn,html body a.btn,
html body .add-to-cart a,html body a[id*="lnkAddToCart"],
html body .cmd-container a,html body .cmd-container a.btn,
html body input[type="submit"],html body button[type="submit"],
html body input[type="button"][value*="ADD" i],html body .page-productdetails .btn,
html body .addToCart a,html body .addToCart input{
  font-family:var(--label)!important;font-weight:600!important;font-size:11.5px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  background:var(--wine)!important;color:var(--cream)!important;
  border:1px solid var(--wine)!important;border-radius:0!important;
  padding:14px 22px!important;
  box-shadow:0 1px 2px rgba(60,14,24,.28),0 8px 22px -10px rgba(60,14,24,.55)!important;
  transition:background .3s var(--ease),border-color .3s var(--ease)!important}
html body .btn:hover,html body a.btn:hover,
html body a[id*="lnkAddToCart"]:hover,html body .cmd-container a:hover,
html body input[type="submit"]:hover{background:#73203A!important;border-color:#73203A!important}

html body .qty-container input,html body .number input,html body input[type="number"]{
  background:var(--paper-2)!important;color:var(--card-ink)!important;
  border:1px solid rgba(26,21,18,.2)!important;border-radius:0!important;
  font-family:var(--label)!important;text-align:center!important}

/* ── loose copy on the dark ground ───────────────────────────────────────── */
h1,h2,h3{font-family:var(--brand)!important;font-weight:400!important;color:var(--cream)!important}
.footer-heading,.footer-section-title{
  font-family:var(--label)!important;font-weight:600!important;font-size:11px!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;color:var(--gold-lo)!important}
.footer-col,.footer-address,.footer-tagline{
  color:#C9BEAF!important;font-family:var(--brand)!important;line-height:1.7!important}
.footer-wrapper a{color:var(--gold-lo)!important;text-decoration:none!important}
.footer-wrapper a:hover{color:var(--cream)!important}

/* ── accessibility: visible focus everywhere, per the site's standard ─────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--gold-lo)!important;outline-offset:2px!important}


/* ── beyond the product grid ──────────────────────────────────────────────────
   The category page was the easy half. These are the screens a buyer actually
   passes through: the cart, sign-in, product detail and the popups. They carry
   the same treatment so the run from browsing to paying never changes voice. */

/* the sticky cart tab that floats at the right edge */
html body .cart-link,html body a[href="/basket"],html body .basket-tab{
  background:var(--wine)!important;border:1px solid var(--wine)!important;
  color:var(--cream)!important}

/* product detail: the single-wine page */
html body .product-details,html body .prod-detail,html body .productDetail{
  background:var(--card)!important;color:var(--card-ink)!important;
  border:1px solid rgba(212,182,142,.22)!important}
html body .product-details h1,html body .prod-detail h1{
  font-family:var(--brand)!important;color:var(--card-ink)!important;font-weight:400!important}
/* Notes sit on the dark ground inside a tab panel, so they read light.
   Measured 7.4:1 against black, comfortably past the 4.5:1 requirement. */
html body .tasting-notes,html body .wine-information,html body .wine-information td,
html body .ui-tabs-panel,html body .tabs-content{
  font-family:var(--brand)!important;color:#C9BEAF!important;
  background:transparent!important;line-height:1.75!important;font-size:15.5px!important}
/* except when they genuinely are on a cream card, where they flip back */
html body .productItem .tasting-notes,html body .card .tasting-notes{color:#5A5248!important}
/* the tab strip above them */
html body .ui-tabs-nav,html body .tabs-wrap .ui-tabs-nav{
  background:transparent!important;border:0!important;
  border-bottom:1px solid var(--line-2)!important}
html body .ui-tabs-nav li{background:transparent!important;border:0!important}
html body .ui-tabs-nav li a{
  font-family:var(--label)!important;font-weight:600!important;font-size:11px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--dim)!important}
html body .ui-tabs-nav li.ui-tabs-active a,html body .ui-tabs-nav li.ui-state-active a{
  color:var(--gold-lo)!important;border-bottom:1px solid var(--gold-lo)!important}
html body .wine-information th{
  font-family:var(--label)!important;font-weight:600!important;font-size:10.5px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;color:#6A6055!important}

/* cart and checkout tables */
html body table,html body .cart-table,html body .basket{
  background:transparent!important;color:var(--cream)!important}
html body table th{
  font-family:var(--label)!important;font-weight:600!important;font-size:10.5px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  color:var(--gold-lo)!important;border-bottom:1px solid var(--line-2)!important}
html body table td{
  font-family:var(--brand)!important;color:#C9BEAF!important;
  border-bottom:1px solid var(--line)!important}
html body table a{color:var(--gold-lo)!important}

/* sign-in, account and any other form panel */
html body .auth-panel,html body .signin,html body .account-panel,
html body fieldset,html body .form-panel{
  background:var(--card)!important;color:var(--card-ink)!important;
  border:1px solid rgba(212,182,142,.22)!important}
html body label{font-family:var(--label)!important;font-weight:600!important;
  font-size:10.5px!important;letter-spacing:.18em!important;text-transform:uppercase!important}
html body input[type="text"],html body input[type="email"],
html body input[type="password"],html body select,html body textarea{
  font-family:var(--brand)!important;border-radius:0!important;
  border:1px solid rgba(26,21,18,.22)!important;padding:11px 13px!important}

/* their modal popups (shipping, offer codes) */
html body .ui-dialog,html body .modal-content,html body .popup{
  background:var(--card)!important;color:var(--card-ink)!important;
  border:1px solid var(--gold-hi)!important;border-radius:0!important}
html body .ui-dialog-titlebar,html body .modal-header{
  background:var(--black)!important;color:var(--cream)!important;
  font-family:var(--label)!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;font-size:11.5px!important;border-radius:0!important}

/* the empty-cart and system messages, so nothing lands as raw browser default */
html body .message,html body .empty-cart,html body .no-results{
  font-family:var(--brand)!important;color:var(--dim)!important}

/* keep long pages from bottoming out on a hard white edge */
html body .pageContentWidth{background:transparent!important}


/* ── AUDIT SWEEP ─────────────────────────────────────────────────────────────
   Measured every text node on the store against its real background. Their
   theme sets dark greys that assumed a white page; on the black ground those
   fell to 1.18:1 where 4.5:1 is required. These are the measured failures,
   fixed at the source rather than one at a time.

     .sub-title (wine name)   1.18:1  ->  cream
     .tasting-notes-hdr       2.60:1  ->  gold
     wine-information cells   1.18:1  ->  cream / dim
*/
html body .sub-title,html body .page-title,html body .prod-detail-title{
  font-family:var(--brand)!important;color:var(--cream)!important;
  font-weight:400!important}
html body .tasting-notes-hdr,html body .tasting-notes-header,
html body .wine-information caption{
  font-family:var(--label)!important;font-weight:600!important;font-size:11px!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  color:var(--gold-lo)!important}

/* the spec table: labels dim, values cream, both measured past 4.5:1 on black */
html body .wine-information td,html body .wine-information tr td{
  color:var(--cream)!important;font-family:var(--brand)!important;
  border-bottom:1px solid var(--line)!important;padding:9px 0!important}
html body .wine-information td:first-child,html body .wine-information th{
  color:var(--dim)!important;font-family:var(--label)!important;font-weight:600!important;
  font-size:10.5px!important;letter-spacing:.2em!important;text-transform:uppercase!important}

/* Catch-all: anything their theme left near-black that now sits on the dark
   ground. Scoped to the page body so cream cards keep their dark type. */
html body .typeColumnsPage > *:not(.productItem) [style*="color:#1"],
html body .tabs-container,html body .tabs-wrap,html body .tabs-content{
  color:var(--cream)!important}

/* the price panel was a full-bleed white slab with its labels clipped at the
   left edge; it becomes a contained cream card like everything else */
html body .price-container,html body .prod-detail .price-container,
html body .buy-panel,html body .purchase-panel{
  background:var(--card)!important;color:var(--card-ink)!important;
  border:1px solid rgba(212,182,142,.22)!important;
  padding:clamp(18px,2vw,28px)!important;margin-top:18px!important;
  max-width:640px!important}
html body .price-container .price{color:var(--card-ink)!important}
html body .price-container .price-label,html body .price-container .qty-label{
  color:#6A6055!important}