/* ==========================================================================
   The VIP Stop — storefront styling
   Ported from the design prototype. Overrides Storefront defaults.
   ========================================================================== */

:root{
  --vip-ink:#0B0B0B;
  --vip-ink-70:#3D3D3B;
  --vip-ink-45:#767573;
  --vip-ink-25:#A9A8A5;
  --vip-paper:#FFFFFF;
  --vip-mist:#F4F4F3;
  --vip-rule:#E4E4E2;
  --vip-oxblood:#6E1216;

  --vip-display:"Bodoni Moda", Didot, "Times New Roman", serif;
  --vip-body:"Jost", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
body,
button, input, select, textarea,
.widget, .site-footer{
  font-family:var(--vip-body);
  font-weight:300;
  color:var(--vip-ink);
  background-color:var(--vip-paper);
}

body{ line-height:1.65; }

h1,h2,h3,h4,h5,h6,
.page-title, .entry-title,
.product_title,
.woocommerce-loop-product__title,
.site-title{
  font-family:var(--vip-display) !important;
  font-weight:400 !important;
  letter-spacing:-.01em;
  color:var(--vip-ink);
}

a{ color:var(--vip-ink); }
a:hover{ color:var(--vip-oxblood); }

.site-content{ background:var(--vip-paper); }

/* Storefront draws a grey page background by default */
body.woocommerce-page,
body.woocommerce,
#page{ background-color:var(--vip-paper); }

/* ---------- utility bar ---------- */
.vip-utility{
  background:var(--vip-ink);
  color:#fff;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.vip-utility__inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 1.5em;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.vip-utility p{ margin:0; opacity:.85; }
.vip-utility nav{ display:flex; gap:22px; }
.vip-utility a{ color:#fff; opacity:.85; text-decoration:none; }
.vip-utility a:hover{ opacity:1; color:#fff; }

/* ---------- masthead ---------- */
.site-header{
  background:var(--vip-paper) !important;
  border-bottom:1px solid var(--vip-rule);
  padding-top:clamp(24px,4vw,44px);
  padding-bottom:0;
  text-align:center;
}
.site-header .site-branding{ float:none; width:auto; margin:0 auto; }
.site-header .custom-logo-link img,
.vip-lockup img{
  display:block;
  margin:0 auto;
  width:min(300px,66vw);
  height:auto;
}
.vip-lockup{ display:inline-block; text-decoration:none; }
.vip-lockup__strap{
  font-family:var(--vip-body);
  font-size:clamp(8px,1.5vw,10px);
  font-weight:500;
  letter-spacing:.5em;
  text-transform:uppercase;
  padding:10px 0 4px 6px;
  color:var(--vip-ink);
}

.site-header .site-search{ display:none; }

/* The lockup carries the name; Storefront's text title would duplicate it. */
.site-header .site-branding .site-title,
.site-header .site-branding .site-description,
.site-header .site-branding h1.beta,
.site-header .site-branding p.site-description,
.site-header > .col-full > .site-branding > h1,
.site-header .site-branding > a:not(.vip-lockup):not(.custom-logo-link){
  display:none !important;
}

/* main nav */
.storefront-primary-navigation{ background:var(--vip-paper); }
.main-navigation{
  border-top:1px solid var(--vip-rule);
  margin-top:clamp(18px,3vw,32px);
}
.main-navigation ul.menu,
.main-navigation ul.nav-menu{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(14px,3.4vw,42px);
}
.main-navigation ul li a{
  padding:15px 0;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--vip-ink);
  position:relative;
}
.main-navigation ul li a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:9px;
  height:1px; background:var(--vip-ink);
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s ease;
}
.main-navigation ul li a:hover::after,
.main-navigation ul li.current-menu-item a::after{ transform:scaleX(1); }

.main-navigation ul.menu ul.sub-menu{ background:var(--vip-paper); border:1px solid var(--vip-rule); }

/* cart contents in header */
.site-header-cart .cart-contents{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* ---------- buttons ---------- */
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .added_to_cart, .widget a.button,
.woocommerce #respond input#submit, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button{
  background:var(--vip-ink) !important;
  color:#fff !important;
  border:1px solid var(--vip-ink) !important;
  border-radius:0 !important;
  padding:14px 30px !important;
  font-family:var(--vip-body) !important;
  font-size:10px !important;
  font-weight:500 !important;
  letter-spacing:.28em !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  transition:background .25s, color .25s !important;
  text-shadow:none !important;
  box-shadow:none !important;
}
button:hover, .button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover{
  background:var(--vip-paper) !important;
  color:var(--vip-ink) !important;
}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt{
  background:var(--vip-ink) !important;
  color:#fff !important;
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{
  background:var(--vip-oxblood) !important;
  border-color:var(--vip-oxblood) !important;
  color:#fff !important;
}

/* ---------- forms ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
textarea, select, .select2-container .select2-selection--single{
  border:1px solid var(--vip-rule) !important;
  border-radius:0 !important;
  background:var(--vip-paper) !important;
  box-shadow:none !important;
  padding:12px 13px !important;
  font-family:var(--vip-body) !important;
  font-size:14px !important;
  color:var(--vip-ink) !important;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--vip-ink) !important;
  outline:none !important;
}
label{
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--vip-ink-45);
}

/* ---------- product loop ---------- */
.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--vip-rule);
  border:1px solid var(--vip-rule);
  margin:0 0 2em;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:100% !important;
  float:none !important;
  margin:0 !important;
  padding:26px 22px 24px;
  background:var(--vip-paper);
  text-align:center;
  clear:none !important;
  transition:background .3s;
}
.woocommerce ul.products li.product:hover{ background:var(--vip-mist); }

.woocommerce ul.products li.product a img{
  margin:0 auto 16px;
  box-shadow:none;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.woocommerce ul.products li.product:hover a img{ transform:translateY(-6px); }

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--vip-display);
  font-size:20px;
  font-weight:400;
  padding:0;
  margin:0 0 6px;
  color:var(--vip-ink);
}

.woocommerce ul.products li.product .price{
  font-family:var(--vip-display);
  font-size:19px;
  color:var(--vip-oxblood);
  font-weight:400;
  margin-bottom:12px;
  display:block;
}
.woocommerce ul.products li.product .price del{ color:var(--vip-ink-25); opacity:1; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

.woocommerce ul.products li.product .button{ width:100%; }

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
  background:var(--vip-oxblood) !important;
  color:#fff !important;
  border-radius:0 !important;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  min-height:0;
  min-width:0;
  padding:6px 12px;
  line-height:1;
  top:14px; left:14px; right:auto;
  margin:0;
}

/* olfactive family, injected by functions.php */
.vip-family{
  display:block;
  font-family:var(--vip-body);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--vip-ink-45);
  margin-bottom:10px;
}

/* note strip on hover */
.vip-notes{
  border-top:1px solid var(--vip-rule);
  margin-top:12px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  text-align:left;
  transition:max-height .4s ease, opacity .3s ease, margin .4s ease;
}
li.product:hover .vip-notes,
li.product:focus-within .vip-notes{ max-height:150px; opacity:1; }
.vip-notes dl{
  margin:0;
  padding-top:12px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 12px;
}
.vip-notes dt{
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--vip-ink-25);
  padding-top:2px;
  margin:0;
}
.vip-notes dd{
  margin:0;
  font-size:12.5px;
  color:var(--vip-ink-70);
  line-height:1.45;
}

/* ---------- single product ---------- */
.woocommerce div.product .product_title{
  font-size:clamp(28px,4vw,46px);
  line-height:1.05;
  margin-bottom:.2em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--vip-display);
  font-size:28px;
  color:var(--vip-oxblood);
  font-weight:400;
}
.woocommerce div.product .woocommerce-product-rating{ margin-bottom:1.4em; }

.woocommerce div.product form.cart .variations{
  border:0;
  margin-bottom:1.4em;
}
.woocommerce div.product form.cart .variations label{
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--vip-ink-45);
  font-weight:400;
}
.woocommerce div.product form.cart .variations td{ padding:8px 0; }

.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0;
  margin:0 0 2em;
  border-bottom:1px solid var(--vip-rule);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  margin:0 28px 0 0 !important;
  padding:0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--vip-ink-45);
  padding:14px 0;
  display:block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--vip-ink);
  box-shadow:inset 0 -1px 0 var(--vip-ink);
}

/* note pyramid on the single product page */
.vip-pyramid{
  margin:26px 0;
  border-top:1px solid var(--vip-rule);
}
.vip-pyramid__row{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--vip-rule);
}
.vip-pyramid__lbl{
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--vip-ink-45);
  padding-top:3px;
}
.vip-pyramid__val{
  font-family:var(--vip-display);
  font-size:16.5px;
  color:var(--vip-ink);
}

/* ---------- cart, checkout, account ---------- */
.woocommerce table.shop_table{
  border:1px solid var(--vip-rule);
  border-radius:0;
}
.woocommerce table.shop_table th{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--vip-ink-45);
}
.woocommerce table.shop_table td{ border-top:1px solid var(--vip-rule); }
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3{
  font-family:var(--vip-display);
  font-weight:400;
  font-size:24px;
}
.woocommerce .cart-collaterals .cart_totals table{ border:1px solid var(--vip-rule); }

.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-noreviews, p.no-comments{
  background:var(--vip-mist) !important;
  color:var(--vip-ink) !important;
  border-top:2px solid var(--vip-ink) !important;
  border-radius:0 !important;
}
.woocommerce-message::before, .woocommerce-info::before{ color:var(--vip-ink) !important; }
.woocommerce-error{ border-top-color:var(--vip-oxblood) !important; }

.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--vip-rule); }
.woocommerce-MyAccount-navigation li a{
  display:block;
  padding:13px 0;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.woocommerce-MyAccount-navigation li.is-active a{ color:var(--vip-oxblood); }

/* ---------- footer ---------- */
.site-footer{
  background:var(--vip-ink) !important;
  color:#fff !important;
  padding-top:clamp(48px,6vw,80px);
}
.site-footer a{ color:#fff; opacity:.82; }
.site-footer a:hover{ color:#fff; opacity:1; }
.site-footer h2, .site-footer h3, .site-footer .widget-title{
  font-size:10px !important;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:500 !important;
  font-family:var(--vip-body) !important;
  color:rgba(255,255,255,.55) !important;
  margin-bottom:16px;
}
.site-footer .widget{ font-size:13.5px; }
.site-info{
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:20px;
  margin-top:clamp(30px,4vw,54px);
  font-size:11px;
  opacity:.6;
}
.vip-legal{
  font-size:11px;
  opacity:.6;
  max-width:70ch;
  margin:8px 0 0;
}

/* ---------- misc ---------- */
.storefront-breadcrumb{
  background:transparent;
  border-bottom:1px solid var(--vip-rule);
  padding:14px 0;
  margin-bottom:2em;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--vip-ink-45);
}
.storefront-sorting{ margin-bottom:2em; }
.woocommerce .woocommerce-ordering select{ font-size:12px !important; }

.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle{ background:var(--vip-ink); }

::selection{ background:var(--vip-ink); color:#fff; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .vip-utility__inner{ font-size:9px; letter-spacing:.16em; }
  .vip-utility p{ display:none; }
  .vip-utility nav{ margin:0 auto; }
  .main-navigation ul.menu, .main-navigation ul.nav-menu{ display:block; }
}
@media (max-width:560px){
  .woocommerce ul.products{ grid-template-columns:1fr; }
  .vip-notes{ max-height:150px; opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}