/* AERA atelier — stylesheet.css (OC defaults + AERA v4-v14) */

body {
  width: 100%;
  height: 100%;
}
h1, h2, h3, h4, h5, h6 {
  color: #444;
}
legend {
  padding: 7px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
label {
  font-size: 12px;
  font-weight: normal;
}
/* Chrome border line */
button:focus {
  outline: none !important;
}
/* container */
#container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  margin-bottom: 300px;
}
/* content */
#content, #column-left, #column-right {
  padding-bottom: 730px;
}
@media (min-width: 576px) {
  #content, #column-left, #column-right {
    padding-bottom: 400px;
  }
}
#alert {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
}
@media (min-width: 992px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1140px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1320px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
#alert .alert {
  margin-bottom: 15px;
}
#alert .alert-primary {
  box-shadow: 0 0 0 5px rgb(var(--bs-primary-rgb), 0.1);
}
#alert .alert-secondary {
  box-shadow: 0 0 0 5px rgb(var(--bs-secondary-rgb), 0.1);
}
#alert .alert-success {
  box-shadow: 0 0 0 5px rgb(var(--bs-success-rgb), 0.1);
}
#alert .alert-warning {
  box-shadow: 0 0 0 5px rgb(var(--bs-warning-rgb), 0.1);
}
#alert .alert-danger {
  box-shadow: 0 0 0 5px rgb(var(--bs-danger-rgb), 0.1);
}
#alert .alert-info {
  box-shadow: 0 0 0 5px rgb(var(--bs-info-rgb), 0.1);
}
#alert .alert-light {
  box-shadow: 0 0 0 5px rgb(var(--bs-light-rgb), 0.1);
}
#alert .alert-dark {
  box-shadow: 0 0 0 5px rgb(var(--bs-dark-rgb), 0.1);
}
/* top */
#top {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 5px;
}
#top ul.list-inline {
  margin-bottom: 0;
}
#top .list-inline-item > a, #top .list-inline-item .dropdown > a {
  font-size: 1.1em;
  color: var(--bs-gray-600);
  line-height: 40px;
  vertical-align: middle;
  padding: 10px 0px 5px 0px;
}
/* logo */
#logo {
  text-align: center;
  margin: 7px 0 7px 0;
}
#logo img {
  max-width: 200px;
}
@media (min-width: 768px) {
  #logo {
    text-align: left;
  }
}
/* search */
#search {
  margin-bottom: 10px;
}
#search .form-control-lg {
  height: 40px;
  font-size: 12px;
  line-height: 20px;
  padding: 0 10px;
}
#search .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 0.57rem 35px;
  text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
  margin-bottom: 10px;
}
#cart .img-thumbnail {
  min-width: 100px;
}
#cart .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 14px 35px;
}
#cart .dropdown-menu {
  background: #eee;
}
#cart .dropdown-menu li {
  min-width: 300px;
}
@media (max-width: 768px) {
  #cart .dropdown-menu li {
    min-width: 100%;
  }
}
/* menu */
#menu {
  background-color: #229ac8;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
  border: 1px solid #1f90bb;
  border-color: #1f90bb #1f90bb #145e7a;
  min-height: 40px;
  border-radius: 4px;
  padding: 0 1rem;
  margin-bottom: 20px;
}
#menu .navbar-nav > li > a {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  padding: 10px 15px 10px 15px;
  background-color: transparent;
}
#menu .navbar-nav > li > a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#menu .dropdown-inner {
  display: flex;
  flex-direction: column;
}
#menu .dropdown-inner ul {
  width: 100%;
  min-width: 200px;
}
@media (min-width: 960px) {
  #menu .dropdown:hover .dropdown-menu {
    display: block;
  }
  #menu .dropdown-inner {
    flex-direction: row;
  }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -200px;
  }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -400px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-2 {
    left: -200px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -400px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -600px;
  }
}
#category {
  float: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .navbar-toggler i {
  color: #fff;
  border-color: #fff;
  font-size: 0.9em;
}
/* default boostrap changes */
div.required .col-form-label:before, div.required .form-label:before {
  content: "* ";
  color: #F00;
  font-weight: bold;
}
.form-switch-lg {
  font-size: 20px;
  min-height: 30px;
  line-height: 30px;
}
.nav-tabs {
  margin-bottom: 15px;
}
.form-check .form-check-input {
  margin-top: 0.25rem;
}
@media (min-width: 768px) {
  .col-form-label {
    text-align: right;
  }
}
/* footer */
footer {
  border: 1px solid #000000;
  position: absolute;
  bottom: -1px;
  width: 100%;
  padding-top: 30px;
  background-color: #303030;
  border-top: 1px solid #ddd;
  color: #e2e2e2;
}
footer hr {
  border-top: none;
  border-bottom: 1px solid #666;
}
footer a {
  color: #ccc;
  text-decoration: none;
}
footer a:hover {
  color: #fff;
}
footer h5 {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
}
/* breadcrumb */
.breadcrumb {
  margin: 0 0 20px 0;
  padding: 8px 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
}
.breadcrumb i {
  font-size: 15px;
}
.breadcrumb > li.breadcrumb-item {
  text-shadow: 0 1px 0 #FFF;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
}
.breadcrumb > li.breadcrumb-item > a {
  text-decoration: none;
}
.breadcrumb > li.breadcrumb-item:after {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  right: -5px;
  width: 29px;
  height: 29px;
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  transform: rotate(-45deg);
}
.breadcrumb > li.breadcrumb-item + li:before {
  content: "";
  padding: 0;
}
.product-thumb {
  border: 1px solid #ddd;
  position: relative;
  height: 100%;
}
.product-thumb .image {
  text-align: center;
}
.product-thumb .image a:hover {
  opacity: 0.8;
}
.product-thumb .description {
  padding: 15px;
  margin-bottom: 45px;
}
.product-thumb .description h4 {
  font-weight: bold;
}
.product-thumb .button {
  display: flex;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.product-thumb .button button {
  width: 33.33%;
  border: none;
  border-top: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-gray-600);
  line-height: 38px;
  text-align: center;
}
.product-thumb .button button:hover {
  color: var(--bs-gray-600);
  background-color: #ddd;
  text-decoration: none;
  cursor: pointer;
}
.product-thumb .button button + button {
  border-left: 1px solid var(--bs-border-color);
}
@media (min-width: 960px) {
  .product-list .product-thumb {
    display: flex;
  }
  .product-list .product-thumb .image {
    flex-direction: column;
    margin-bottom: 0px;
  }
  .product-list .product-thumb .content {
    flex-direction: column;
    flex: 75%;
    position: relative;
  }
  .product-list .product-thumb .button {
    border-left: 1px solid #ddd;
    width: calc(100% -  15px);
    margin-left: 15px;
  }
}
.rating .fa-stack {
  width: 20px;
}
.rating .fa-star {
  color: #999;
  font-size: 15px;
}
.rating .fa-star {
  color: #FC0;
  font-size: 15px;
}
.rating .fa-star + .fa-star {
  color: #E69500;
}
/* product list */
.price {
  color: #444;
}
.price-new {
  font-weight: 600;
}
.price-old {
  color: #dc512c;
  text-decoration: line-through;
}
.price-tax {
  color: #999;
  font-size: 12px;
  display: block;
}
/* blog */
.blog-thumb {
  border: 1px solid #ddd;
  margin-bottom: 15px;
}
.blog-thumb h4 {
  font-weight: bold;
}
.blog-thumb .image {
  text-align: center;
  margin-bottom: 15px;
}
.blog-thumb .image a:hover {
  opacity: 0.8;
}
.blog-thumb .description {
  padding: 15px;
}
/* Theme Custom CSS */
#cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9999;
  opacity: 0.95;
  color: #ecf0f1;
  background: #343a40;
}
#cookie div {
  font-size: 16px;
  color: #FFFFFF;
}


/* ============================================================
   AERA atelier — interior pages stylesheet layer (FINAL, v4)
   Replaces all previous AERA layers in catalog/view/stylesheet/stylesheet.css.
   Works alongside the AERA header.twig drop-in.
   Designed NOT to break OC's #container/footer sticky-footer layout.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@200;300;400;500&display=swap');

:root{
  --aera-rice:#F9F7F3;
  --aera-linen:#E7DFD4;
  --aera-sakura:#EAD7D1;
  --aera-stone:#8C847C;
  --aera-warm-grey:#6E6962;
  --aera-graphite:#3C3935;
  --aera-ink:#1C1A18;
  --aera-brand:#72503D;
  --aera-brand-hover:#5A3F30;
  --aera-hairline:#D9D2C8;
  --font:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  --font-poster:'Anton','Inter',sans-serif;
}

/* ---------- Global typography ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{
  background:var(--aera-rice)!important;color:var(--aera-ink)!important;
  font-family:var(--font)!important;font-weight:300!important;font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
a{color:inherit;text-decoration:none!important;transition:color .25s ease}
a:hover{color:var(--aera-brand)!important}
hr{border-color:var(--aera-hairline)!important}
::selection{background:var(--aera-brand);color:#fff}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h5,.page-title{
  font-family:var(--font)!important;font-weight:200!important;
  color:var(--aera-ink)!important;letter-spacing:-0.012em;line-height:1.15
}
h1,.h1,.page-title{font-size:42px}
h2,.h2{font-size:30px}
h3,.h3{font-size:22px;font-weight:300!important}
h4{font-size:16px;font-weight:300!important;letter-spacing:0}
h5,.h5{font-size:11px;font-weight:400!important;letter-spacing:.32em;text-transform:uppercase;color:var(--aera-stone)!important}

/* ---------- Hide OC stock chrome we replaced via header.twig ---------- */
#top{display:none!important}
.aera-oc-header-hide{display:none!important}

/* ---------- AERA nav widget (rendered by header.twig) ---------- */
.aera-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(249,247,243,.92);
  backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);
  border-bottom:1px solid rgba(217,210,200,.45);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,padding .35s ease;
  margin-bottom:0
}
.aera-nav.is-scrolled{
  background:rgba(249,247,243,.98);
  border-bottom-color:var(--aera-hairline);
  box-shadow:0 8px 24px rgba(28,26,24,.04)
}

.aera-nav-top{padding:22px 48px 10px;display:flex;justify-content:center;align-items:center;transition:padding .35s ease}
.aera-nav.is-scrolled .aera-nav-top{padding:14px 48px 6px}
.aera-nav-logo{display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1;color:var(--aera-ink)!important}
.aera-nav-logo svg{height:46px;width:auto;display:block;fill:currentColor;transition:height .35s ease}
.aera-nav.is-scrolled .aera-nav-logo svg{height:32px}
.aera-brand-sub{font-family:var(--font);font-weight:300;font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--aera-stone);line-height:1}

.aera-nav-bottom{
  padding:8px 48px 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;
  max-width:1640px;margin:0 auto;transition:padding .35s ease
}
.aera-nav.is-scrolled .aera-nav-bottom{padding:4px 48px 12px}
.aera-nav-side{display:flex;align-items:center}
.aera-nav-side--right{justify-self:end;gap:20px}
.aera-nav-center{justify-self:center;display:flex;align-items:center}

/* ---------- Style OC's {{ menu }} inside .aera-nav-center ---------- */
.aera-nav-center #menu,
.aera-nav-center .navbar,
.aera-nav-center .navbar.bg-primary{
  background:transparent!important;background-image:none!important;
  border:0!important;border-radius:0!important;
  padding:0!important;margin:0!important;min-height:auto!important;box-shadow:none!important
}
.aera-nav-center #menu .container,
.aera-nav-center .navbar .container{
  max-width:none!important;padding:0!important;margin:0!important;width:auto!important
}
.aera-nav-center #menu .navbar-collapse,
.aera-nav-center .navbar-collapse{padding:0!important;background:transparent!important}
.aera-nav-center #menu .navbar-nav,
.aera-nav-center .navbar-nav{
  flex-direction:row!important;gap:40px!important;align-items:center;padding:0!important;margin:0!important
}
.aera-nav-center #menu .navbar-nav > li,
.aera-nav-center .navbar-nav > li{list-style:none}
.aera-nav-center #menu .navbar-nav > li > a,
.aera-nav-center .navbar-nav .nav-link,
.aera-nav-center #menu .nav-link,
.aera-nav-center #menu .dropdown-toggle{
  color:var(--aera-ink)!important;background:transparent!important;text-shadow:none!important;
  font-family:var(--font)!important;font-weight:300!important;font-size:11px!important;
  letter-spacing:.32em!important;text-transform:uppercase!important;padding:6px 0!important;border:0!important
}
.aera-nav-center #menu .navbar-nav > li > a:hover,
.aera-nav-center .navbar-nav .nav-link:hover,
.aera-nav-center #menu a:hover{color:var(--aera-brand)!important;background:transparent!important}
.aera-nav-center #menu .navbar-toggler,
.aera-nav-center #menu .navbar-toggler i{color:var(--aera-ink)!important;border:0!important;background:transparent!important}
.aera-nav-center #menu .dropdown-toggle::after{display:none!important}

.aera-nav-center #menu .dropdown-menu,
.aera-nav-center .dropdown-menu{
  background:rgba(249,247,243,.96)!important;border:1px solid var(--aera-hairline)!important;
  border-radius:2px!important;box-shadow:0 16px 40px rgba(28,26,24,.08)!important;
  padding:10px 0!important;margin-top:6px!important
}
.aera-nav-center #menu .dropdown-menu a,
.aera-nav-center .dropdown-menu .dropdown-item{
  color:var(--aera-ink)!important;font-family:var(--font)!important;font-weight:300!important;
  font-size:13px!important;letter-spacing:.04em!important;text-transform:none!important;
  padding:8px 24px!important;background:transparent!important
}
.aera-nav-center #menu .dropdown-menu a:hover,
.aera-nav-center .dropdown-menu .dropdown-item:hover{color:var(--aera-brand)!important;background:transparent!important}

/* ---------- AERA right-side cluster (lang + icons) ---------- */
.aera-lang{position:relative}
.aera-lang-toggle{
  background:transparent;border:0;padding:6px 4px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font);font-weight:300;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--aera-ink);
  transition:color .25s ease
}
.aera-lang-toggle:hover{color:var(--aera-brand)}
.aera-lang-chev{font-size:7px;opacity:.6;transition:transform .2s ease}
.aera-lang[open] .aera-lang-chev{transform:rotate(180deg)}
.aera-lang-menu{
  display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:150px;
  background:rgba(249,247,243,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--aera-hairline);padding:6px 0;z-index:51
}
.aera-lang[open] .aera-lang-menu{display:block}
.aera-lang-menu a{
  display:flex;justify-content:space-between;align-items:center;padding:9px 14px;
  font-family:var(--font);font-weight:300;font-size:12px;color:var(--aera-ink);
  letter-spacing:.04em;text-transform:none
}
.aera-lang-menu a:hover{color:var(--aera-brand)!important;background:transparent}
.aera-lang-code{color:var(--aera-stone);font-size:10px;letter-spacing:.32em;text-transform:uppercase}

.aera-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  color:var(--aera-ink);background:transparent;border:0;padding:0;cursor:pointer;
  transition:color .25s ease
}
.aera-icon-btn:hover{color:var(--aera-brand)}
.aera-icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}

/* Search overlay */
.aera-search-panel{
  position:fixed;top:0;left:0;right:0;z-index:55;
  background:rgba(249,247,243,.98);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1);
  border-bottom:1px solid var(--aera-hairline);
  transform:translateY(-100%);transition:transform .35s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 8px 24px rgba(28,26,24,.06)
}
.aera-search-panel.is-open{transform:translateY(0)}
.aera-search-panel-inner{max-width:1080px;margin:0 auto;padding:36px 48px;display:flex;align-items:center;gap:24px}
.aera-search-panel form{flex:1;display:flex;align-items:center;border-bottom:1px solid var(--aera-ink);padding:0 0 10px}
.aera-search-panel input{
  flex:1;background:transparent;border:0;outline:0;padding:8px 0;
  font-family:var(--font);font-weight:300;font-size:18px;color:var(--aera-ink)
}
.aera-search-panel input::placeholder{color:var(--aera-stone);font-weight:200}
.aera-search-panel button[type=submit]{
  background:transparent;border:0;cursor:pointer;padding:4px 0 4px 16px;
  font-family:var(--font);font-weight:300;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--aera-ink);
  transition:color .25s ease
}
.aera-search-panel button[type=submit]:hover{color:var(--aera-brand)}
.aera-search-close{
  background:transparent;border:0;color:var(--aera-stone);cursor:pointer;padding:6px 4px;
  font-family:var(--font);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;transition:color .25s ease
}
.aera-search-close:hover{color:var(--aera-ink)}
.aera-search-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2}

/* ---------- Page wrapper — DON'T break OC sticky-footer layout ---------- */
#container{margin-bottom:0}
#content{padding-top:32px;padding-bottom:96px;width:100%;max-width:1640px;margin:0 auto!important;padding-left:48px;padding-right:48px}
@media (min-width:576px){#content,#column-left,#column-right{padding-bottom:96px}}
@media (max-width:768px){#content{padding-left:20px;padding-right:20px}}

/* Hide left/right sidebar (we use top filter bar instead) */
#column-left,#column-right{display:none!important}

/* H1 of page */
#content h1,main h1,.page-title{
  font-family:var(--font)!important;font-weight:200!important;font-size:48px!important;
  line-height:1.1!important;letter-spacing:-0.018em!important;color:var(--aera-ink)!important;
  margin:8px 0 16px!important
}
#content > p:first-of-type,#content > div > p:first-of-type{
  font-family:var(--font)!important;font-weight:300!important;font-style:normal!important;
  font-size:15px!important;color:var(--aera-graphite)!important;max-width:60ch!important;line-height:1.7!important;
  margin:0 0 32px!important
}

/* ---------- Breadcrumb ---------- */
.breadcrumb,ul.breadcrumb{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--aera-hairline)!important;
  border-radius:0!important;padding:18px 0 12px!important;margin:0 0 32px!important;
  font-family:var(--font)!important;font-weight:300!important;font-size:11px!important;
  letter-spacing:.32em!important;text-transform:uppercase!important
}
.breadcrumb i,.breadcrumb .fa-home,.breadcrumb .fas,.breadcrumb .fa{display:none!important}
.breadcrumb > li.breadcrumb-item:after{display:none!important}
.breadcrumb > li.breadcrumb-item,.breadcrumb-item,.breadcrumb a,.breadcrumb li a{
  color:var(--aera-stone)!important;text-shadow:none!important;padding:0 18px 0 0!important;white-space:nowrap
}
.breadcrumb a:hover,.breadcrumb li a:hover{color:var(--aera-brand)!important}
.breadcrumb-item.active,.breadcrumb-item:last-child,.breadcrumb li:last-child{color:var(--aera-ink)!important}
.breadcrumb-item + .breadcrumb-item::before{color:var(--aera-stone)!important;content:"·"!important;padding:0 12px 0 0!important}

/* ---------- Product Compare — remove definitively (all known variants) ---------- */
.btn-compare,
a.btn-compare,
button.btn-compare,
a[onclick*="compare"],
button[onclick*="compare"],
a[href*="product/compare"],
[id*="compare-total"],
[id="compare-total"]{display:none!important;visibility:hidden!important;width:0!important;height:0!important;padding:0!important;margin:0!important;overflow:hidden!important}

/* ---------- Filter row (Sort / Show) ---------- */
.product-filter,.row.product-filter,#content .product-filter,
#content .row.mb-3:has(label[for="input-sort"]){
  background:transparent!important;border:0!important;
  border-top:1px solid var(--aera-hairline)!important;border-bottom:1px solid var(--aera-hairline)!important;
  padding:18px 0!important;margin:16px 0 32px!important
}
.product-filter label,.product-filter .control-label,
.col-form-label{
  font-family:var(--font)!important;font-weight:400!important;font-size:11px!important;
  letter-spacing:.32em!important;text-transform:uppercase!important;color:var(--aera-stone)!important;
  margin:0 8px 0 0!important
}
.product-filter select,#input-sort,#input-limit{
  background:transparent!important;border:1px solid var(--aera-hairline)!important;border-radius:2px!important;
  padding:8px 14px!important;font-family:var(--font)!important;font-weight:300!important;font-size:12px!important;
  color:var(--aera-ink)!important;box-shadow:none!important;height:auto!important
}

/* List / Grid view buttons — restore FA icons */
#list-view,#grid-view,#button-list,#button-grid{
  background:transparent!important;color:var(--aera-stone)!important;border:1px solid var(--aera-hairline)!important;
  padding:6px 10px!important;width:auto!important;height:auto!important;border-radius:2px!important;
  font-size:14px!important;line-height:1!important
}
#list-view i,#grid-view i,#button-list i,#button-grid i{font-size:14px!important;color:inherit!important;display:inline-block!important}
#list-view:hover,#grid-view:hover{color:var(--aera-ink)!important;border-color:var(--aera-ink)!important;background:transparent!important}

/* ---------- Product grid — only target the listing row (not product detail row) ---------- */
.row > .product-layout{flex:0 0 25%!important;max-width:25%!important;padding:0 14px!important;margin-bottom:48px!important}
@media (max-width:1200px){.row > .product-layout{flex:0 0 33.333%!important;max-width:33.333%!important}}
@media (max-width:768px){.row > .product-layout{flex:0 0 50%!important;max-width:50%!important;padding:0 8px!important;margin-bottom:32px!important}}

/* Product card chrome stripped */
.product-thumb{
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  overflow:visible!important;padding:0!important;height:auto!important;
  display:flex!important;flex-direction:column!important;transition:none!important
}
.product-thumb:hover{border:0!important;box-shadow:none!important}
.product-thumb .image{
  position:relative;aspect-ratio:4/5;overflow:hidden!important;background:var(--aera-linen)!important;
  border:0!important;padding:0!important;margin:0 0 16px!important;text-align:center
}
.product-thumb .image a{display:block;width:100%;height:100%}
.product-thumb .image img{
  width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover!important;object-position:50% 15%!important;display:block!important;
  transition:transform .7s ease;border-radius:0!important;border:0!important
}
.product-thumb:hover .image img,.product-thumb .image a:hover img{transform:scale(1.028);opacity:1!important}
.product-thumb .description,.product-thumb .content,.product-thumb .caption{
  padding:0!important;margin:0!important;text-align:left!important;background:transparent!important
}
.product-thumb .description h4,.product-thumb h4{
  font-family:var(--font)!important;font-weight:300!important;font-size:13px!important;
  letter-spacing:.06em!important;text-transform:none!important;color:var(--aera-ink)!important;
  margin:0 0 6px!important;line-height:1.4!important
}
.product-thumb .description h4 a,.product-thumb h4 a{color:var(--aera-ink)!important;font-weight:300!important}
.product-thumb .description h4 a:hover{color:var(--aera-brand)!important}
.product-thumb .description p{display:none!important}
.product-thumb .price{
  font-family:var(--font)!important;font-weight:300!important;font-size:13px!important;
  color:var(--aera-graphite)!important;letter-spacing:.02em!important;margin:0!important
}
.product-thumb .price-new{color:var(--aera-brand)!important;font-weight:400!important}
.product-thumb .price-old{color:var(--aera-stone)!important;text-decoration:line-through;font-size:11px!important;margin-right:8px}
.product-thumb .price-tax{display:none!important}

/* Remove noisy 3-button row inside product cards */
.product-thumb .button,.product-thumb form .button,.product-thumb .content .button{display:none!important}

/* Rating stars hidden on listing */
.rating{display:none!important}

/* ---------- Pagination ---------- */
.pagination{margin:48px 0!important;gap:6px;justify-content:center}
.pagination .page-item,.pagination li{background:transparent!important}
.pagination .page-link,.pagination li a,.pagination li span{
  background:transparent!important;border:1px solid var(--aera-hairline)!important;color:var(--aera-ink)!important;
  font-family:var(--font)!important;font-weight:300!important;font-size:11px!important;letter-spacing:.20em!important;
  padding:9px 16px!important;border-radius:2px!important;box-shadow:none!important;margin:0 2px!important
}
.pagination .page-item.active .page-link,.pagination li.active a,.pagination li.active span{
  background:var(--aera-ink)!important;color:#fff!important;border-color:var(--aera-ink)!important
}
.pagination .page-link:hover{background:transparent!important;color:var(--aera-brand)!important;border-color:var(--aera-brand)!important}

/* ---------- Product detail page — KEEP the 2-column row layout ---------- */
.product-info,#product{padding:24px 0!important}
.product-info h1,#product h1{font-size:42px!important;margin:0 0 12px!important}
.thumbnails img,.image-additional img,.product-image img{
  border:0!important;border-radius:0!important;background:var(--aera-linen)
}
/* Product info <ul.list-unstyled> with code/availability */
.product-info ul.list-unstyled,#product ul.list-unstyled{
  padding:18px 0!important;list-style:none!important;
  border-top:1px solid var(--aera-hairline);border-bottom:1px solid var(--aera-hairline);
  margin:18px 0!important;font-family:var(--font);font-size:13px;color:var(--aera-graphite);line-height:1.9
}
.product-info ul.list-unstyled li,#product ul.list-unstyled li{padding:0!important;border:0!important;list-style:none}
.product-info ul.list-unstyled li::before,#product ul.list-unstyled li::before{display:none}
.product-info ul.list-unstyled li b{
  font-weight:400;color:var(--aera-ink);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  display:inline-block;min-width:160px
}

/* Big price block on product page */
.product-info h2,.product-info .price,#product h2.price,h2.price{
  font-family:var(--font)!important;font-weight:200!important;font-size:36px!important;
  color:var(--aera-ink)!important;margin:16px 0 24px!important;letter-spacing:-0.01em!important;padding:0!important
}
.product-info .price-tax,#product .price-tax,#product .price small,
.product-info ul.list-unstyled li:has(span:contains("Ex Tax")){display:none!important}

/* Add to cart */
#button-cart{
  background:var(--aera-ink)!important;color:#fff!important;border:0!important;
  padding:18px 32px!important;font-family:var(--font)!important;font-size:11px!important;
  font-weight:300!important;letter-spacing:.42em!important;text-transform:uppercase!important;
  border-radius:2px!important;width:100%;box-shadow:none!important
}
#button-cart:hover{background:var(--aera-brand)!important;color:#fff!important}

/* Tabs */
.nav-tabs{border-bottom:1px solid var(--aera-hairline)!important;margin-top:48px;gap:8px}
.nav-tabs .nav-link,.nav-tabs li a{
  color:var(--aera-stone)!important;background:transparent!important;border:0!important;
  border-bottom:1px solid transparent!important;
  font-family:var(--font)!important;font-weight:300!important;font-size:11px!important;
  letter-spacing:.32em!important;text-transform:uppercase!important;padding:14px 0!important;margin-right:24px;border-radius:0!important
}
.nav-tabs .nav-link.active,.nav-tabs li.active a,.nav-tabs .nav-link:hover{
  color:var(--aera-ink)!important;background:transparent!important;border-bottom:1px solid var(--aera-brand)!important
}
.tab-content{padding:32px 0;color:var(--aera-graphite);font-family:var(--font);font-size:15px;line-height:1.8}

/* ---------- Forms ---------- */
.form-control,input.form-control,textarea.form-control,select.form-control,select{
  background:transparent!important;border:1px solid var(--aera-hairline)!important;border-radius:2px!important;
  padding:12px 14px!important;font-family:var(--font)!important;font-weight:300!important;font-size:13px!important;
  color:var(--aera-ink)!important;box-shadow:none!important;height:auto!important
}
.form-control:focus{border-color:var(--aera-ink)!important;outline:0!important;box-shadow:none!important}
label,.form-label{
  font-family:var(--font)!important;font-weight:400!important;font-size:11px!important;
  letter-spacing:.20em!important;text-transform:uppercase!important;color:var(--aera-stone)!important;
  margin-bottom:8px!important
}
div.required .col-form-label:before,div.required .form-label:before{content:"* ";color:var(--aera-brand);font-weight:normal}

/* ---------- Tables (cart, checkout) ---------- */
.table{font-family:var(--font)!important;font-size:13px}
.table th,.table td{border-color:var(--aera-hairline)!important;padding:16px 14px!important;vertical-align:middle!important;color:var(--aera-ink);background:transparent!important}
.table thead th{
  background:transparent!important;color:var(--aera-stone)!important;font-weight:400!important;
  font-size:11px!important;letter-spacing:.32em!important;text-transform:uppercase!important;
  border:0!important;border-bottom:1px solid var(--aera-hairline)!important
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font)!important;font-weight:300!important;font-size:11px!important;
  letter-spacing:.32em!important;text-transform:uppercase!important;padding:14px 28px!important;
  border-radius:2px!important;box-shadow:none!important;transition:all .25s ease!important;text-shadow:none!important
}
.btn-primary,.btn-info,.btn-success,button[type="submit"].btn-primary{
  background:var(--aera-ink)!important;border-color:var(--aera-ink)!important;color:#fff!important
}
.btn-primary:hover,.btn-info:hover,.btn-success:hover{background:var(--aera-brand)!important;border-color:var(--aera-brand)!important;color:#fff!important}
.btn-secondary,.btn-default,.btn-light{background:transparent!important;border:1px solid var(--aera-ink)!important;color:var(--aera-ink)!important}
.btn-secondary:hover,.btn-light:hover{background:var(--aera-ink)!important;color:#fff!important}
.btn-danger{background:transparent!important;border:1px solid var(--aera-warm-grey)!important;color:var(--aera-warm-grey)!important}
.btn-danger:hover{background:var(--aera-warm-grey)!important;color:#fff!important}
.bg-primary{background:var(--aera-rice)!important}
.text-primary{color:var(--aera-brand)!important}

/* ---------- Alerts ---------- */
.alert{
  border:1px solid var(--aera-hairline)!important;border-radius:2px!important;
  font-family:var(--font)!important;font-weight:300!important;font-size:13px!important;
  background:var(--aera-rice)!important;color:var(--aera-ink)!important;box-shadow:none!important
}
.alert-success{border-left:2px solid var(--aera-brand)!important}
.alert-warning{border-left:2px solid #C28A35!important}
.alert-danger{border-left:2px solid #B25555!important}

/* ---------- Footer — KEEP OC's absolute positioning, just restyle ---------- */
footer{
  background:var(--aera-linen)!important;color:var(--aera-graphite)!important;
  border:0!important;border-top:1px solid var(--aera-hairline)!important;
  padding-top:64px!important
}
footer h5{
  font-family:var(--font)!important;font-weight:400!important;font-size:11px!important;
  letter-spacing:.42em!important;text-transform:uppercase!important;color:var(--aera-ink)!important
}
footer a{color:var(--aera-graphite)!important;font-family:var(--font)!important;font-weight:300!important;font-size:13px}
footer a:hover{color:var(--aera-brand)!important}
footer hr{border-color:#CFC6BA!important}
footer p{font-family:var(--font)!important;font-style:normal!important;color:var(--aera-graphite)!important}

/* ---------- Cookie banner ---------- */
#cookie{background:var(--aera-ink)!important;color:var(--aera-rice)!important;opacity:1!important}
#cookie div{color:var(--aera-rice)!important}

/* ---------- Cleanup ---------- */
*{text-shadow:none!important}
.shadow,.shadow-sm,.shadow-lg{box-shadow:none!important}

/* ---------- Responsive nav ---------- */
@media (max-width:780px){
  .aera-nav-top{padding:14px 20px 6px}
  .aera-nav-bottom{padding:4px 20px 12px;grid-template-columns:auto 1fr;gap:8px}
  .aera-nav-logo svg{height:32px}
  .aera-nav.is-scrolled .aera-nav-logo svg{height:26px}
  .aera-brand-sub{font-size:9px;letter-spacing:.32em}
  .aera-nav-center{display:none}
  .aera-nav-side--left{display:none}
}



/* ============================================================
   AERA v5 ADDITIONS (paste after aera-layer-final.css)
   - Hardcoded 6-item menu styles (.aera-menu, .aera-menu-item, .aera-menu-link, .aera-menu-dd)
   - Hide OC's stock {{ menu }} block
   - Hide H1 on category pages
   - Fix breadcrumb chain (remove Home-only, remove leading separator)
   - Reorder filter row (Sort+Show left, grid right, smaller, centred)
   - Smaller product cards + name/price right-aligned
   - Prevent lone item stretch on partial rows
   ============================================================ */

/* ---------- Hide OC's stock menu (we use our hardcoded one in nav-center) ---------- */
.aera-oc-menu-hide{display:none!important;position:absolute;left:-9999px}

/* ---------- AERA hardcoded menu inside .aera-nav-center ---------- */
.aera-menu{display:flex;align-items:center;gap:40px;list-style:none;margin:0;padding:0}
.aera-menu-item{position:relative;list-style:none}
.aera-menu-link{
  display:inline-block;padding:6px 0;
  font-family:var(--font);font-weight:300;font-size:11px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--aera-ink);
  cursor:pointer;transition:color .25s ease;white-space:nowrap;
  background:transparent;border:0;text-decoration:none
}
.aera-menu-link:hover{color:var(--aera-brand)}
.aera-menu-link span{display:inline}
.aera-menu-dd{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-4px);min-width:200px;
  background:rgba(249,247,243,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--aera-hairline);padding:14px 0;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  z-index:51;border-radius:2px;
  box-shadow:0 16px 40px rgba(28,26,24,.08)
}
.aera-menu-item:hover .aera-menu-dd,
.aera-menu-item:focus-within .aera-menu-dd{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear 0s
}
.aera-menu-dd a{
  display:block;padding:9px 28px;
  font-family:var(--font);font-weight:300;font-size:13px;
  letter-spacing:.05em;text-transform:none;color:var(--aera-ink);
  text-decoration:none;background:transparent
}
.aera-menu-dd a:hover{color:var(--aera-brand)!important;background:transparent}

/* ---------- Hide H1 on category pages (breadcrumb already names the section) ---------- */
#product-category h1,
#product-category .page-title{display:none!important}

/* ---------- Breadcrumb chain — hide Home-only item, clean separator ---------- */
.breadcrumb > li.breadcrumb-item:first-child,
.breadcrumb-item:first-child{display:none!important}
.breadcrumb > li.breadcrumb-item:nth-child(2)::before,
.breadcrumb-item:nth-child(2)::before{content:none!important;padding:0!important}
.breadcrumb-item + .breadcrumb-item::before{
  color:var(--aera-stone)!important;
  content:"·"!important;padding:0 14px 0 4px!important
}
/* Make breadcrumb a bit more present since it now carries the section title */
.breadcrumb,ul.breadcrumb{
  font-size:12px!important;letter-spacing:.30em!important;
  padding:22px 0 14px!important;margin:8px 0 24px!important
}
.breadcrumb-item.active,.breadcrumb-item:last-child,
.breadcrumb li:last-child{color:var(--aera-ink)!important;font-weight:400!important}

/* ---------- Filter row reorder + size + alignment ---------- */
/* OC 4.1 renders this as a .row with sort/limit/compare/grid-list columns */
.product-filter,
#content .row:has(label[for="input-sort"]),
#content .row.mb-3:has(label[for="input-sort"]),
form.product-filter{
  display:flex!important;flex-direction:row!important;
  align-items:center!important;justify-content:flex-start!important;
  flex-wrap:nowrap!important;gap:16px!important;
  border-top:1px solid var(--aera-hairline)!important;
  border-bottom:1px solid var(--aera-hairline)!important;
  padding:12px 0!important;margin:8px 0 32px!important
}
/* Order: Sort first, then Show, then grid/list buttons on the right */
.product-filter > div,
#content .row:has(label[for="input-sort"]) > div,
#content .row.mb-3:has(label[for="input-sort"]) > div{
  flex:0 0 auto!important;max-width:none!important;width:auto!important;
  padding:0!important;display:flex!important;align-items:center!important;gap:8px!important
}
/* Compare column — hidden */
.product-filter > div:has(.btn-compare),
#content .row:has(label[for="input-sort"]) > div:has(.btn-compare){display:none!important}
/* Sort column = first */
.product-filter > div:has(label[for="input-sort"]),
#content .row:has(label[for="input-sort"]) > div:has(label[for="input-sort"]){order:1!important;justify-content:flex-start!important}
/* Show column = second */
.product-filter > div:has(label[for="input-limit"]),
#content .row:has(label[for="input-sort"]) > div:has(label[for="input-limit"]){order:2!important;margin-right:auto!important}
/* Grid/list column = last (right) */
.product-filter > div:has(#button-grid),
.product-filter > div:has(#grid-view),
#content .row:has(label[for="input-sort"]) > div:has(#button-grid),
#content .row:has(label[for="input-sort"]) > div:has(#grid-view){order:99!important;margin-left:auto!important;justify-content:flex-end!important}

/* Smaller controls (–2px from previous) */
.product-filter label,.product-filter .control-label,.col-form-label{
  font-size:10px!important;letter-spacing:.30em!important;margin:0 4px 0 0!important
}
.product-filter select,#input-sort,#input-limit{
  padding:6px 12px!important;font-size:11px!important;line-height:1.4!important
}
#list-view,#grid-view,#button-list,#button-grid{
  padding:5px 10px!important;font-size:13px!important
}

/* ---------- Product grid — smaller cards, name/price right-aligned ---------- */
.row > .product-layout{
  flex:0 0 25%!important;max-width:25%!important;
  padding:0 14px!important;margin-bottom:48px!important;
  align-self:flex-start!important   /* prevent lone-item stretch */
}
@media (max-width:1200px){.row > .product-layout{flex:0 0 33.333%!important;max-width:33.333%!important}}
@media (max-width:768px){.row > .product-layout{flex:0 0 50%!important;max-width:50%!important;padding:0 8px!important;margin-bottom:32px!important}}

/* Card wrapper — limit width so photo looks smaller within the cell */
.product-thumb{
  max-width:320px!important;margin:0 auto!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  overflow:visible!important;padding:0!important;
  display:flex!important;flex-direction:column!important
}
.product-thumb .image{
  position:relative;aspect-ratio:4/5;overflow:hidden!important;
  background:var(--aera-linen)!important;
  border:0!important;padding:0!important;margin:0 0 14px!important
}
.product-thumb .image a{display:block;width:100%;height:100%}
.product-thumb .image img{
  width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover!important;object-position:50% 15%!important;display:block;
  transition:transform .7s ease;border-radius:0!important
}

/* Name + price RIGHT-aligned under photo */
.product-thumb .description,.product-thumb .content,.product-thumb .caption{
  padding:0 4px 0 0!important;margin:0!important;
  text-align:right!important;background:transparent!important
}
.product-thumb .description h4,.product-thumb h4,
.product-thumb .caption h4{
  font-family:var(--font)!important;font-weight:300!important;font-size:12px!important;
  letter-spacing:.06em!important;text-transform:none!important;
  color:var(--aera-ink)!important;margin:0 0 4px!important;line-height:1.4!important;
  text-align:right!important
}
.product-thumb .description h4 a{color:var(--aera-ink)!important}
.product-thumb .price,.product-thumb .description .price{
  font-family:var(--font)!important;font-weight:300!important;font-size:12px!important;
  color:var(--aera-graphite)!important;letter-spacing:.02em!important;
  margin:0!important;text-align:right!important;display:block!important
}
.product-thumb .price-new{color:var(--aera-brand)!important;font-weight:400!important}
.product-thumb .price-tax{display:none!important}

/* Prevent description paragraphs and rating from injecting padding */
.product-thumb .description p,.rating{display:none!important}

/* ---------- Fix: row containing .product-layout — align items top, no stretch ---------- */
.row:has(> .product-layout){align-items:flex-start!important}

/* ---------- Footer mismatch fix — let OC sticky layout work ---------- */
/* In OC 4.1, footer is position:absolute; bottom:-1px; height auto.
   Make sure #content has enough padding-bottom so footer doesn't overlap.
   The original OC default is padding-bottom:730px (mobile) and 400px (desktop).
   Keep that for desktop, adjust footer height. */
footer{padding-bottom:32px!important}

/* End v5 additions */



/* ============================================================
   AERA v6 ADDITIONS (paste at the END of stylesheet.css, after v5)
   1. Hide breadcrumb. Move description (#content > p) to act as the top lead.
   2. Fix filter row — true horizontal layout, same baseline, full content width.
   3. Compress footer (smaller padding, line-heights, fonts).
   4. Switch OC sticky-footer to natural flow to prevent photo-overlap.
   ============================================================ */

/* ---------- 1. Hide breadcrumb. Lift description to the top. ---------- */
.breadcrumb, ul.breadcrumb { display: none !important; }

#product-category > p:first-of-type,
#product-category .col-9 > p,
#product-category .col-9,
#content > p:first-of-type {
  font-family: var(--font) !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;
  color: var(--aera-graphite) !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--aera-hairline) !important;
  border-bottom: 1px solid var(--aera-hairline) !important;
  padding: 18px 0 !important;
  margin: 0 0 32px !important;
  max-width: none !important;
  width: 100% !important;
  line-height: 1.6 !important;
}

/* If OC wraps the description in a .col-9 row at the top, flatten it */
#product-category > .row:has(.col-9 > p),
#product-category > .row:has(> div > .col-9){
  display: block !important;
  margin: 0 !important;
}
#product-category > .row > .col-9{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
#product-category > .row > .col-3{display:none!important}  /* hide the image col if present */

/* ---------- 2. Filter row — full-width flex, same baseline ---------- */
#content > form#product-category,
#content #product-category > .row.mb-3,
#content .row.mb-3:has(label[for="input-sort"]){
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 40px !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--aera-hairline) !important;
  border-bottom: 1px solid var(--aera-hairline) !important;
}

/* Each column inside the row is a tight flex unit */
#content .row.mb-3:has(label[for="input-sort"]) > div{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Hide Compare col entirely */
#content .row.mb-3:has(label[for="input-sort"]) > div:has(.btn-compare),
#content .row.mb-3:has(label[for="input-sort"]) > div:has(#compare-total){
  display: none !important;
}

/* Sort first (left) */
#content .row.mb-3:has(label[for="input-sort"]) > div:has(label[for="input-sort"]){
  order: 1 !important;
}
/* Show second */
#content .row.mb-3:has(label[for="input-sort"]) > div:has(label[for="input-limit"]){
  order: 2 !important;
  margin-right: auto !important;  /* pushes grid buttons to the far right */
}
/* Grid/list far right */
#content .row.mb-3:has(label[for="input-sort"]) > div:has(#button-grid),
#content .row.mb-3:has(label[for="input-sort"]) > div:has(#grid-view){
  order: 99 !important;
}

/* Kill the .input-group wrapper styling — make label+select inline */
#content .input-group{
  display: inline-flex !important;
  width: auto !important;
  flex-wrap: nowrap !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
#content .input-group .input-group-text,
#content .input-group label.input-group-text{
  background: transparent !important;
  border: 0 !important;
  padding: 0 8px 0 0 !important;
  font-family: var(--font) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: .30em !important;
  text-transform: uppercase !important;
  color: var(--aera-stone) !important;
  height: auto !important;
  line-height: 1 !important;
}
#content .input-group .form-select,
#content .input-group select.form-select,
#input-sort, #input-limit{
  background: transparent !important;
  border: 1px solid var(--aera-hairline) !important;
  border-radius: 2px !important;
  padding: 5px 28px 5px 10px !important;
  font-family: var(--font) !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  color: var(--aera-ink) !important;
  height: auto !important;
  line-height: 1.4 !important;
  min-width: auto !important;
  width: auto !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--aera-stone) 50%), linear-gradient(135deg, var(--aera-stone) 50%, transparent 50%) !important;
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

/* Grid/List buttons — tighter */
#button-list, #button-grid, #list-view, #grid-view{
  background: transparent !important;
  color: var(--aera-stone) !important;
  border: 1px solid var(--aera-hairline) !important;
  border-radius: 2px !important;
  padding: 4px 9px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  height: auto !important;
  box-shadow: none !important;
}
#button-list:hover, #button-grid:hover{
  background: transparent !important;
  color: var(--aera-ink) !important;
  border-color: var(--aera-ink) !important;
}
#button-list i, #button-grid i{font-size: 13px !important; line-height: 1 !important;}
.btn-group #button-list + #button-grid{margin-left: -1px !important;}

/* ---------- 3. Compress footer (significantly smaller) ---------- */
footer{
  padding: 36px 0 14px !important;
  margin: 0 !important;
}
footer .container{
  padding-left: 48px !important;
  padding-right: 48px !important;
  max-width: 1640px !important;
  margin: 0 auto !important;
}
footer .row{
  row-gap: 8px !important;
  margin: 0 !important;
}
footer h5{
  font-family: var(--font) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: var(--aera-ink) !important;
  margin: 0 0 10px !important;
}
footer ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
footer ul li{
  line-height: 1.6 !important;
  padding: 0 !important;
}
footer a{
  font-family: var(--font) !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--aera-graphite) !important;
  letter-spacing: .02em !important;
}
footer a:hover{color: var(--aera-brand) !important;}
footer hr{
  margin: 16px 0 8px !important;
  border: 0 !important;
  border-top: 1px solid #CFC6BA !important;
}
footer p,
footer .text-center,
footer > .container > div:last-child,
footer > .container > .row:last-child{
  font-family: var(--font) !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: .02em !important;
  color: var(--aera-stone) !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}
@media (max-width: 768px){
  footer{padding: 24px 16px 10px !important;}
  footer .container{padding-left: 16px !important; padding-right: 16px !important;}
}

/* ---------- 4. Switch OC sticky-footer to natural flow ---------- */
#container{
  position: static !important;
  min-height: 0 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  width: auto !important;
  display: block !important;
}
#content, #column-left, #column-right{
  padding-bottom: 48px !important;
}
@media (min-width: 576px){
  #content, #column-left, #column-right{padding-bottom: 64px !important;}
}
footer{
  position: static !important;
  bottom: auto !important;
  width: 100% !important;
  border: 0 !important;
  border-top: 1px solid var(--aera-hairline) !important;
}
body{min-height: 0 !important; height: auto !important;}
html{height: auto !important;}

/* End v6 additions */



/* ============================================================
   AERA v7 ADDITIONS (paste at the END of stylesheet.css after v6)
   1. Restore breadcrumb "KIMONOS" (undo v6 hiding).
   2. Hide the description paragraph "Daily kimonos, premium fabric kimonos…".
   3. Make product tiles smaller so 4 fit comfortably in a row.
   ============================================================ */

/* ---------- 1. Restore breadcrumb ---------- */
.breadcrumb, ul.breadcrumb{
  display:flex !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--aera-hairline) !important;
  border-radius:0 !important;
  padding:22px 0 14px !important;
  margin:8px 0 32px !important;
  font-family:var(--font) !important;
  font-weight:300 !important;
  font-size:12px !important;
  letter-spacing:.30em !important;
  text-transform:uppercase !important;
  align-items:center !important;
}

/* ---------- 2. Hide ONLY the category description block, not the breadcrumb ---------- */
/* The description sits inside #product-category > .row > .col-9 (OC default) */
#product-category > .row:has(.col-9),
#product-category > .row:has(> .col-9 > p),
#product-category .col-9{
  display:none !important;
}
/* Also catch plain-p case (some installs render description as #product-category > p) */
#product-category > p,
#product-category > div > p:first-of-type:not(.price):not(.product-thumb p){
  display:none !important;
}
/* But don't touch lead paragraphs inside info pages or product detail */
#information-information p,
#product-product p,
.product-info p{
  display: revert !important;
}
/* Or empty-image-col leftovers */
#product-category > .row > .col-3{display:none!important}

/* ---------- 3. Smaller product tiles ---------- */
.product-thumb{
  max-width:240px !important;        /* was 320 — now 240 */
  margin:0 auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
.product-thumb .image{
  aspect-ratio:4/5 !important;
  margin:0 0 12px !important;
  background:var(--aera-linen) !important;
  overflow:hidden !important;
}
.product-thumb .image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:50% 15% !important;
}
/* Tighter name + price typography */
.product-thumb .description h4,
.product-thumb h4{
  font-size:11px !important;
  letter-spacing:.04em !important;
  margin:0 0 3px !important;
}
.product-thumb .price,
.product-thumb .description .price{
  font-size:11px !important;
}

/* Ensure OC's .col stretches don't make tiles huge — explicit 4-up at lg+ */
@media (min-width:992px){
  #product-list.row.row-cols-lg-4 > .col,
  #product-list > .col,
  .row.row-cols-lg-4 > .col{
    flex:0 0 25% !important;
    max-width:25% !important;
    padding:0 14px !important;
  }
  #product-list.row{margin-left:-14px !important;margin-right:-14px !important;}
}
@media (min-width:768px) and (max-width:991px){
  #product-list > .col{
    flex:0 0 33.333% !important;
    max-width:33.333% !important;
    padding:0 12px !important;
  }
}
@media (max-width:767px){
  #product-list > .col{
    flex:0 0 50% !important;
    max-width:50% !important;
    padding:0 8px !important;
  }
  .product-thumb{max-width:200px !important;}
}

/* Reduce row gap on the product grid so the smaller tiles look tightly composed */
#product-list.row{row-gap:32px !important;}

/* End v7 additions */



/* ============================================================
   AERA v8 ADDITIONS (paste at the END of stylesheet.css after v7)
   1. Make .aera-nav scroll animation OBVIOUS.
   2. Remove the two hairlines above the filter row.
   3. Fix vertical centering of SORT BY / SHOW labels with their dropdowns.
   ============================================================ */

/* ---------- 1. Scroll animation — make it actually visible ---------- */
.aera-nav{
  background: rgba(249,247,243,.82) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  border-bottom: 1px solid transparent !important;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, padding .35s ease !important;
  box-shadow: none !important;
}
.aera-nav.is-scrolled{
  background: rgba(249,247,243,.99) !important;
  border-bottom-color: var(--aera-hairline) !important;
  box-shadow: 0 6px 20px rgba(28,26,24,.07) !important;
}
.aera-nav.is-scrolled .aera-nav-top{padding: 10px 48px 4px !important;}
.aera-nav.is-scrolled .aera-nav-bottom{padding: 2px 48px 10px !important;}
.aera-nav.is-scrolled .aera-nav-logo svg{height: 28px !important;}

/* Make sure sticky positioning actually works on OC's page wrapper */
#container{overflow: visible !important;}
html, body{overflow-x: hidden;}

/* ---------- 2. Kill the 2 hairlines above filter row ---------- */
.breadcrumb, ul.breadcrumb{
  border-bottom: 0 !important;     /* remove breadcrumb's bottom line */
  padding: 18px 0 4px !important;  /* less air below */
  margin: 4px 0 6px !important;    /* compact bottom margin */
}
#content > form#product-category > .row.mb-3,
#content > #product-category > .row.mb-3,
#content .row.mb-3:has(label[for="input-sort"]),
form.product-filter{
  border-top: 0 !important;        /* remove filter's top line */
  border-bottom: 1px solid var(--aera-hairline) !important;
  margin: 0 0 32px !important;
  padding: 8px 0 12px !important;
}

/* ---------- 3. Vertical centering of label + dropdown ---------- */
/* Force EVERY container in the filter chain to align center */
.row.mb-3:has(label[for="input-sort"]),
.row.mb-3:has(label[for="input-limit"]),
.row.mb-3:has(#button-grid){
  align-items: center !important;
}
.row.mb-3:has(label[for="input-sort"]) > div,
.row.mb-3:has(label[for="input-limit"]) > div,
.row.mb-3:has(#button-grid) > div{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0 !important;
}

/* The .input-group is what wraps label + select.  Make it a centred flex row. */
.input-group,
#content .input-group{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  background: transparent !important;
  margin: 0 !important;
  height: auto !important;
  vertical-align: middle !important;
}

/* The label itself — same line-height as the select for true centering */
.input-group-text,
.input-group label.input-group-text{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 32px !important;            /* match select height */
  line-height: 32px !important;
  padding: 0 10px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--font) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: .30em !important;
  text-transform: uppercase !important;
  color: var(--aera-stone) !important;
  vertical-align: middle !important;
}

/* The select — explicit height = label height so they align */
.form-select,
#input-sort, #input-limit{
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 28px 0 12px !important;
  margin: 0 !important;
  font-family: var(--font) !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  color: var(--aera-ink) !important;
  background: transparent !important;
  border: 1px solid var(--aera-hairline) !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--aera-stone) 50%),
    linear-gradient(135deg, var(--aera-stone) 50%, transparent 50%) !important;
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  min-width: 100px !important;
  width: auto !important;
}
.form-select:focus,
#input-sort:focus, #input-limit:focus{
  border-color: var(--aera-ink) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Grid/list buttons — same height as the rest */
#button-list, #button-grid, #list-view, #grid-view{
  height: 32px !important;
  width: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border: 1px solid var(--aera-hairline) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--aera-stone) !important;
}
.btn-group #button-list + #button-grid{margin-left: -1px !important;}

/* End v8 additions */



/* ============================================================
   AERA v9 ADDITIONS (paste at the END of stylesheet.css after v8)
   1. Tight spacing between breadcrumb and filter (almost touching).
   2. Kill the leftover semi-transparent line.
   3. Sort By + Show shoved all the way LEFT (kill Bootstrap offset-lg-1).
   4. Switch .aera-nav to position:fixed so it sticks on every page predictably.
   ============================================================ */

/* ---------- 4. Fixed nav (replaces sticky) ---------- */
.aera-nav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}
/* Push the page content below the fixed nav */
body{padding-top: 132px !important;}
main{padding-top: 0 !important;}

/* When nav shrinks, page padding can stay the same — extra blank space is fine */
@media (max-width: 780px){
  body{padding-top: 96px !important;}
}

/* Re-state the visual states for safety (v8 may be overridden by other layers) */
.aera-nav{
  background: rgba(249,247,243,.82) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, padding .35s ease !important;
}
.aera-nav.is-scrolled{
  background: rgba(249,247,243,.99) !important;
  border-bottom-color: var(--aera-hairline) !important;
  box-shadow: 0 6px 20px rgba(28,26,24,.07) !important;
}

/* ---------- 1+2. Tighten breadcrumb→filter spacing, kill any leftover lines ---------- */
.breadcrumb,
ul.breadcrumb,
#product-category .breadcrumb,
#product-category ul.breadcrumb{
  border: 0 !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  padding: 14px 0 2px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Hide any leftover OC chrome between breadcrumb and the filter row.
   This nukes the empty H1, the description row, the image row, and any HR. */
#product-category > h1,
#product-category > h2,
#product-category > .page-title,
#product-category > hr,
#product-category > .row:not(:has(label[for="input-sort"])):not(:has(#product-list)):not(:has(#content)):not(:has(.product-thumb)):not(:has(.pagination)){
  display: none !important;
}
#product-category .col-3,
#product-category .col-9{display: none !important;}

/* Filter row — no border-top, very tight to breadcrumb */
.row.mb-3:has(label[for="input-sort"]),
form.product-filter,
#content > .row.mb-3,
#content #product-category .row.mb-3{
  border-top: 0 !important;
  border-bottom: 1px solid var(--aera-hairline) !important;
  padding: 0 0 14px !important;
  margin: 0 0 32px !important;
}

/* ---------- 3. Sort By + Show all the way LEFT ---------- */
.row.mb-3:has(label[for="input-sort"]){
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.row.mb-3:has(label[for="input-sort"]) > div{
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Kill Bootstrap offset-lg-1 specifically (this was pushing SORT BY ~8% from left) */
.offset-lg-1,
.row > .offset-lg-1,
.row.mb-3 > .offset-lg-1,
[class*="offset-"]{
  margin-left: 0 !important;
}

/* First .col with SORT BY must hug the left edge */
.row.mb-3:has(label[for="input-sort"]) > div:has(label[for="input-sort"]){
  margin-left: 0 !important;
  padding-left: 0 !important;
  order: 1 !important;
}
.row.mb-3:has(label[for="input-sort"]) > div:has(label[for="input-limit"]){
  order: 2 !important;
  margin-right: auto !important;  /* pushes grid icons to the far right */
}
.row.mb-3:has(label[for="input-sort"]) > div:has(#button-grid),
.row.mb-3:has(label[for="input-sort"]) > div:has(.btn-group){
  order: 99 !important;
}

/* End v9 additions */



/* ============================================================
   AERA v10 ADDITIONS (paste at the END of stylesheet.css after v9)
   1. Kill the 32px padding-top above filter on category pages.
   2. Beef up .is-scrolled visual change — make animation unmistakable.
   ============================================================ */

/* ---------- 1. Zero out #content padding-top so breadcrumb almost touches filter ---------- */
#product-category #content,
#product-product #content,
#information-information #content,
#content{
  padding-top: 0 !important;
}
/* But keep some breathing room for headings on info pages */
#information-information #content{padding-top: 16px !important;}

/* Also ensure the parent .row wrapping #content has no extra margin */
#product-category > .row,
#product-product > .row,
#information-information > .row{
  margin-top: 0 !important;
}

/* The H1 (we hide on category) doesn't push margin even when display:none, but make sure */
#product-category h1,
#product-category h2,
#product-category .page-title{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Breadcrumb ultra-compact */
.breadcrumb,
ul.breadcrumb,
#product-category .breadcrumb{
  padding: 14px 0 0 !important;
  margin: 0 0 8px !important;
}

/* Filter row — also no top spacing */
.row.mb-3:has(label[for="input-sort"]),
form.product-filter,
#content > .row.mb-3{
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}

/* ---------- 2. Scroll animation — UNMISTAKABLE difference ---------- */
.aera-nav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: rgba(249,247,243,.82) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, padding .35s ease !important;
}
.aera-nav.is-scrolled{
  background: var(--aera-rice) !important;       /* fully solid */
  border-bottom: 1px solid var(--aera-hairline) !important;
  box-shadow: 0 8px 28px rgba(28,26,24,.10) !important;   /* clearly visible shadow */
}

/* Top row padding shrinks noticeably */
.aera-nav-top{padding: 22px 48px 10px !important; transition: padding .35s ease !important;}
.aera-nav.is-scrolled .aera-nav-top{padding: 8px 48px 4px !important;}

/* Bottom row padding shrinks too */
.aera-nav-bottom{padding: 8px 48px 16px !important; transition: padding .35s ease !important;}
.aera-nav.is-scrolled .aera-nav-bottom{padding: 0 48px 8px !important;}

/* Logo shrinks dramatically: 46 → 26 */
.aera-nav-logo svg{height: 46px !important; transition: height .35s ease !important;}
.aera-nav.is-scrolled .aera-nav-logo svg{height: 26px !important;}

/* The brand-sub "atelier" text scales down a touch on scroll too */
.aera-brand-sub{transition: font-size .35s ease, opacity .35s ease !important;}
.aera-nav.is-scrolled .aera-brand-sub{font-size: 8px !important; opacity: .7 !important;}

/* End v10 additions */



/* ============================================================
   AERA v11 ADDITIONS (paste at END of stylesheet.css after v10)
   NUCLEAR: kill the breadcrumb entirely, show H1 as "KIMONOS" label.
   This guarantees the horizontal line above filter row CANNOT exist
   (no breadcrumb to draw it from).
   ============================================================ */

/* ---------- Kill the breadcrumb entirely on category pages ---------- */
#product-category .breadcrumb,
#product-category ul.breadcrumb,
.breadcrumb,
ul.breadcrumb{
  display: none !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* ---------- Show H1 again, styled as the small "KIMONOS" caps label ---------- */
#product-category h1,
#product-category .page-title,
#product-category > h1,
#content > h1{
  display: block !important;
  visibility: visible !important;
  font-family: var(--font) !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  letter-spacing: .30em !important;
  text-transform: uppercase !important;
  color: var(--aera-stone) !important;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  margin: 24px 0 8px !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
}

/* But keep H1 large and styled on product detail and info pages */
#product-product h1,
#information-information h1,
#product-product #content > h1{
  display: block !important;
  font-size: 42px !important;
  font-weight: 200 !important;
  letter-spacing: -0.012em !important;
  text-transform: none !important;
  color: var(--aera-ink) !important;
  margin: 16px 0 12px !important;
}

/* ---------- Scorched-earth border kill on everything between H1 and filter ---------- */
#product-category,
#product-category > *,
#product-category .row,
#product-category .col,
#product-category #content,
#product-category > .row > .col,
#product-category > .row,
main,
#container,
#container > *{
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Restore ONLY the filter row's bottom border */
.row.mb-3:has(label[for="input-sort"]),
form.product-filter,
#content > .row.mb-3:has(label[for="input-sort"]){
  border-top: 0 !important;
  border-bottom: 1px solid var(--aera-hairline) !important;
  padding: 0 0 12px !important;
  margin: 0 0 32px !important;
}

/* ---------- SORT BY all the way LEFT — even higher specificity ---------- */
.row.mb-3.mb-3:has(label[for="input-sort"]) > .col-lg-4.offset-lg-1,
.row.mb-3:has(label[for="input-sort"]) > div.offset-lg-1,
.row.mb-3:has(label[for="input-sort"]) > .col-lg-4.offset-lg-1,
.row.mb-3:has(label[for="input-sort"]) > [class*="offset-"]{
  margin-left: 0 !important;
}
@media (min-width: 992px){
  .row.mb-3:has(label[for="input-sort"]) > .offset-lg-1{
    margin-left: 0 !important;
  }
  /* Force first .col in filter row to start at the very edge */
  .row.mb-3:has(label[for="input-sort"]) > div:first-child:has(label[for="input-sort"]),
  .row.mb-3:has(label[for="input-sort"]) > div:has(label[for="input-sort"]){
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* End v11 additions */



/* ============================================================
   AERA v12 — kill ALL <hr> elements inside content area.
   The culprit was OC's category.twig <hr> between description
   and product list, getting border-top + opacity:0.25 from Bootstrap.
   ============================================================ */

main hr,
#content hr,
#product-category hr,
#product-product hr,
#information-information hr,
#container hr,
hr{
  display: none !important;
  border: 0 !important;
  border-top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* End v12 additions */



/* ============================================================
   AERA v13 — Restyle pagination results counter to match site tone.
   OC renders "Showing X to Y of Z (N Pages)" inside .col-sm-6.text-end.
   Pagination links live in the sibling .col-sm-6.text-start.
   ============================================================ */

/* The whole bottom row containing pagination + results */
#product-category #content > .row:last-child,
#product-category #content > div.row:has(.text-end),
#content > .row:has(.text-end):has(.text-start){
  border-top: 1px solid var(--aera-hairline) !important;
  margin-top: 48px !important;
  padding: 24px 0 12px !important;
  align-items: center !important;
}

/* Both columns — left (pagination) and right (results) — same caps style */
#content > .row > .col-sm-6.text-end,
#content > .row > .col-sm-6.text-start,
#content > div.row:has(.text-end) > div{
  font-family: var(--font) !important;
  font-weight: 300 !important;
  font-size: 10px !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: var(--aera-stone) !important;
  padding: 8px 0 !important;
  line-height: 1.5 !important;
}

/* Results text on the right */
#content > .row > .col-sm-6.text-end{
  text-align: right !important;
}
#content > .row > .col-sm-6.text-start{
  text-align: left !important;
}

/* If pagination has page-links, keep them in Inter caps but slightly bigger */
.pagination .page-link,
.pagination li a,
.pagination li span{
  font-size: 10px !important;
  letter-spacing: .20em !important;
  padding: 6px 14px !important;
  border: 1px solid var(--aera-hairline) !important;
}

/* End v13 additions */



/* ============================================================
   AERA v14 — Restore breadcrumb chain with elegant separator
   ============================================================ */

/* Unhide breadcrumb everywhere (undo v11 nuclear hide) */
.breadcrumb,
ul.breadcrumb,
#product-category .breadcrumb,
#product-product .breadcrumb,
#information-information .breadcrumb,
#account-account .breadcrumb{
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 6px !important;
  margin: 0 0 8px !important;
  font-family: var(--font) !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: .30em !important;
  text-transform: uppercase !important;
  gap: 0 !important;
}

/* Hide the Home icon-only first item */
.breadcrumb > li.breadcrumb-item:first-child,
.breadcrumb-item:first-child{
  display: none !important;
}

/* Remove leading separator from the now-first visible item */
.breadcrumb-item:nth-child(2)::before,
.breadcrumb-item:first-of-type::before{
  content: none !important;
  padding: 0 !important;
}

/* Elegant › separator between items */
.breadcrumb-item + .breadcrumb-item::before{
  content: "›" !important;
  display: inline-block !important;
  color: var(--aera-stone) !important;
  padding: 0 14px !important;
  opacity: .6 !important;
  font-weight: 400 !important;
}

/* Each item — stone color, brand hover, no padding */
.breadcrumb > li.breadcrumb-item,
.breadcrumb-item,
.breadcrumb a,
.breadcrumb li a{
  color: var(--aera-stone) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.breadcrumb a:hover,
.breadcrumb li a:hover{
  color: var(--aera-brand) !important;
}
.breadcrumb-item.active,
.breadcrumb-item:last-child,
.breadcrumb li:last-child,
.breadcrumb > li.breadcrumb-item.active{
  color: var(--aera-ink) !important;
  font-weight: 400 !important;
}

/* Kill OC's diagonal ::after chevron decoration */
.breadcrumb > li.breadcrumb-item::after,
.breadcrumb-item::after{
  display: none !important;
}

/* Kill icons inside breadcrumb (we hide first item anyway) */
.breadcrumb i,
.breadcrumb .fa,
.breadcrumb .fas,
.breadcrumb .fa-home,
.breadcrumb .fa-house{
  display: none !important;
}

/* ---------- Page-specific H1 + breadcrumb-last-item logic ---------- */

/* CATEGORY page: hide H1 (breadcrumb already shows the section) */
#product-category h1,
#product-category .page-title{
  display: none !important;
}

/* PRODUCT detail page: 
   - Hide LAST breadcrumb item (product name — H1 already shows it)
   - Show H1 big as product name
*/
#product-product .breadcrumb-item:last-child,
#product-product .breadcrumb li:last-child{
  display: none !important;
}
/* Hide trailing separator that would now belong to the hidden last item */
#product-product .breadcrumb-item:nth-last-child(2)::after{
  display: none !important;
}

#product-product h1,
#information-information h1{
  display: block !important;
  visibility: visible !important;
  font-family: var(--font) !important;
  font-weight: 200 !important;
  font-size: 42px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.012em !important;
  text-transform: none !important;
  color: var(--aera-ink) !important;
  background: transparent !important;
  border: 0 !important;
  margin: 12px 0 16px !important;
  padding: 0 !important;
  height: auto !important;
}

/* End v14 additions */