/* ============================================================================
   Stillpoint Aromatics — brand layer (Phase 7 visual rebuild)
   Loaded AFTER the stock OC3 default stylesheet.css to reskin the storefront.
   Palette + fonts ported from the 1.4 stillpoint theme SCSS
   (assets/scss/_settings.scss, base/_variables.scss, _fonts.scss).
   ========================================================================== */

:root {
  --sp-lilac:  #8d79a0;   /* header primary / action */
  --sp-lilac-d:#75628a;
  --sp-grape:  #4e405a;   /* header secondary / dark */
  --sp-grape-d:#3d3247;
  --sp-moss:   #5d6749;   /* earthy accent */
  --sp-clay:   #7e534e;   /* warm accent */
  --sp-gold:   #ecb345;   /* CTA / highlight */
  --sp-gold-d: #d89a26;
  --sp-cream:  #f7f4ef;   /* page background */
  --sp-paper:  #fffdfa;   /* card background */
  --sp-ink:    #3a3340;   /* body text */
  --sp-muted:  #8b8592;
  --sp-line:   #e4ddd2;   /* hairlines */
  /* exact live-site values (from source SCSS + computed styles) */
  --sp-red:      #b10420;  /* announce bar + shop-by Chakras + SALE */
  --sp-orange:   #da762e;  /* shop-by Aromas */
  --sp-shopgold: #e1a83c;  /* shop-by Therapeutic */
  --sp-yellow:   #fde26d;  /* shop-by Chemistry */
  --sp-green:    #a6cd52;  /* shop-by Best Sellers */
  --sp-blue:     #548ab9;  /* shop-by Institute */
  --sp-promo:      #d9d3df; /* promo strip bg */
  --sp-charcoal:   #4a4a4a; /* utility (link) bar bg */
  --sp-charcoal-a: #a0a0a0; /* utility bar links */
  --sp-footer-red: #9d3634; /* footer body */
  --sp-footer-yellow:#f8e4b2;/* footer gradient / Sedona sky */
  --sp-footer-gold: #c9a24a; /* footer headings */
}

/* ---- Web fonts -------------------------------------------------------- */
@font-face {
  font-family: 'Prociono';
  src: url('fonts/prociono-webfont.woff') format('woff'),
       url('fonts/prociono-webfont.ttf')  format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'stillpoint';
  src: url('fonts/stillpoint.woff') format('woff'),
       url('fonts/stillpoint.ttf')  format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* Fira Sans (body) is loaded from Google Fonts in the header.
   Serif display face = Prociono, with a graceful serif fallback. */

/* ---- Base ------------------------------------------------------------- */
body {
  font-family: 'Fira Sans', 'Helvetica Neue', Arial, sans-serif;
  color: var(--sp-ink);
  background: var(--sp-cream) url('images/rockywall_@2X.png') repeat;
  background-size: 480px;
  font-size: 15px;
  line-height: 1.6;
}
a { color: var(--sp-lilac); }
a:hover { color: var(--sp-grape); text-decoration: none; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4 {
  font-family: 'Prociono', Georgia, serif;
  color: var(--sp-grape);
  font-weight: normal;
  line-height: 1.2;
}
h1 { letter-spacing: .01em; }

#content { min-height: 380px; }

/* ---- Top utility bar -------------------------------------------------- */
/* Red announcement bar */
.sp-announce {
  background: var(--sp-red);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  line-height: 1.35;
}
/* Promo / site-wide message strip */
.sp-promo {
  background: var(--sp-promo);
  color: var(--sp-charcoal);
  text-align: center;
  font-size: 13px;
  padding: 9px 16px;
  line-height: 1.5;
}
/* Utility (link) bar — source _link-bar.scss: #4a4a4a / #a0a0a0 / .8em */
.sp-utility {
  background: var(--sp-charcoal);
  padding: 3px 0;
  font-size: 12.8px;
}
.sp-utility ul { margin: 0; text-align: right; }
.sp-utility li { padding: 0 8px; }
.sp-utility a, .sp-utility a:link, .sp-utility a:visited { color: var(--sp-charcoal-a); text-decoration: none; }
.sp-utility a:hover, .sp-utility a:focus { color: #fff; text-decoration: underline; }

/* ---- Masthead (lilac) ------------------------------------------------- */
header.sp-masthead {
  background: var(--sp-lilac);
  border: 0;
  box-shadow: none;
  padding: 14px 0;
}
header.sp-masthead .row { display: flex; align-items: center; flex-wrap: wrap; }
#logo img { max-height: 52px; width: auto; }
#logo h1 a { color: #fff; }

/* centered search — white field, dark charcoal button, ~18px (live) */
.sp-search-wrap #search { margin: 0; }
.sp-search-wrap #search .form-control {
  border: 1px solid #fff;
  border-right: 0;
  box-shadow: none;
  background: #fff;
  font-size: 18px;
  height: 44px;
}
.sp-search-wrap #search .btn {
  background: var(--sp-charcoal);
  color: #fff;
  border: 0;
  height: 44px;
  padding: 0 18px;
}
.sp-search-wrap #search .btn:hover { background: var(--sp-grape-d); }

/* cart + account icons (white on lilac) */
.sp-icons { text-align: right; display: flex; align-items: center; justify-content: flex-end; }
.sp-icons .sp-cart { margin-right: 6px; }
.sp-icons #cart > .btn {
  background: transparent; color: #fff; border: 0; font-weight: 500; font-size: 14px; box-shadow: none;
}
.sp-icons #cart > .btn:hover, .sp-icons #cart.open > .btn { color: var(--sp-gold); background: transparent; }
.sp-icons #cart > .btn .fa { font-size: 22px; }
.sp-icons #cart .dropdown-menu { min-width: 340px; color: var(--sp-ink); text-align: left; }
.sp-icon-user { color: #fff; font-size: 26px; line-height: 1; padding-left: 6px; }
.sp-icon-user:hover, .sp-icon-user:focus { color: var(--sp-gold); }

/* ---- Left-sidebar navigation (matches live site) ---------------------- */
/* Stillpoint icon font (self-hosted) for the shop-by facet glyphs. */
.sp-facet-icon {
  font-family: 'stillpoint';
  font-style: normal; font-weight: normal; font-variant: normal;
  text-transform: none; line-height: 1; speak: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-chemistry:before   { content: "\e900"; }
.icon-aromas:before      { content: "\e901"; }
.icon-bestsellers:before { content: "\e902"; }
.icon-benefits:before    { content: "\e903"; }
.icon-chakras:before     { content: "\e90c"; }

#column-left { padding-left: 0; padding-right: 0; background: var(--sp-grape); }
.sub-navigation { background: var(--sp-grape); }
/* Left nav matches the live site: the coloured shop-by + category list renders
   at its FULL natural height and flows down the page (no 100vh cap, no internal
   scrollbar, no sticky pinning — the live nav is a natural-height block). The
   grape column is NOT stretched to the content height, so on long product/
   listing pages the grape ends at the menu's natural bottom with white below,
   exactly like stillpointaromatics.com. (Superseded the S14 sticky panel, which
   capped the list at one viewport and read as "cut off".) Desktop/tablet only;
   on mobile the column is full-width and stacks above the content. */
@media (min-width: 768px) {
  .container > .row > #column-left { align-self: flex-start; position: sticky; top: 0; }
}

/* Colored shop-by facet blocks */
.shop-facets { display: block; }
.shop-facet-item {
  display: flex; align-items: center;
  padding: 16px 18px; color: #fff; text-decoration: none;
  font-family: 'Prociono', Georgia, serif;
  text-transform: uppercase; letter-spacing: 1px; line-height: 1.2;
  font-size: 14px;
  transition: filter .2s ease;
}
.shop-facet-item:hover, .shop-facet-item:focus, .shop-facet-item.is_current {
  color: #fff; filter: brightness(1.08); text-decoration: none;
}
.shop-facet-item .sp-facet-icon { font-size: 34px; margin-right: 12px; flex: 0 0 auto; }
.shop-facet-item .sp-facet-icon .fa { font-size: 30px; }
.shop-facet-item--red    { background: var(--sp-red); }
.shop-facet-item--orange { background: var(--sp-orange); }
.shop-facet-item--gold   { background: var(--sp-shopgold); }
.shop-facet-item--yellow { background: var(--sp-yellow); }
.shop-facet-item--green  { background: var(--sp-green); }
.shop-facet-item--blue   { background: var(--sp-blue); }

/* Vertical category list (OC3 Category module .list-group) */
.subnav-more { background: var(--sp-grape); padding: 0; }
.subnav-more .list-group { margin: 0; }
.subnav-more .list-group-item {
  position: relative;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.09);
  color: #efe9f2;
  text-transform: uppercase; letter-spacing: .5px; font-size: 12px;
  padding: 12px 34px 12px 18px;
  border-radius: 0;
}
.subnav-more .list-group-item:after {
  content: "\f105"; font-family: FontAwesome;
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  opacity: .35;
}
.subnav-more .list-group-item:hover,
.subnav-more .list-group-item.active,
.subnav-more .list-group-item.active:hover {
  background: var(--sp-grape-d); color: #fff; border-color: rgba(255,255,255,.09);
}
.sp-sale-link {
  display: block; background: var(--sp-red); color: #fff;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  padding: 13px 18px; position: relative;
}
.sp-sale-link:hover, .sp-sale-link:focus { background: #8c0319; color: #fff; text-decoration: none; }
.sp-sale-link:after {
  content: "\f105"; font-family: FontAwesome; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: .6;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn-primary,
.btn-primary:focus {
  background: var(--sp-lilac);
  border-color: var(--sp-lilac-d);
  color: #fff;
  text-shadow: none;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:active { background: var(--sp-grape); border-color: var(--sp-grape); }

/* the marquee CTA: "Add to Cart" / gold buttons */
#button-cart, .btn-gold {
  background: var(--sp-gold);
  border-color: var(--sp-gold-d);
  color: #4a3a10;
  font-weight: 600;
}
#button-cart:hover, .btn-gold:hover { background: var(--sp-gold-d); color:#4a3a10; }

.btn-default {
  background: #fff;
  border-color: var(--sp-line);
  color: var(--sp-grape);
}
.btn-default:hover { background: var(--sp-cream); border-color: var(--sp-lilac); color: var(--sp-grape); }

/* ---- Headings / page titles ------------------------------------------- */
h1.sp-page-title, #content > h1, #content > h2:first-child {
  border-bottom: 2px solid var(--sp-line);
  padding-bottom: 10px;
  margin-top: 6px;
}

/* breadcrumb */
.breadcrumb {
  background: transparent;
  padding: 12px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--sp-line);
}
.breadcrumb > li + li:before { color: var(--sp-muted); }
.breadcrumb a { color: var(--sp-muted); }
.breadcrumb a:hover { color: var(--sp-lilac); }

/* ---- Product thumbs / listings ---------------------------------------- */
.product-thumb {
  border: 1px solid var(--sp-line);
  background: var(--sp-paper);
  border-radius: 4px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.product-thumb:hover { border-color: var(--sp-lilac); box-shadow: 0 4px 18px rgba(78,64,90,.12); }
.product-thumb h4 { font-family: 'Fira Sans', sans-serif; font-size: 15px; }
.product-thumb h4 a { color: var(--sp-grape); }
.product-thumb .price { color: var(--sp-clay); font-weight: 600; }
.product-thumb .price-new { color: var(--sp-clay); }
.product-thumb .price-old { color: var(--sp-muted); }
.product-thumb .button-group .btn { background:#fff; color:var(--sp-grape); }
.product-thumb .button-group button:first-child {
  background: var(--sp-lilac); color:#fff; border:0;
}
.product-thumb .button-group button:first-child:hover { background: var(--sp-grape); }

.rating .fa-star { color: var(--sp-gold); }
.rating .fa-star-o { color: var(--sp-line); }

/* ---- Product page ----------------------------------------------------- */
#product h2, .product-info h1 { color: var(--sp-grape); }
.product-info .price, ul.list-unstyled .price, .list-unstyled h2 { color: var(--sp-clay); }
#product .form-group label.control-label { font-weight: 600; color: var(--sp-grape); }

/* tabs: aromatherapy / GC/MS / description / reviews */
.nav-tabs { border-bottom: 2px solid var(--sp-lilac); }
.nav-tabs > li > a {
  color: var(--sp-grape);
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover { background: var(--sp-cream); border-color: var(--sp-line); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #fff;
  background: var(--sp-lilac);
  border: 1px solid var(--sp-lilac);
  border-bottom-color: transparent;
}
.tab-content { padding: 18px 4px; }

/* aromatherapy "Essential Facts" table */
.table-aromatherapy > tbody > tr > td:first-child,
#tab-aromatherapy table td:first-child { font-weight: 600; color: var(--sp-grape); width: 34%; }
.sp-narrative { line-height: 1.7; }
.sp-narrative h1, .sp-narrative h2, .sp-narrative h3 { margin-top: 1em; }

/* ============================================================================
   Product detail page — matched to the live product page (Session 13 parity).
   Ports _tabcordion, _sp-select, _table-treatments, _button, _sp-text-content.
   ========================================================================== */
/* Title + latin subtitle (full width, serif lilac) */
.sp-product-heading { margin: 6px 0 20px; }
.sp-product-title {
  font-family: 'Prociono', Georgia, serif; font-size: 40px; line-height: 1.08;
  font-weight: 700; color: var(--sp-lilac); margin: 0; border: 0; padding: 0;
}
.sp-product-latin {
  font-family: 'Prociono', Georgia, serif; font-style: italic; font-size: 20px;
  color: #c0b5ca; margin: 3px 0 0; border: 0; padding: 0;
}

/* Media column */
.sp-product-main { margin-top: 4px; }
.sp-product-media .thumbnails { list-style: none; margin: 0; padding: 0; }
.sp-product-media .thumbnails > li { list-style: none; margin-bottom: 10px; }
.sp-product-media .thumbnail { border: 0; padding: 0; background: transparent; box-shadow: none; }
.sp-avg-rating { margin-top: 14px; color: var(--sp-grape); font-size: 14px; }
.sp-avg-rating .sp-drop { color: var(--sp-moss); }
.sp-avg-rating .sp-drop-o { color: #cfc8bb; }
.sp-avg-rating .sp-see-reviews { color: var(--sp-lilac); margin-left: 6px; }

/* Buy panel (lilac) */
.sp-buybox { background: var(--sp-lilac); color: #fff; padding: 22px 24px; border-radius: 2px; }
.sp-buybox-tools { float: right; margin: 0 0 6px 10px; }
.sp-buybox-tools .btn { padding: 4px 9px; }
.sp-buybox .control-label { color: #fff !important; font-weight: 600; }
.sp-buybox .form-group { margin-bottom: 14px; }
.sp-buybox h3 { color: #fff; font-family: 'Fira Sans', sans-serif; font-size: 15px; }
.sp-price-block { margin: 0 0 14px; }
.sp-price { font-family: 'Prociono', Georgia, serif; font-size: 30px; color: #fff; display: inline-block; }
.sp-price-old { text-decoration: line-through; color: #e6def0; margin-right: 10px; font-size: 20px; }
.sp-price-tax { display: block; font-size: 12px; color: #ece6f2; margin-top: 2px; }
.sp-reward-points, .sp-qty-discounts { color: var(--sp-grape); font-size: 13px; margin-top: 10px; }
.sp-qty { display: inline-block; width: 90px; }

/* sp-select — light-lilac field with a chevron carat */
.sp-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: #e6e1ea;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234e405a' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
  color: #555; border: 0; border-radius: 4px; box-shadow: none; height: auto;
  padding: 10px 36px 10px 16px; letter-spacing: .4px;
}
.sp-select::-ms-expand { display: none; }

/* Add to Cart — grape, uppercase (overrides the gold #button-cart rule) */
#button-cart.sp-add-to-cart {
  background: var(--sp-grape); border: 0; color: #fff;
  text-transform: uppercase; letter-spacing: .8px; font-weight: 500;
  border-radius: 3px; margin-top: 6px; padding: 16px;
}
#button-cart.sp-add-to-cart:hover, #button-cart.sp-add-to-cart:focus { background: #fff; color: var(--sp-grape); }

/* Dark GC/MS report banner (jumps to the report section) */
.sp-gcms-banner {
  display: flex; align-items: center; gap: 14px; background: #2c2733; color: #fff;
  padding: 15px 20px; margin-top: 14px; text-decoration: none; border-radius: 2px;
}
.sp-gcms-banner:hover, .sp-gcms-banner:focus { background: #38313f; color: #fff; text-decoration: none; }
.sp-gcms-icon { font-size: 26px; opacity: .85; }
.sp-gcms-body { flex: 1 1 auto; line-height: 1.3; }
.sp-gcms-body strong { font-family: 'Prociono', Georgia, serif; font-size: 20px; font-weight: 700; }
.sp-gcms-arrow { font-size: 26px; opacity: .8; }

/* Section headings (serif lilac) */
.sp-section-title {
  font-family: 'Prociono', Georgia, serif; font-size: 26px; font-weight: 700;
  color: var(--sp-lilac); margin: 40px 0 16px;
}

/* Long-form text content (description + narrative) */
.sp-text-content { line-height: 1.7; color: var(--sp-ink); }
.sp-text-content h3 { font-family: 'Prociono', Georgia, serif; color: var(--sp-grape); font-size: 22px; margin: 1.3em 0 .5em; }
.sp-text-content h3:first-child { margin-top: 0; }
.sp-text-content p { margin-bottom: 1em; }
.sp-text-content ul, .sp-text-content ol { margin: 0 0 1em 1.6em; }
.sp-text-content ul { list-style: disc; }
.sp-text-content ol { list-style: decimal; }
.sp-product-description { margin: 10px 0 4px; }

/* GC/MS report tables */
.sp-gcms .gcms-meta { color: var(--sp-muted); font-size: 13px; margin: 0 0 6px; }
/* Analysis heading — matches the live _sp-gcms-report .gcms-gas-chromatography-analysis h3:
   centered lilac with a lilac underline. */
.sp-gcms-subtitle { font-family: 'Fira Sans', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--sp-lilac); text-align: center; border-bottom: 1px solid var(--sp-lilac); padding-bottom: 8px; margin: 1.4em 0 1.2em; }
.sp-gcms-grid { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.gcms-family-grouping { flex: 0 0 50%; max-width: 50%; padding: 0 10px 12px; }
/* Family header — live .gcms-family-grouping-header: uppercase sans, letter-spacing, weight normal, lilac. */
.gcms-family-grouping h4 { font-family: 'Fira Sans', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; color: var(--sp-lilac); font-size: 14px; border-bottom: 1px solid var(--sp-line); padding-bottom: 5px; margin-bottom: 6px; }
.sp-gcms-table { margin-bottom: 6px; }
.sp-gcms-table td { padding: 4px 6px; border: 0; border-bottom: 1px solid #f0ecf2; font-size: 13px; }

/* Essential Facts — 2-column grid on the promo-strip background */
.sp-essential-facts .product-details-list {
  list-style: none; margin: 0; padding: 24px 28px; background: var(--sp-promo);
  display: flex; flex-wrap: wrap; border-radius: 2px;
}
.sp-essential-facts .product-details-list > li {
  flex: 0 0 50%; max-width: 50%; padding: 6px 24px 6px 0;
  color: var(--sp-lilac-d); font-size: 15px; line-height: 1.5;
}
.sp-essential-facts .product-details-list > li.full { flex-basis: 100%; max-width: 100%; }
.sp-essential-facts .product-details-list > li strong { color: #333; font-weight: 700; margin-right: 5px; }
.sp-essential-facts .product-details-list > li em { color: var(--sp-lilac-d); font-style: italic; }

/* Grape tabcordion (tabs on desktop → accordion on mobile) */
.sp-tabcordion { margin: 34px 0; background: var(--sp-grape); border-radius: 3px; overflow: hidden; }
.tabcordion-tabset { display: flex; flex-wrap: wrap; padding: 0 6px; background: #342b3c; }
.tabcordion-tab {
  padding: 12px 28px 14px; color: #fff !important; text-decoration: none;
  font-family: 'Fira Sans', sans-serif; text-transform: uppercase; letter-spacing: .06em;
  font-size: 13px; background: #5b4b69; border-radius: 4px 4px 0 0; margin: 5px 3px 0;
  cursor: pointer; transition: background .15s ease;
}
.tabcordion-tab:hover, .tabcordion-tab:focus { background: #6a5878; color: #fff; text-decoration: none; }
.tabcordion-tab.current { background: var(--sp-grape); padding-bottom: 19px; margin-bottom: -5px; }
.tabcordion-toggle {
  display: none; text-align: center; padding: 12px; color: #fff !important; text-decoration: none;
  font-family: 'Fira Sans', sans-serif; text-transform: uppercase; letter-spacing: .06em;
  font-size: 13px; background: #5b4b69; border-bottom: 1px solid #43384e; cursor: pointer;
}
.tabcordion-content {
  display: none; background: #fff; margin: 0 14px 18px; padding: 26px 30px; border-radius: 0 0 4px 4px;
}
.tabcordion-section.active > .tabcordion-content { display: block; }

/* Attributes / reviews sections */
.sp-attributes, .sp-reviews { margin-top: 10px; }
.sp-reviews h3 { color: var(--sp-grape); }

@media (max-width: 767px) {
  .sp-product-title { font-size: 30px; }
  .sp-product-latin { font-size: 18px; }
  .sp-section-title { font-size: 22px; }
  .sp-essential-facts .product-details-list > li,
  .gcms-family-grouping { flex-basis: 100%; max-width: 100%; }
  .tabcordion-tabset { display: none; }
  .tabcordion-toggle { display: block; margin: 0; }
  .tabcordion-section.active > .tabcordion-toggle { background: var(--sp-grape); }
  .tabcordion-content { margin: 0; border-radius: 0; }
}

/* ---- Panels / info boxes ---------------------------------------------- */
.panel { border-color: var(--sp-line); box-shadow: none; }
.panel-heading { background: var(--sp-cream); color: var(--sp-grape); border-color: var(--sp-line); }
.panel-default > .panel-heading { color: var(--sp-grape); }
.list-group-item.active,
.list-group-item.active:hover { background: var(--sp-lilac); border-color: var(--sp-lilac); }
#column-left .list-group a.active { background: var(--sp-lilac); border-color: var(--sp-lilac); }

/* alerts */
.alert-success { background: #eef2e6; border-color: var(--sp-moss); color: #45502f; }
.alert-info    { background: #f0ecf4; border-color: var(--sp-lilac); color: var(--sp-grape); }

/* pagination */
.pagination > .active > span,
.pagination > .active > span:hover { background: var(--sp-lilac); border-color: var(--sp-lilac); }
.pagination > li > a { color: var(--sp-grape); }

/* forms */
.form-control:focus { border-color: var(--sp-lilac); box-shadow: 0 0 5px rgba(141,121,160,.4); }

/* ---- Footer (matches live: Sedona silhouette + brick-red columns) ----- */
/* Sedona red-rock silhouette (footer-decoration.png) over a white->cream
   sky gradient; source _stillpoint-footer.scss. Path is ../images relative
   to this stylesheet (stylesheet/stillpoint.css). */
.site-footer-wrapper {
  padding-top: 200px;
  background: url('../images/footer-decoration.png') repeat-x top center,
              linear-gradient(to bottom, #fff, var(--sp-footer-yellow) 200px, var(--sp-footer-yellow));
  background-size: auto 205px, auto;
  font-size: 14px;
  margin-top: 30px;
}
.site-footer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  background: var(--sp-footer-red);
  color: var(--sp-footer-gold);
  font-family: 'Prociono', Georgia, serif;
  padding: 2em 5% 3em;
}
.site-footer > div { padding-right: 22px; }
.site-footer .stillpoint-contact-info { flex: 1 1 0; }
.site-footer .customer-shopby { flex: 1 1 0; }
.site-footer .categories-and-resources { flex: 2 1 0; display: flex; justify-content: space-around; }
.site-footer a, .site-footer a:link { color: #fff; text-decoration: none; }
.site-footer a:hover, .site-footer a:active { color: #fff; text-decoration: underline; }
.site-footer a[href^='tel:'] { color: var(--sp-footer-gold); }
.site-footer a[href^='mailto:'] { font-style: italic; }
.site-footer ul { list-style: none; margin: 0 0 1em; padding: 0; }
.site-footer li { margin: 0 0 2px; }
.site-footer h3 {
  font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--sp-footer-gold); margin: 1em 0 .4em; border: 0; padding: 0;
}
.site-footer p, .site-footer address { color: #fff; font-style: normal; margin: 0 0 .6em; }
.site-footer .phone-number { font-family: 'Fira Sans', sans-serif; font-size: 1.15em; margin-bottom: 0; }
.site-footer .footer-logo img { width: 200px; max-width: 100%; margin-bottom: 10px; }
.sp-colophon { background: #7c2b29; color: #e7c9c8; text-align: center; padding: 12px 0; font-size: 12px; font-family: 'Fira Sans', sans-serif; }
.sp-colophon a { color: #fff; }

/* Footer left column = the grape sidebar continued (matches live): the footer's
   content is inset to the right and a grape strip fills the left 25% (= the
   col-sm-3 sidebar width, both 25vw), so the coloured left column runs down the
   whole page instead of the footer spanning full width. Desktop/tablet only;
   on mobile the footer stacks full-width. */
@media (min-width: 768px) {
  .site-footer-wrapper { position: relative; margin-top: 0; }
  .site-footer-wrapper::before {
    content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 25%;
    background: var(--sp-grape); z-index: 1;
  }
  .site-footer { padding-left: 27%; }
}

@media (max-width: 991px) {
  .site-footer { flex-direction: column; }
  .site-footer .categories-and-resources { flex-direction: column; }
}

/* ---- Homepage (dark grape content area — matches live) ---------------- */
/* Only the homepage content sits on grape with white text; inner pages stay
   white. Scope everything to #common-home. */
#common-home #content { background: var(--sp-grape); color: #fff; padding: 0 24px 24px; }
#common-home #content h1, #common-home #content h2, #common-home #content h3 { color: #fff; }
#common-home #content a { color: #efe6f5; }

/* "Shop Essential Oils By" 2x2 icon grid */
.sp-oilsby-grid { margin: 30px 0 10px; }
/* Flex the grid row so the 4 items sit in an even 2x2 regardless of copy
   length (Bootstrap floats otherwise catch on uneven heights and mis-order). */
.sp-oilsby-grid .row { display: flex; flex-wrap: wrap; }
.sp-oilsby-grid .row > [class*="col-"] { display: flex; }
.sp-oilby-item { display: flex; align-items: flex-start; padding: 18px 10px; color: #fff; text-decoration: none; }
.sp-oilby-item:hover { color: #fff; text-decoration: none; }
.sp-oilby-item:hover .oilby-title { color: var(--sp-gold); }
.sp-oilby-icon { font-family: 'stillpoint'; font-style: normal; font-size: 66px; line-height: 1; margin-right: 18px; color: #fff; flex: 0 0 auto; }
.sp-oilby-content { display: block; }
.sp-oilby-content .eyebrow { display:block; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #b9abc6; margin-bottom: 2px; }
.sp-oilby-content .oilby-title { display:block; font-family:'Prociono',Georgia,serif; font-size: 22px; color:#fff; margin-bottom: 6px; transition: color .15s ease; }
.sp-oilby-content .oilby-copy { display:block; font-size: 14px; color:#e4dcec; line-height:1.5; }

.sp-ethical-banner {
  position: relative; margin: 34px -24px; overflow: hidden;
  background: var(--sp-grape) center/cover no-repeat;
  color: #fff; text-align: center; padding: 70px 20px;
}
.sp-ethical-banner:after { content:''; position:absolute; inset:0; background: rgba(45,36,54,.35); }
.sp-ethical-banner > * { position: relative; z-index: 2; }
.sp-ethical-banner h2 { color:#fff; font-size: 44px; font-style: italic; margin: 0 0 8px; }
.sp-ethical-banner h2 span { color: var(--sp-gold); }
.sp-ethical-banner p { font-size: 17px; max-width: 640px; margin: 14px auto 0; }
.sp-ethical-banner hr.small { width:120px; border-top:2px solid #fff; margin: 16px auto; opacity:.7; }
.sp-play-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; border-radius:50%; border:3px solid #fff; color:#fff !important;
  font-size:26px; margin: 6px auto; transition: background .2s ease, color .2s ease;
}
.sp-play-btn:hover { background:#fff; color: var(--sp-grape) !important; }
.sp-play-btn .fa { margin-left: 4px; }

.sp-home-section-title { text-align:center; margin: 40px 0 18px; }
.sp-home-section-title h2 { display:inline-block; font-size: 30px; color:#fff; padding: 0 20px; }

/* Featured / Best Sellers / New Products tab set (lilac/grape/clay) */
.sp-home-tabs { margin: 34px 0 10px; }
.sp-tabcordion-tabs { display: flex; }
.sp-tab {
  flex: 1; text-align: center; padding: 14px 8px;
  color: #fff; text-decoration: none;
  font-family: 'Prociono', Georgia, serif; font-size: 18px;
  text-transform: uppercase; letter-spacing: 1px; opacity: .78;
  transition: opacity .15s ease;
}
.sp-tab:hover, .sp-tab:focus { color: #fff; opacity: 1; text-decoration: none; }
.sp-tab.active { opacity: 1; }
.sp-tab--lilac { background: var(--sp-lilac); }
.sp-tab--grape { background: var(--sp-grape-d); }
.sp-tab--clay  { background: var(--sp-clay); }
.sp-tabcordion-panes { background: rgba(0,0,0,.08); padding: 8px 14px 18px; }
.sp-tabcordion-pane { display: none; }
.sp-tabcordion-pane.active { display: block; }
.sp-tabcordion-pane > .row { margin-top: 8px; }

/* Featured product tiles on the grape homepage: borderless, white text */
#common-home .product-thumb { background: transparent; border: 0; }
#common-home .product-thumb:hover { box-shadow: none; }
#common-home .product-thumb h4 a { color: #fff; }
#common-home .product-thumb .caption { color: #efe6f5; }
#common-home .product-thumb .price { color: #fff; }
#common-home .product-thumb .button-group { background: rgba(0,0,0,.12); }

.sp-mailing-cta {
  margin: 40px -24px -24px; background: #fff; color: var(--sp-ink);
  padding: 40px 28px; text-align:center;
}
.sp-mailing-cta h3 { color: var(--sp-grape) !important; margin-top:0; font-size: 26px; }
.sp-mailing-cta p { color: var(--sp-ink); }
.sp-mailing-cta .btn { background: var(--sp-grape); color:#fff; border:0; font-weight:600; }
.sp-mailing-cta .btn:hover { background: var(--sp-lilac); }

/* ---- Category / listing page (ports _stillpoint-category-page.scss) --- */
#product-category #content { padding-left: 0; padding-right: 0; }
.category-header {
  position: relative;
  padding: 60px 40px;
  margin-bottom: 24px;
  color: #fff;
  background: linear-gradient(rgba(45,36,54,.55), rgba(45,36,54,.6)),
              url('../images/Mountains-bg@2x.jpg') center/cover no-repeat;
}
.category-header .breadcrumbs-nav { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.category-header .breadcrumbs-nav li { display: inline; }
.category-header .breadcrumbs-nav li a { color: #efe6f5; }
.category-header .breadcrumbs-nav li:not(:last-child) a { text-decoration: underline; }
.category-header .breadcrumbs-nav li:not(:last-child):after { content: ":"; margin: 0 .3em 0 .5em; color: #cfc6da; }
.category-page-header { font-family: 'Prociono', Georgia, serif; font-size: 46px; color: #fff; margin: 0 0 12px; }
.category-description { max-width: 760px; }
.category-description, .category-description span, .category-description p { color: #f3eef8 !important; font-size: 17px !important; line-height: 1.5 !important; }
.category-description strong { color: #fff; }
.sub-category-header {
  margin: 22px 0 12px; font-size: 12px; text-transform: uppercase;
  font-family: 'Fira Sans', sans-serif; letter-spacing: 2px; color: #d8cfe2; font-weight: 500;
}
.sub-categories { display: block; }
.sub-category-item { display: inline-block; margin: 0 8px 10px 0; }
.sub-category-item a {
  display: inline-block; padding: 6px 16px; border-radius: 4px;
  border: 1px solid #fff; color: #fff; text-decoration: none; transition: all .2s ease;
}
.sub-category-item a:hover, .sub-category-item a:focus { background: #fff; color: var(--sp-grape); }

.sp-listing-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 18px; padding: 0 4px; }
.sp-listing-results { color: var(--sp-muted); font-size: 13px; }
.sp-listing-controls { display: flex; gap: 10px; }

.product-listing { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.product-listing-item {
  width: 50%; display: flex; padding: 16px 15px 0; margin-bottom: 26px;
  border-top: 2px solid var(--sp-lilac);
}
.product-listing-item-thumbnail { flex: 0 0 34%; max-width: 34%; }
.product-listing-item-thumbnail img { width: 100%; height: auto; display: block; }
.product-listing-item-details { flex: 1 1 auto; min-width: 0; padding-left: 18px; }
.product-listing-item-title { font-family: 'Fira Sans', sans-serif; font-size: 18px; margin: 0 0 8px; line-height: 1.25; }
.product-listing-item-title a { color: var(--sp-grape); text-decoration: none; }
.product-listing-item-title a:hover { color: var(--sp-lilac); text-decoration: underline; }
.product-listing-item .price { color: var(--sp-clay); font-weight: 600; margin: 0 0 8px; }
.product-listing-item .price-old { color: var(--sp-muted); text-decoration: line-through; font-weight: 400; }
.product-listing-item-shortdesc { opacity: .9; font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.product-listing-item .rating { margin-bottom: 6px; }
.product-listing-item .rating .fa-star { color: var(--sp-gold); }
.product-listing-item .rating .fa-star-o { color: var(--sp-line); }
.product-listing-item .button-group { display: flex; gap: 6px; }
.product-listing-item .button-group .btn-primary { flex: 1 1 auto; }

.sp-pagination { overflow: hidden; padding: 8px 4px 20px; }
.sp-pagination .pull-right { color: var(--sp-muted); font-size: 13px; padding-top: 8px; }

@media (max-width: 767px) {
  .category-header { padding: 36px 20px; }
  .category-page-header { font-size: 32px; }
  .product-listing-item { width: 100%; }
}

/* ---- Search results (product/search) — ports _search + _notice -------- */
/* Reuses the category listing (.product-listing / .sp-listing-toolbar /
   .sp-pagination) + the internal .sp-page-header / .sp-breadcrumbs. Adds the
   live branded empty-state "notice" (ports _notice.scss + typography .type). */
#product-search #content { background: #fff; }
.category-page-notice { padding: 2.4em 0 3em; }
.category-page-notice .type {
  display: inline-block; font-family: 'Fira Sans', sans-serif; font-weight: 800;
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--sp-ink); border-bottom: 1px solid; padding: .3em 0; margin-bottom: 1.6em;
}
.notice { margin-bottom: 1em; padding: 1.5em 4%; background: var(--sp-gold); color: #fff; }
.notice--lilac { background: #dcd5e3; color: #4a4a4a; }
h2.notice, .notice h2 {
  font-family: 'Prociono', Georgia, serif; font-size: 40px; font-weight: 400;
  margin: 0; line-height: 1.15; color: #4a4a4a;
}
.notice-subtext {
  font-family: 'Prociono', Georgia, serif; font-style: italic; font-size: 20px;
  color: var(--sp-ink); margin: .4em 0 0;
}
@media (max-width: 767px) {
  h2.notice, .notice h2 { font-size: 28px; }
  .notice-subtext { font-size: 17px; }
}

/* ---- Shop-by aspect pages (product/shopby/*) — ports _stillpoint-aspect-pages.scss */
.aspect-header {
  font-family: 'Prociono', Georgia, serif; font-size: 48px; line-height: 1.1;
  margin: 0 0 .35em; color: var(--sp-grape); display: flex; align-items: center; gap: .28em;
}
.aspect-header .sp-facet-icon { font-size: .92em; flex: 0 0 auto; }
.aspect-header--orange { color: var(--sp-orange); }
.aspect-header--red    { color: var(--sp-red); }
.aspect-header--gold   { color: #e1a83c; }   /* matches live therapeutic header rgb(225,168,60) */
.aspect-header--yellow { color: #d9a300; }   /* shop-by yellow is too light on white; readable amber (no live ref) */
.aspect-header--blue   { color: var(--sp-blue); }
.aspect-header--grape  { color: var(--sp-grape); }
.aspect-intro { max-width: 830px; margin-bottom: 1.6em; }
.aspect-intro p { margin-bottom: 1em; }

.list-refine-content {
  background: #f5f5f5; border-radius: 10px; padding: 16px 20px; margin-bottom: 2em;
  box-shadow: inset 2px 2px 4px #eee;
  column-count: 3; column-gap: 26px;
}
.refine-term { display: block; break-inside: avoid; padding: 5px 0; font-size: 15px; }
.refine-term a { color: var(--sp-grape); text-decoration: none; }
.refine-term a:hover, .refine-term a:focus { color: var(--sp-lilac); text-decoration: underline; }

.aspects-listing { margin-top: .5em; }
.aspects-listing .definitions .definition {
  margin-bottom: 1.1em; padding-bottom: 1.1em; border-bottom: 1px solid var(--sp-line);
}
.aspects-listing dt { font-family: 'Prociono', Georgia, serif; font-size: 20px; margin-bottom: .15em; }
.aspects-listing dt a { color: var(--sp-lilac); text-decoration: none; }
.aspects-listing dt a:hover, .aspects-listing dt a:focus { color: var(--sp-grape); }
.aspects-listing dd { margin: 0; color: var(--sp-ink); line-height: 1.6; }

@media (min-width: 768px) and (max-width: 991px) {
  .list-refine-content { column-count: 2; }
}
@media (max-width: 767px) {
  .aspect-header { font-size: 30px; }
  .list-refine-content { column-count: 1; }
}

/* ---- Information / content pages (information/information) — ports
   _stillpoint-typography.scss (.sp-typographic-content) + the plain
   .aspect-header (charcoal #333, no accent/icon, matching the live info page:
   Our Story / FAQ). Live drops the breadcrumb here; content keeps the left
   shop-by sidebar (col-sm-9). Body links are lilac #8d79a0 (verified live). */
#information-information #content { background: #fff; }
#information-information .aspect-header { color: #333; margin: 0 0 .25em; padding: 0; border: 0; }
.sp-typographic-content { font-family: 'Fira Sans', sans-serif; font-size: 16px; text-align: left; color: #333; }
.sp-typographic-content:after { content: ""; display: table; clear: both; }
.sp-typographic-content p { font-size: 1.05em; line-height: 1.5; margin: 0 0 1.5em; }
.sp-typographic-content h1 { font-family: 'Prociono', Georgia, serif; font-size: 2.6em; font-weight: 700; line-height: 1.1; margin: 0 0 .5em; color: #333; }
.sp-typographic-content h2 { font-family: 'Prociono', Georgia, serif; font-size: 1.3em; font-style: italic; font-weight: 400; line-height: 1.4; margin: 0 0 1.1em; color: #333; }
.sp-typographic-content h3 { font-family: 'Prociono', Georgia, serif; font-size: 1.4em; font-weight: 400; line-height: 1.3; margin: 0 0 .4em; color: #333; }
.sp-typographic-content ul, .sp-typographic-content ol { margin: 0 0 1em 2em; }
.sp-typographic-content ul { list-style: disc; }
.sp-typographic-content ol { list-style: decimal; }
.sp-typographic-content li { margin-bottom: .4em; }
.sp-typographic-content hr { width: 3em; border: 0; border-top: 1px solid #ddd; margin: 1.5em 0; }
.sp-typographic-content a { color: var(--sp-lilac); text-decoration: none; }
.sp-typographic-content a:hover, .sp-typographic-content a:focus { color: var(--sp-grape); text-decoration: underline; }
.sp-typographic-content img { max-width: 100%; height: auto; }
.sp-typographic-content img[align="left"] { margin: 0 1em 1em 0; }
.sp-typographic-content img[align="right"] { margin: 0 0 1em 1em; }
.sp-typographic-content p.date, .sp-typographic-content p.author { font-family: 'Prociono', Georgia, serif; font-style: italic; }
.sp-typographic-content .type {
  display: inline-block; font-family: 'Fira Sans', sans-serif; font-weight: 800;
  font-size: .7em; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid; padding: .3em 0; margin-bottom: 2em;
}
@media (max-width: 639px) {
  .sp-typographic-content h1 { font-size: 1.8em; }
  .sp-typographic-content h2 { font-size: 1.2em; }
}

/* ---- Contact (information/contact) — ports _stillpoint-contact-page.scss.
   The live contact page is info-only (NO enquiry form / map / store-locations
   accordion): charcoal .aspect-header + a .contact-info flex row of Address /
   Telephone / Email. The stock OC3 form was intentionally dropped to match. */
#information-contact #content { background: #fff; }
#information-contact .aspect-header { color: #333; margin: 0 0 .5em; padding: 0; border: 0; }
.contact-info { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 16px; margin-top: 1em; }
.contact-info > div { padding: 0 20px 20px 0; white-space: nowrap; }
.contact-info h3 { font-family: 'Prociono', Georgia, serif; font-weight: 700; font-size: 1.5em; color: #333; margin: 0 0 10px; }
.contact-info address { font-family: 'Prociono', Georgia, serif; font-style: italic; color: #333; line-height: 1.5; margin: 0; }
.contact-info p { color: #333; margin: 0; }
.contact-info a { color: var(--sp-lilac); text-decoration: none; }
.contact-info a:hover, .contact-info a:focus { color: var(--sp-grape); text-decoration: underline; }
@media (max-width: 767px) {
  .contact-info { display: block; }
  .contact-info > div { padding: 0 0 18px; white-space: normal; }
}

/* ---- Specials / Sale (product/special) — ports _stillpoint-specials.scss.
   Live special page: charcoal .aspect-header, the branded 2-up .product-listing
   when populated (reuses the category/search blocks), and a plain empty message
   + right-aligned lilac CONTINUE button when there are no products on sale. */
#product-special #content { background: #fff; }
#product-special .aspect-header { color: #333; margin: 0 0 .5em; padding: 0; border: 0; }
#product-special .sp-empty-text { font-size: 16px; color: #333; margin: 1.2em 0 2em; }
#product-special .buttons { border-top: 1px solid var(--sp-line); padding-top: 1.4em; margin-top: 1em; }
.sp-btn-continue {
  background: var(--sp-lilac); border: 1px solid var(--sp-lilac); color: #fff;
  text-transform: uppercase; letter-spacing: .04em; padding: 10px 30px; border-radius: 3px;
}
.sp-btn-continue:hover, .sp-btn-continue:focus { background: var(--sp-grape); border-color: var(--sp-grape); color: #fff; }
/* Active RBD sale banners (.discounts-listing / .product-discount-info) — the
   live shows these when a discount is in-window; the stock OC3 special
   controller passes no discount data, so they only appear if wired later. */
.product-discount-info { border-left: 2px solid var(--sp-lilac); margin-bottom: 2em; padding-left: 20px; max-width: 80%; }
.product-discount-info h3 { font-family: 'Prociono', Georgia, serif; font-size: 2em; color: var(--sp-lilac); margin-bottom: 0; }
.product-discount-info p { font-size: .9em; line-height: 1.5; }
.product-discount-info p.valid { color: var(--sp-lilac); }

/* ---- Shop-by chemistry filter (product/shopby/chemistry) — ports _stillpoint-shop-by-chemistry.scss */
/* Two stacked filter forms (chemical family / component), each row a bordered
   .component-wrap box with a full-width select + min/max range sliders (blue
   #548ab9 fill, matching the live). Live uses a dual-handle slider; here it's
   two HTML5 range inputs laid Min-left / Max-right (dual-handle = deferred). */
#product-shopby-chemistry .refine-search-bar form:not(:last-of-type) {
  margin: 0 0 2em; padding: 0 0 2em; border-bottom: 1px solid var(--sp-line);
}
.chemistry-subhead { font-family: 'Prociono', Georgia, serif; font-size: 24px; color: var(--sp-grape); margin: 0 0 .25em; }
.chemistry-form > .text-muted { margin-bottom: 1em; }
.component-wrap {
  padding: 1em 1.1em; margin: .6em 0; border: 1px solid #ddd;
  background: rgba(255,255,255,.75); border-radius: 4px;
}
.component-wrap .form-control { margin-bottom: 1em; }
.component-wrap__range-fields { display: flex; gap: 22px; }
.component-wrap__range-field-item { flex: 1 1 0; min-width: 0; }
.component-wrap__range-field-item label { display: block; font-size: 13px; color: var(--sp-ink); font-weight: 600; margin-bottom: 4px; }
.chemistry-slider { width: 100%; accent-color: var(--sp-blue); }
.chemistry-controls { margin-top: 1em; }
.chemistry-controls .btn { min-width: 150px; }
.chemistry-controls .chemistry-add { background: var(--sp-lilac); border-color: var(--sp-lilac); color: #fff; }
.chemistry-controls .chemistry-add:hover, .chemistry-controls .chemistry-add:focus { background: var(--sp-grape); border-color: var(--sp-grape); color: #fff; }
@media (max-width: 767px) {
  .component-wrap__range-fields { flex-direction: column; gap: 10px; }
  .chemistry-controls .btn { display: block; width: 100%; margin: 0 0 8px; }
}

/* ---- Workshop (product/workshop, custom) — ports _stillpoint-workshops.scss.
   Charcoal .aspect-header + intro, then a plain studies list (NOT cards):
   moss sans-serif h3 links (→ lilac hover), italic-moss dates, lilac Learn More.
   (The live equivalent is a homepage/nav module; this is our full-page route
   styled with the live's workshop vocabulary.) */
#product-workshop #content { background: #fff; }
#product-workshop .aspect-header { color: #333; margin: 0 0 .35em; padding: 0; border: 0; }
.sp-lead { font-size: 17px; color: var(--sp-grape); max-width: 820px; margin: 6px 0 22px; }
.sp-workshops { margin: 10px 0 30px; }
.workshop-list-item { margin: 30px 0; }
.workshop-list-item h3 { margin: 0 0 2px; font-family: 'Fira Sans', sans-serif; font-size: 1.5em; line-height: 1.1; }
.workshop-list-item h3 a { color: var(--sp-moss); transition: color .2s ease; }
.workshop-list-item h3 a:hover, .workshop-list-item h3 a:focus { color: var(--sp-lilac); }
.workshop-list-item .workshop-thumb { margin-bottom: 10px; }
.workshop-list-item p { margin: 0; }
.workshop-date { font-style: italic; color: var(--sp-moss); font-weight: 400; font-size: 15px; margin: 5px 0; }
.workshop-item-cta { margin-top: 12px; }

/* ---- Cart (checkout/cart) — ports _cart.scss to the live layout ------- */
.page-cart #content { background: #fff; }
.sp-breadcrumbs { list-style: none; margin: 8px 0 16px; padding: 0 0 12px; font-size: 13px; border-bottom: 1px solid var(--sp-line); }
.sp-breadcrumbs li { display: inline; }
.sp-breadcrumbs li a { color: var(--sp-muted); }
.sp-breadcrumbs li:not(:last-child) a:hover { color: var(--sp-lilac); }
.sp-breadcrumbs li:not(:last-child):after { content: "\203A"; margin: 0 .45em; color: var(--sp-muted); }
.sp-page-header { font-family: 'Prociono', Georgia, serif; font-size: 40px; line-height: 1.1; color: var(--sp-lilac); margin: 0 0 22px; border: 0; padding: 0; }
.sp-page-header small { font-family: 'Fira Sans', sans-serif; font-size: 16px; color: var(--sp-muted); }

.cart-table-layout { width: 100%; margin-bottom: 8px; border-top: 2px solid var(--sp-lilac); }
.cart-table-layout thead th {
  font-family: 'Fira Sans', sans-serif; text-transform: uppercase; letter-spacing: .05em;
  font-size: 12px; font-weight: 600; color: var(--sp-grape);
  padding: 12px 1% 12px 0; border-bottom: 2px solid var(--sp-line); text-align: left;
}
.cart-table-layout thead .column-price, .cart-table-layout thead .column-total { text-align: right; }
.cart-table-layout thead .column-quantity { text-align: center; }
.cart-table-layout tbody td { padding: 16px 1% 16px 0; border-bottom: 1px solid var(--sp-line); vertical-align: middle; }
.cart-table-layout .column-image { width: 10%; }
.cart-table-layout .column-image img { max-width: 80px; height: auto; border: 1px solid var(--sp-line); background: #fff; }
.cart-table-layout .column-name { width: 40%; }
.cart-table-layout .column-name strong { font-weight: 600; }
.cart-table-layout .column-name a { color: var(--sp-lilac); }
.cart-table-layout .column-name a:hover { color: var(--sp-grape); text-decoration: underline; }
.cart-table-layout .cart-options { margin: 6px 0 0; font-size: 13px; color: var(--sp-muted); }
.cart-table-layout .cart-options span { display: block; }
.warning-outofstock { color: var(--sp-red); font-weight: 700; }
.cart-table-layout .column-price { text-align: right; white-space: nowrap; }
.cart-table-layout .column-quantity { text-align: center; white-space: nowrap; }
.cart-table-layout .column-total { text-align: right; white-space: nowrap; font-weight: 600; color: var(--sp-grape); }

.cart-qty-group { display: inline-flex; align-items: stretch; }
.cart-qty-group input[type="text"] { width: 54px; text-align: center; border: 1px solid var(--sp-line); border-radius: 3px 0 0 3px; height: 38px; padding: 0 6px; margin: 0; }
.cart-qty-group .btn { height: 38px; border-radius: 0; border: 1px solid var(--sp-line); border-left: 0; margin: 0; box-shadow: none; }
.cart-qty-group .btn-cart-update { background: var(--sp-lilac); color: #fff; border-color: var(--sp-lilac-d); }
.cart-qty-group .btn-cart-update:hover { background: var(--sp-grape); color: #fff; }
.cart-qty-group .btn-cart-remove { background: #fff; color: var(--sp-clay); border-radius: 0 3px 3px 0; }
.cart-qty-group .btn-cart-remove:hover { background: var(--sp-clay); color: #fff; }

.cart-totals-wrap { overflow: hidden; margin: 18px 0 8px; }
.table-totals { width: 340px; max-width: 100%; float: right; border-top: 0; margin-bottom: 0; }
.table-totals td { padding: 8px 0; border: 0; }
.table-totals .column-total-title { text-align: right; font-weight: 600; color: var(--sp-grape); padding-right: 18px; }
.table-totals .column-total { text-align: right; white-space: nowrap; width: 120px; }
.table-totals tr:last-child .column-total-title,
.table-totals tr:last-child .column-total { font-family: 'Prociono', Georgia, serif; font-size: 20px; color: var(--sp-lilac); border-top: 2px solid var(--sp-line); padding-top: 12px; }
.table-totals tr.negative .column-total { color: #3f5f2a; }

.cart-buttons { clear: both; padding: 16px 0 26px; border-top: 1px solid var(--sp-line); }
.btn-continue-shopping {
  background: #e6e1ea; color: var(--sp-grape); border: 1px solid var(--sp-lilac);
  font-family: 'Fira Sans', sans-serif; font-weight: 600; padding: 12px 22px;
}
.btn-continue-shopping:hover, .btn-continue-shopping:focus { background: var(--sp-lilac); color: #fff; }
.btn-checkout {
  background: var(--sp-grape); color: #fff; border: 0; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; padding: 12px 28px; font-family: 'Fira Sans', sans-serif;
}
.btn-checkout:hover, .btn-checkout:focus { background: var(--sp-grape-d); color: #fff; }

.cart-next { clear: both; margin-top: 24px; }
.cart-next h2 { font-family: 'Prociono', Georgia, serif; color: var(--sp-grape); font-size: 24px; }

/* ---- Checkout (checkout/checkout) — brand the OC3 accordion ----------- */
/* The live site uses a bespoke multi-step checkout engine; OC3 ships a
   one-page AJAX accordion. We brand the accordion (no markup/JS/controller
   changes — money path untouched); reproducing the custom stepped flow is a
   separate scoped decision (see tracker findings #4). */
#checkout-checkout .panel-group .panel { border: 1px solid var(--sp-line); border-radius: 4px; margin-bottom: 12px; box-shadow: none; }
#checkout-checkout .panel-heading { background: var(--sp-promo); padding: 0; border-bottom: 1px solid var(--sp-line); }
#checkout-checkout .panel-title { margin: 0; font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 15px; }
#checkout-checkout .panel-title, #checkout-checkout .panel-title > a { color: var(--sp-grape); display: block; padding: 14px 18px; text-decoration: none; }
#checkout-checkout .panel-title > a:hover, #checkout-checkout .panel-title > a:focus { color: var(--sp-lilac); }
#checkout-checkout .panel-body { padding: 20px 18px; }
#checkout-checkout .panel-body h2 { font-family: 'Prociono', Georgia, serif; color: var(--sp-lilac); font-size: 22px; margin-top: 0; }
#checkout-checkout .panel-body legend { color: var(--sp-grape); font-family: 'Fira Sans', sans-serif; font-weight: 600; border-bottom-color: var(--sp-line); }
#checkout-checkout #button-confirm { background: var(--sp-grape); border: 0; color: #fff; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 12px 28px; }
#checkout-checkout #button-confirm:hover, #checkout-checkout #button-confirm:focus { background: var(--sp-grape-d); color: #fff; }

/* ---- Login / Register (account/login, account/register) --------------- */
/* Live shows the left shop-by sidebar + a wide two-column content area with
   no right account-nav column; the theme templates drop {{ column_right }} on
   these logged-out pages so the content spans col-sm-9. */
.page-account #content { background: #fff; }
.page-login .login-form-wrapper { margin-top: 6px; }
.page-login .well.login-box { background: #f7f7f7; border: 1px solid var(--sp-line); border-radius: 4px; padding: 24px; min-height: 260px; box-shadow: none; }
.page-login .login-box h2 { font-family: 'Prociono', Georgia, serif; color: var(--sp-lilac); font-size: 24px; margin-top: 0; }
.page-login .login-box .btn-primary { margin-top: 6px; }
.page-login .login-forgotten { display: inline-block; margin-top: 8px; color: var(--sp-lilac); }
.page-register legend { font-family: 'Fira Sans', sans-serif; font-weight: 600; color: var(--sp-grape); border-bottom-color: var(--sp-line); }
.page-register .form-horizontal .control-label { color: var(--sp-ink); }
.page-register .buttons { padding: 14px 0 26px; }

/* ---- Account pages (account/*) — dashboard, orders, address, wishlist,
   voucher, etc. Like login/register these drop the right account-nav column
   to match live (col-sm-9, left shop-by sidebar only) and use serif-lilac
   .section-title headings over minimal link lists / branded data tables. */
.page-account #content { background: #fff; }
.sp-account-dashboard { margin-top: 4px; }
.sp-account-block { margin-bottom: 1.8em; }
.section-title {
  font-family: 'Prociono', Georgia, serif; color: var(--sp-lilac);
  font-size: 24px; font-weight: 400; line-height: 1.15; margin: 0 0 .5em; padding: 0; border: 0;
}
.sp-account-links { list-style: none; margin: 0; padding: 0; max-width: 420px; }
.sp-account-links li { padding: 7px 0; border-bottom: 1px solid var(--sp-line); }
.sp-account-links li:last-child { border-bottom: 0; }
.sp-account-links a { color: var(--sp-lilac); text-decoration: none; }
.sp-account-links a:hover, .sp-account-links a:focus { color: var(--sp-grape); text-decoration: underline; }
.notice--success { background: #dff0d8; color: #3c763d; }
.notice--warning { background: #fcf8e3; color: #8a6d3b; }
/* Account forms (address edit, edit-account, password) — brand the horizontal
   form the same way as register: grape legends, ink labels. */
.page-account .form-horizontal .control-label { color: var(--sp-ink); }
.page-account fieldset legend { font-family: 'Fira Sans', sans-serif; font-weight: 600; color: var(--sp-grape); border-bottom-color: var(--sp-line); }
.page-account .buttons { padding: 14px 0 26px; }
/* Address book: the Edit/Delete pair needs a little more room than the order
   View button. */
.sp-address-list .sp-order-card__action { width: auto; white-space: nowrap; }
.sp-address-list .sp-order-card__action .btn { margin-left: 4px; }
/* Manufacturer / brand index (product/manufacturer) — unused feature (0 brands)
   but branded for consistency: white content, lilac jump-index, grape links. */
#product-manufacturer #content { background: #fff; }
.manufacturer-index a { color: var(--sp-lilac); text-decoration: none; margin-right: 14px; }
.manufacturer-index a:hover, .manufacturer-index a:focus { color: var(--sp-grape); }
.manufacturer-item { padding: 6px 0; }
.manufacturer-item a { color: var(--sp-grape); text-decoration: none; }
.manufacturer-item a:hover, .manufacturer-item a:focus { color: var(--sp-lilac); }
/* Compare (product/compare) — the branded .sp-table with product columns; the
   first column is a row-label, section thead rows are grape. */
#product-compare #content { background: #fff; }
.sp-table--compare thead td { font-size: 13px; }
.sp-table--compare tbody td:first-child { font-weight: 600; color: var(--sp-grape); white-space: nowrap; }
.sp-table--compare td { vertical-align: top; }
.sp-table--compare img { max-width: 100px; height: auto; }
.sp-table--compare a strong { color: var(--sp-lilac); }
.sp-table--compare .btn-block { margin-bottom: 6px; }
/* Sitemap (information/sitemap) — two-column nested link lists on the
   typographic content style (lilac links, disc lists). */
#information-sitemap #content { background: #fff; }
.sp-sitemap ul { list-style: disc; }
.sp-sitemap > .row > div > ul { margin-left: 1.2em; }
.sp-sitemap li { margin-bottom: .35em; }
@media (max-width: 767px) {
  /* col-sm-6 columns stack; tighten the nested-list indent so deep branches
     can't overflow a narrow phone. */
  .sp-sitemap ul { margin-left: 1.1em; }
  .sp-sitemap > .row > div > ul { margin-left: .6em; }
}
/* Success (common/success) + 404 (error/not_found) — internal pages: white
   content, typographic message / branded lilac notice empty-state. */
#common-success #content, #error-not-found #content { background: #fff; }
.notice--lilac p { margin: 0; }

/* Shared branded data table (ports _table-treatments + base _tables): 2px
   lilac top border, uppercase grape thead, hairline rows. Used by order info
   (#19), wish list (#21), address book (#20), compare (#24), transactions. */
.sp-table { width: 100%; border-collapse: collapse; margin: 0 0 24px; background: #fff; border-top: 2px solid var(--sp-lilac); }
.sp-table thead td, .sp-table thead th {
  font-family: 'Fira Sans', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; font-size: 12px; color: var(--sp-grape);
  padding: 12px 10px; border-bottom: 1px solid var(--sp-line); background: #faf9fb; text-align: left;
}
.sp-table tbody td { padding: 12px 10px; border-bottom: 1px solid var(--sp-line); vertical-align: top; }
.sp-table tbody tr:last-child td { border-bottom: 0; }
.sp-table tfoot td { padding: 6px 10px; border: 0; }
.sp-table tfoot b, .sp-table tbody b { color: var(--sp-grape); }
.sp-table small { color: var(--sp-muted); }
.sp-table--meta thead td { font-size: 12px; }
.sp-table .btn { padding: 4px 9px; }
.sp-table--wishlist td.text-center { width: 90px; }
.sp-table--wishlist td.text-center img { max-width: 72px; height: auto; border: 1px solid var(--sp-line); background: #fff; padding: 2px; }

/* Order history — live's alternating-lilac article cards (not a bordered
   table): Order # / Status head, a slim inner field table, a lilac View btn. */
.sp-order-history { margin: 0 0 1em; }
.sp-order-card { background: #f4f1f7; padding: 14px 18px; margin-bottom: 12px; border-left: 3px solid var(--sp-lilac); }
.sp-order-card:nth-child(2n) { background: #ece7f0; }
.sp-order-card__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; color: var(--sp-ink); }
.sp-order-card__head strong { color: var(--sp-grape); }
.table--slim { width: 100%; margin: 0; border-collapse: collapse; }
.table--slim td { padding: 4px 0; border: 0; vertical-align: middle; }
.table--slim strong { color: var(--sp-grape); font-weight: 600; }
.sp-order-card__action { text-align: right; vertical-align: middle; white-space: nowrap; width: 120px; }
@media (max-width: 767px) {
  .sp-order-card__head { display: block; }
  .table--slim td { display: block; padding: 2px 0; }
  .sp-order-card__action { text-align: left; width: auto; }
  .sp-order-card__action .btn { margin-top: 6px; }
}

/* ---- Full-width (full-bleed) layout — matches the live site ----------- */
/* The live storefront is edge-to-edge (no centered max-width container, sidebar
   flush to the left edge). Override Bootstrap's fixed .container widths. */
/* NB: no `overflow-x:hidden` on html/body — it silently breaks position:sticky
   on the sidebar. Horizontal overflow is instead prevented at the source
   (min-width:0 on the flex columns + clamped slideshow below). */
.container { width: 100%; max-width: 100%; padding-left: 15px; padding-right: 15px; }
/* Sidebar flush to the very left edge; content flows full-width beside it. */
#column-left { padding-left: 0; padding-right: 0; }
/* Make the main page row equal-height so the grape sidebar column runs the
   full height (like the live site's full-height left nav). Scoped to the
   top-level page row — nested product .rows are unaffected. The masthead row
   keeps align-items:center via its own higher-specificity rule. */
.container > .row { display: flex; flex-wrap: wrap; }
/* Flex children must be allowed to shrink below their content's intrinsic
   width, or a wide child (the slideshow swiper sets a huge internal width for
   looping) forces the whole column — and page — massively wide. */
.container > .row > * { min-width: 0; }
#content, #column-left { min-width: 0; }
/* Keep the slideshow clipped to its column at every width. */
.swiper-viewport { max-width: 100%; overflow: hidden; }
.swiper-viewport img, #content img { max-width: 100%; height: auto; }
#column-left { background: var(--sp-grape); }
/* Homepage is fully grape (content + under/left of the sidebar), matching live. */
#common-home { background: var(--sp-grape); }
#common-home #content { min-height: 1px; }
/* Drop the stock slideshow's white frame so the hero sits on grape, and let
   the hero banner span the full content width (module resized to the banner's
   native aspect so there's no white side-padding). */
#common-home .swiper-viewport, #common-home .swiper-container { border: 0 !important; background: transparent !important; box-shadow: none !important; }
#common-home .swiper-viewport img { width: 100%; height: auto; display: block; }
/* Give the masthead + utility inner a little breathing room from the edges. */
header.sp-masthead .container, .sp-utility .container { padding-left: 24px; padding-right: 24px; }

/* Internal pages: gutter between the flush left sidebar and the content so
   listings/forms/tables don't hug the coloured nav. Home stays full-bleed
   grape (excluded). Full-bleed banners (.category-header) break back out to
   the sidebar edge with a matching negative margin — desktop only (on mobile
   #content spans the viewport, so the breakout is neutralised to avoid
   horizontal overflow). */
.container:not(#common-home) > .row > #content { padding-left: 30px; padding-right: 30px; }
.container:not(#common-home) .category-header { margin-left: -30px; margin-right: -30px; }

/* ---- Responsive ------------------------------------------------------- */
/* Tablet/desktop: keep the col-sm-3 sidebar + col-sm-9 content (sm = >=768). */

/* Mobile (xs, < 768): sidebar stacks above content full-width so nav stays
   reachable; masthead + utility bar center. (The aside's hidden-xs is removed
   in column_left.twig so the coloured shop-by nav is available on phones.) */
@media (max-width: 767px) {
  header.sp-masthead .row { display: block; text-align: center; }
  header.sp-masthead .col-sm-3, header.sp-masthead .col-sm-6 { width: 100%; }
  #logo { text-align: center; margin-bottom: 10px; }
  #logo img { max-height: 54px; display: inline-block; }
  .sp-search-wrap { margin: 8px 0; }
  .sp-icons { justify-content: center; margin-top: 8px; }
  .sp-utility ul { text-align: center; }
  .sp-utility li { padding: 0 6px; }
  #column-left { width: 100%; float: none; margin-bottom: 0; }
  #common-home #content, #content { padding-left: 15px; padding-right: 15px; }
  .sp-ethical-banner { margin-left: -15px; margin-right: -15px; }
  .sp-ethical-banner h2 { font-size: 30px; }
  .sp-oilby-item { padding: 14px 6px; }
  .sp-oilby-icon { font-size: 48px; margin-right: 12px; }
  /* Internal-page gutter tightens on phones; neutralise the banner breakout
     (no negative margin) so full-width elements can't cause horizontal scroll. */
  .container:not(#common-home) > .row > #content { padding-left: 15px; padding-right: 15px; }
  .container:not(#common-home) .category-header { margin-left: 0; margin-right: 0; }
  /* Cart: drop image + unit-price columns so the table fits (matches live). */
  .sp-page-header { font-size: 30px; }
  .cart-table-layout .column-image, .cart-table-layout .column-price { display: none; }
  .cart-table-layout .column-name { width: auto; }
  .table-totals { width: 100%; float: none; }
  .cart-buttons .pull-left, .cart-buttons .pull-right { float: none; display: block; }
  .cart-buttons .btn-continue-shopping, .cart-buttons .btn-checkout { display: block; width: 100%; margin-bottom: 8px; text-align: center; }
}

/* Narrow phones */
@media (max-width: 480px) {
  .sp-announce, .sp-promo { font-size: 12px; }
  .sp-oilby-icon { font-size: 40px; }
  .sp-oilby-content .oilby-title { font-size: 19px; }
}