/* Accessories page: premium product-card presentation. */
.accessories-system-page{
  --lhs-products-ink:#17120f;
  --lhs-products-muted:#776a5f;
  --lhs-products-gold:#a87432;
  --lhs-products-cream:#f7f1e8;
  --lhs-products-line:rgba(126,88,43,.18);
}

/* Keep the hero copy readable while letting the product image show through. */
.accessories-system-page .system-hero::after{
  background:linear-gradient(90deg,
    rgba(247,244,239,.52) 0%,
    rgba(247,244,239,.34) 24%,
    rgba(247,244,239,.12) 42%,
    rgba(247,244,239,.02) 58%,
    rgba(247,244,239,0) 72%) !important;
}

.accessories-system-page .system-hero{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  transform:none !important;
  background:#eadfce !important;
}

.accessories-system-page .system-hero > .accessories-products-hero-media{
  position:absolute !important;
  inset:0 !important;
  z-index:0;
  display:block !important;
  width:100% !important;
  height:100% !important;
}

.accessories-system-page .system-hero > .accessories-products-hero-media > img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  filter:saturate(1.02) contrast(1.01) !important;
}

.accessories-system-page .system-hero-copy{
  left:clamp(32px,7vw,128px) !important;
  right:auto !important;
  max-width:min(36vw,530px) !important;
}

html[dir="rtl"] .accessories-system-page .system-hero-copy{
  direction:rtl;
  text-align:right;
}

@media(max-width:700px){
  .accessories-system-page .system-hero > .accessories-products-hero-media > img{
    object-position:center center !important;
    transform:none !important;
  }

  .accessories-system-page .system-hero::after{
    background:linear-gradient(180deg,
      rgba(247,244,239,.84) 0%,
      rgba(247,244,239,.64) 38%,
      rgba(247,244,239,.14) 60%,
      rgba(247,244,239,0) 78%) !important;
  }

  .accessories-system-page .system-hero-copy{
    top:20% !important;
    left:24px !important;
    right:24px !important;
    max-width:calc(100% - 48px) !important;
    transform:translateY(-50%) !important;
  }

  html[dir="rtl"] .accessories-system-page .system-hero-copy{
    right:24px !important;
    left:24px !important;
  }
}

.accessories-system-page .system-intro{
  max-width:1180px;
  margin:68px auto 42px;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.accessories-system-page .system-intro > div{
  width:min(820px,100%);
}

.accessories-system-page .system-intro h2{
  max-width:820px;
  margin-inline:auto;
  font-size:clamp(30px,3vw,44px);
  line-height:1.12;
}

.accessories-system-page .lhs-care-note{
  max-width:680px;
  margin:18px auto 0;
  font-size:14px;
  line-height:1.65;
}

.accessories-system-page .lhs-adhesive-guide-banner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:22px;
  padding:0 24px;
  border:1px solid var(--lhs-products-line);
  background:#fff;
  color:var(--lhs-products-ink);
  font-size:10px;
  font-weight:800;
  letter-spacing:.17em;
  text-decoration:none;
  text-transform:uppercase;
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}

.accessories-system-page .lhs-adhesive-guide-banner:hover{
  background:var(--lhs-products-ink);
  color:#f2d9ac;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(35,24,14,.13);
}

.accessories-system-page .systems-grid{
  max-width:1280px;
  margin:0 auto 110px;
  padding:0 32px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px !important;
}

.accessories-system-page .system-card{
  position:relative;
  overflow:hidden;
  min-width:0;
  padding-bottom:0;
  border:1px solid var(--lhs-products-line);
  border-radius:26px;
  background:#fff;
  box-shadow:0 18px 46px rgba(58,39,19,.075);
  isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;
}

.accessories-system-page .system-card::before{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  left:20%;
  right:20%;
  height:1px;
  background:linear-gradient(90deg,transparent,#d7ae6f,transparent);
  opacity:.8;
}

.accessories-system-page .system-card:hover{
  transform:translateY(-7px);
  border-color:rgba(168,116,50,.34);
  box-shadow:0 28px 64px rgba(58,39,19,.14);
}

.accessories-system-page .system-card-inner{
  display:flex !important;
  flex-direction:column;
  height:100%;
}

.accessories-system-page .system-img{
  position:relative;
  height:340px;
  flex:0 0 340px;
  border-bottom:1px solid rgba(126,88,43,.1);
  background:
    radial-gradient(circle at 50% 42%,#fff 0%,#faf7f1 48%,#eee4d6 100%);
}

.accessories-system-page .system-img::after{
  content:"";
  position:absolute;
  inset:auto 14% 16px;
  height:20px;
  border-radius:50%;
  background:rgba(42,29,16,.08);
  filter:blur(12px);
  pointer-events:none;
}

.accessories-system-page .system-img img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:26px;
  object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(42,29,16,.12));
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease;
}

.accessories-system-page .system-card:hover .system-img img{
  transform:translateY(-5px) scale(1.025);
  filter:drop-shadow(0 22px 22px rgba(42,29,16,.17));
}

.accessories-system-page .system-info{
  display:flex;
  flex:1;
  flex-direction:column;
  min-height:245px;
  padding:26px 26px 24px !important;
  text-align:left;
}

.accessories-system-page .system-info p{
  min-height:0;
  margin:0 0 12px !important;
  color:var(--lhs-products-gold);
  font-size:10px !important;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.16em !important;
}

.accessories-system-page .system-info h2{
  min-height:58px;
  margin:0 0 20px !important;
  color:var(--lhs-products-ink);
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:23px !important;
  font-weight:400 !important;
  line-height:1.22;
  letter-spacing:-.015em;
}

.accessories-system-page .system-price{
  margin:auto 0 18px;
  color:var(--lhs-products-ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:21px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
}

.accessories-system-page .system-add-btn{
  width:100%;
  min-height:52px;
  padding:0 18px;
  border:1px solid var(--lhs-products-ink);
  border-radius:999px;
  background:linear-gradient(135deg,#201914 0%,#0d0b09 100%);
  color:#f0d7a9;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  box-shadow:0 12px 24px rgba(25,18,12,.12);
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
}

.accessories-system-page .system-add-btn:hover,
.accessories-system-page .system-add-btn.is-added{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#c89a55 0%,#a66e2c 100%) !important;
  color:#fff !important;
  box-shadow:0 16px 30px rgba(111,73,30,.24);
}

.accessories-system-page .system-add-btn:focus-visible,
.accessories-system-page .lhs-adhesive-guide-banner:focus-visible{
  outline:2px solid rgba(168,116,50,.55);
  outline-offset:4px;
}

html[dir="rtl"] .accessories-system-page .system-info{
  text-align:right;
}

@media(max-width:980px){
  .accessories-system-page .systems-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .accessories-system-page .system-intro{
    margin:48px auto 30px;
    padding-inline:20px;
  }

  .accessories-system-page .systems-grid{
    grid-template-columns:1fr;
    gap:22px !important;
    padding-inline:18px;
  }

  .accessories-system-page .system-img{
    height:320px;
    flex-basis:320px;
  }

  .accessories-system-page .system-info{
    min-height:225px;
    padding:23px 22px 22px !important;
  }

  .accessories-system-page .system-info h2{
    min-height:0;
    font-size:22px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .accessories-system-page .system-card,
  .accessories-system-page .system-img img,
  .accessories-system-page .system-add-btn,
  .accessories-system-page .lhs-adhesive-guide-banner{
    transition:none;
  }
}