html[data-theme="light"], html:not([data-theme="dark"]) {
  --bg:       oklch(97.8% .009 250);
  --surface:  oklch(100% 0 0);
  --surface2: oklch(95.2% .015 250);
  --ink:      oklch(21% .035 258);
  --muted:    oklch(50% .028 256);
  --line:     oklch(89% .018 252);

  --green:  oklch(52% .175 258);
  --green2: oklch(43% .155 260);
  --blue:   oklch(52% .175 258);
  --gold:   oklch(76% .135 76);
  --red:    oklch(56% .175 24);

  --v9-accent:  oklch(52% .175 258);
  --v9-accent2: oklch(60% .165 246);
  --v9-tint:    oklch(96% .028 252);
  --v9-tint2:   oklch(92.5% .048 252);
  --v9-deep:    oklch(31% .105 262);
  --v9-on:      #fff;

  --sf-line: var(--line);
  --sf-hair: color-mix(in oklch, var(--line), transparent 30%);
  --sf-soft: var(--v9-tint);
  --sf-ring: 0 0 0 3px color-mix(in oklch, var(--v9-accent), transparent 76%);
  --sf-shadow-1: 0 1px 2px oklch(30% .06 258 / .06), 0 8px 22px -14px oklch(30% .06 258 / .18);
  --sf-shadow-2: 0 16px 44px -20px oklch(30% .06 258 / .28);
  --sf-shadow-3: 0 30px 70px -28px oklch(30% .06 258 / .34);
}

html[data-theme="dark"] {
  --bg:       oklch(17.5% .022 262);
  --surface:  oklch(21.5% .026 262);
  --surface2: oklch(26% .030 262);
  --ink:      oklch(95.5% .010 250);
  --muted:    oklch(72% .020 252);
  --line:     oklch(33% .030 262);

  --green:  oklch(74% .140 254);
  --green2: oklch(82% .105 252);
  --blue:   oklch(74% .140 254);
  --gold:   oklch(80% .115 78);
  --red:    oklch(68% .165 24);

  --v9-accent:  oklch(72% .150 254);
  --v9-accent2: oklch(80% .120 248);
  --v9-tint:    color-mix(in oklch, var(--v9-accent), transparent 88%);
  --v9-tint2:   color-mix(in oklch, var(--v9-accent), transparent 78%);
  --v9-deep:    oklch(88% .060 252);
  --v9-on:      oklch(16% .030 262);

  --sf-soft: var(--v9-tint);
  --sf-ring: 0 0 0 3px color-mix(in oklch, var(--v9-accent), transparent 74%);
}

.v9-grad, .sf-hero, .sfbtn.dark {
  background-image: linear-gradient(135deg, var(--v9-accent) 0%, var(--v9-accent2) 55%, var(--v9-deep) 100%);
}

.sf-util { background: var(--v9-deep); color: color-mix(in oklch, #fff, transparent 12%) }
html[data-theme="dark"] .sf-util { background: var(--surface2); color: var(--muted) }
.sf-util a:hover { color: #fff }
html[data-theme="dark"] .sf-util a:hover { color: var(--v9-accent) }
.sf-util .dot { background: oklch(78% .17 148) }

.sf-head { border-bottom: 1px solid var(--sf-hair) }
.sf-head.is-stuck { box-shadow: 0 1px 0 var(--sf-hair), 0 16px 34px -28px oklch(30% .08 258 / .5) }

.sf-brand-mark {
  background-image: linear-gradient(135deg, var(--v9-accent), var(--v9-accent2));
  color: #fff; box-shadow: 0 8px 20px -12px color-mix(in oklch, var(--v9-accent), transparent 30%);
}

.sf-navbar { background: var(--surface); border-bottom: 1px solid var(--sf-hair) }

.sf-navbar .sf-all,
.sf-navbar .sf-all:link,
.sf-navbar .sf-all:visited,
.sf-navbar .sf-all:hover,
.sf-navbar .sf-all:focus,
.sf-navbar .sf-all:focus-visible,
.sf-navbar .sf-all:active {
  background-color: transparent;
  background-image: linear-gradient(135deg, var(--v9-accent), var(--v9-accent2));
  color: var(--v9-on, #fff);
  border-color: transparent;
  box-shadow: 0 8px 20px -14px color-mix(in oklch, var(--v9-accent), transparent 25%);
  transition: filter .15s, box-shadow .15s;
}
html[data-theme="dark"] .sf-navbar .sf-all,
html[data-theme="dark"] .sf-navbar .sf-all:hover,
html[data-theme="dark"] .sf-navbar .sf-all:focus-visible { color: oklch(16% .03 262) }
.sf-navbar .sf-all:hover,
.sf-navbar .sf-all:focus-visible {
  filter: brightness(1.07);
  box-shadow: 0 12px 26px -14px color-mix(in oklch, var(--v9-accent), transparent 15%);
}
.sf-navbar .sf-all:focus-visible { outline: 2px solid var(--v9-accent); outline-offset: 2px }
.sf-navbar .sfnav-link:hover, .sf-navbar .sfnav-link.on { color: var(--v9-accent); background: var(--v9-tint) }

.sfbtn, .btn { border-radius: 12px }
.sfbtn:not(.ghost):not(.light), .btn:not(.outline):not(.ghost):not(.light) {
  background-image: linear-gradient(135deg, var(--v9-accent), var(--v9-accent2));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px -14px color-mix(in oklch, var(--v9-accent), transparent 25%);
}
.sfbtn:not(.ghost):not(.light):hover, .btn:not(.outline):not(.ghost):not(.light):hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 26px -14px color-mix(in oklch, var(--v9-accent), transparent 15%);
}
.sfbtn.ghost, .btn.outline { border-color: var(--sf-line); color: var(--v9-accent); background: transparent }
.sfbtn.ghost:hover, .btn.outline:hover { background: var(--v9-tint); border-color: var(--v9-accent) }

input:focus, select:focus, textarea:focus { outline: 0; box-shadow: var(--sf-ring); border-color: var(--v9-accent) }

.sf-act.cart {
  background-image: linear-gradient(135deg, var(--v9-accent), var(--v9-accent2));
  border-color: transparent; color: #fff;
}
.sf-act.cart:hover { filter: brightness(1.07); background-image: linear-gradient(135deg, var(--v9-accent), var(--v9-accent2)) }

.sf-head .sf-act.sf-act-login,
.sf-head .sf-acct.open .sf-act.sf-act-login,
.sf-head .sf-act.sf-act-login:hover,
.sf-head .sf-act.sf-act-login:focus-visible {
  background: var(--v9-accent) !important;
  background-image: linear-gradient(135deg, var(--v9-accent), var(--v9-accent2)) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 8px 20px -13px color-mix(in oklch, var(--v9-accent), transparent 20%);
}
.sf-head .sf-act.sf-act-login .lbl,
.sf-head .sf-act.sf-act-login .sf-i,
.sf-head .sf-act.sf-act-login svg,
.sf-head .sf-acct.open .sf-act.sf-act-login .lbl,
.sf-head .sf-act.sf-act-login:hover .lbl,
.sf-head .sf-act.sf-act-login:hover .sf-i {
  color: #fff !important;
  opacity: 1 !important;
}
.sf-head .sf-act.sf-act-login:hover { filter: brightness(1.07) }
.sf-head .sf-act.sf-act-login .v9-sep { font-style: normal; opacity: .55; margin: 0 4px; font-weight: 400 }
.sf-head .sf-act.sf-act-login > .sf-i:last-child { width: 13px; height: 13px; opacity: .8 !important }

@media (min-width: 761px) {
  .sf-head .sf-act.sf-act-login .lbl { display: inline !important }
}
@media (max-width: 760px) {
  .sf-head .sf-act.sf-act-login { width: 42px; padding: 0; justify-content: center }
  .sf-head .sf-act.sf-act-login .lbl,
  .sf-head .sf-act.sf-act-login > .sf-i:last-child { display: none !important }
}
.sf-acct-guest .sfbtn.block { color: #fff !important }
.sf-acct-menu a:hover { background: var(--v9-tint); color: var(--v9-accent) }

.product, .sf-card {
  border-radius: 16px; border: 1px solid var(--sf-hair); background: var(--surface);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.product:hover, .sf-card:hover {
  transform: translateY(-3px); border-color: color-mix(in oklch, var(--v9-accent), transparent 60%);
  box-shadow: var(--sf-shadow-2);
}
.product .price b, .sf-price b { color: var(--v9-accent) }
.badge.off, .sf-off { background: var(--red); color: #fff }
.sf-chip:hover { border-color: var(--v9-accent); color: var(--v9-accent); background: var(--v9-tint) }

.v9cart { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .95fr); gap: 20px; align-items: start }

.v9cart-main { display: grid; gap: 12px; min-width: 0 }
.v9cart-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--sf-hair);
}
.v9cart-bar h2 { margin: 0; font-size: calc(15px * var(--fz-h2, 1)); font-weight: 900 }
.v9cart-bar .n {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 8px; display: grid; place-items: center;
  background: var(--v9-tint2); color: var(--v9-accent); font: 800 12px var(--font); font-size: calc(12px * var(--fz-base, 1))}
.v9cart-bar .spacer { margin-inline-start: auto }
.v9cart-bar a, .v9cart-bar button {
  font: 700 12px var(--font); color: var(--muted); background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 9px; font-size: calc(12px * var(--fz-btn, 1))}
.v9cart-bar a:hover { color: var(--v9-accent); background: var(--v9-tint) }
.v9cart-bar .danger:hover { color: var(--red); background: color-mix(in oklch, var(--red), transparent 92%) }

.v9line {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--sf-hair);
  position: relative;
}
.v9line + .v9line { margin-top: 0 }
.v9line.is-low { border-color: color-mix(in oklch, var(--gold), transparent 55%) }

.v9line-thumb {
  width: 92px; height: 92px; border-radius: 13px; overflow: hidden; background: var(--surface2);
  display: grid; place-items: center; font-size: calc(30px * var(--fz-table, 1)); flex: none; border: 1px solid var(--sf-hair);
}
.v9line-thumb img { width: 100%; height: 100%; object-fit: cover }

.v9line-body { min-width: 0; display: grid; gap: 7px }
.v9line-title { font: 800 14px/1.55 var(--font); margin: 0; color: var(--ink); font-size: calc(14px * var(--fz-table, 1))}
.v9line-title a:hover { color: var(--v9-accent) }
.v9line-opts { display: flex; flex-wrap: wrap; gap: 6px }
.v9line-opts span {
  font: 700 11px var(--font); padding: 3px 8px; border-radius: 7px;
  background: var(--surface2); color: var(--muted); font-size: calc(11px * var(--fz-table, 1))}
.v9line-meta { display: flex; flex-wrap: wrap; gap: 12px; font: 600 11.5px var(--font); color: var(--muted); font-size: calc(11.5px * var(--fz-table, 1))}
.v9line-meta .ok   { color: oklch(52% .15 150) }
.v9line-meta .warn { color: color-mix(in oklch, var(--gold), var(--ink) 22%) }
html[data-theme="dark"] .v9line-meta .ok { color: oklch(76% .15 150) }

.v9line-side { display: grid; gap: 10px; justify-items: end; align-content: start; min-width: 132px }
.v9line-price { font: 900 15px var(--font); color: var(--ink); white-space: nowrap; font-size: calc(15px * var(--fz-price, 1))}
.v9line-unit  { font: 600 11px var(--font); color: var(--muted); white-space: nowrap; font-size: calc(11px * var(--fz-table, 1))}
.v9line-was   { font: 600 11px var(--font); color: var(--muted); text-decoration: line-through; font-size: calc(11px * var(--fz-table, 1))}

.v9qty {
  display: inline-flex; align-items: center; background: var(--surface2);
  border: 1px solid var(--sf-hair); border-radius: 11px; overflow: hidden; height: 38px;
}
.v9qty button {
  width: 36px; height: 100%; border: 0; background: none; cursor: pointer;
  font: 800 17px var(--font); color: var(--v9-accent); line-height: 1; font-size: calc(17px * var(--fz-btn, 1))}
.v9qty button:hover:not(:disabled) { background: var(--v9-tint) }
.v9qty button:disabled { opacity: .35; cursor: not-allowed }
.v9qty input {
  width: 44px; height: 100%; border: 0; background: none; text-align: center;
  font: 800 13.5px var(--font); color: var(--ink); box-shadow: none !important; font-size: calc(13.5px * var(--fz-form, 1))}
.v9line-del {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font: 700 11.5px var(--font); padding: 5px 7px; border-radius: 8px; font-size: calc(11.5px * var(--fz-price, 1))}
.v9line-del:hover { color: var(--red); background: color-mix(in oklch, var(--red), transparent 92%) }

.v9sum { position: sticky; top: 88px; display: grid; gap: 12px }
.v9box { background: var(--surface); border: 1px solid var(--sf-hair); border-radius: 16px; padding: 16px }
.v9box h3 { margin: 0 0 12px; font: 900 14px var(--font); font-size: calc(14px * var(--fz-h3, 1))}
.v9row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font: 600 13px var(--font); font-size: calc(13px * var(--fz-table, 1))}
.v9row span { color: var(--muted) }
.v9row b { font-weight: 800; font-variant-numeric: tabular-nums }
.v9row.off b { color: oklch(52% .15 150) }
html[data-theme="dark"] .v9row.off b { color: oklch(78% .15 150) }
.v9row.free b { color: oklch(52% .15 150) }
.v9row.total {
  margin-top: 8px; padding-top: 13px; border-top: 1px dashed var(--sf-line);
  font-size: calc(14px * var(--fz-table, 1));
}
.v9row.total b { font-size: calc(19px * var(--fz-table, 1)); color: var(--v9-accent) }
.v9pay { margin-top: 14px }
.v9save {
  margin-top: 10px; padding: 9px 11px; border-radius: 11px; text-align: center;
  background: color-mix(in oklch, oklch(52% .15 150), transparent 92%);
  color: oklch(45% .15 150); font: 800 11.5px var(--font); font-size: calc(11.5px * var(--fz-base, 1))}
html[data-theme="dark"] .v9save { color: oklch(80% .15 150) }

.v9ship { display: grid; gap: 7px }
.v9ship-txt { font: 700 11.5px var(--font); color: var(--muted); font-size: calc(11.5px * var(--fz-base, 1))}
.v9ship-txt b { color: var(--v9-accent) }
.v9ship-track { height: 7px; border-radius: 99px; background: var(--surface2); overflow: hidden }
.v9ship-fill {
  height: 100%; border-radius: 99px; transition: width .5s var(--ease);
  background-image: linear-gradient(90deg, var(--v9-accent), var(--v9-accent2));
}
.v9ship.done .v9ship-fill { background-image: linear-gradient(90deg, oklch(55% .16 150), oklch(65% .15 155)) }

.v9coupon { display: flex; gap: 8px }
.v9coupon input { flex: 1; min-width: 0 }
.v9coupon-on {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px;
  background: var(--v9-tint); border: 1px dashed color-mix(in oklch, var(--v9-accent), transparent 55%);
  font: 800 12px var(--font); color: var(--v9-accent); font-size: calc(12px * var(--fz-base, 1))}
.v9coupon-on .spacer { margin-inline-start: auto }

.v9trust { display: grid; gap: 10px }
.v9trust div { display: flex; align-items: center; gap: 9px; font: 600 12px var(--font); color: var(--muted); font-size: calc(12px * var(--fz-base, 1))}
.v9trust .ic {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: var(--v9-tint); font-size: calc(14px * var(--fz-icon, 1));
}

.v9cross { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }

.v9empty { text-align: center; padding: 56px 20px; background: var(--surface); border: 1px solid var(--sf-hair); border-radius: 18px }
.v9empty .ic {
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center;
  background: var(--v9-tint); font-size: calc(34px * var(--fz-icon, 1));
}
.v9empty b { display: block; font: 900 17px var(--font); margin-bottom: 6px; font-size: calc(17px * var(--fz-base, 1))}
.v9empty p { color: var(--muted); font-size: calc(13px * var(--fz-base, 1)); margin: 0 0 18px }

.v9dock {
  display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--surface), transparent 4%);
  backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--sf-line);
  box-shadow: 0 -10px 30px -22px oklch(30% .06 258 / .45);
  align-items: center; gap: 12px;
}
.v9dock-info { display: grid; gap: 2px; min-width: 0 }
.v9dock-info span { font: 600 10.5px var(--font); color: var(--muted); font-size: calc(10.5px * var(--fz-base, 1))}
.v9dock-info b { font: 900 15px var(--font); color: var(--v9-accent); font-variant-numeric: tabular-nums; font-size: calc(15px * var(--fz-base, 1))}
.v9dock .sfbtn { flex: none; padding-inline: 22px; height: 46px; display: inline-flex; align-items: center }

@media (max-width: 1000px) {
  .v9cart { grid-template-columns: 1fr }
  .v9sum { position: static }
  .v9sum .v9box.is-checkout { display: none }
}

/* صفحه سبد داک محلی */
@media (max-width: 640px) {
  html:has(body.has-v9dock) {
    --sf-dock-b: calc(var(--sf-v9dock-h, 84px) + 10px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) {
  .v9line {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "thumb body" "side side";
    gap: 12px 12px; padding: 12px; border-radius: 14px;
  }
  .v9line-thumb { grid-area: thumb; width: 72px; height: 72px; border-radius: 11px }
  .v9line-body  { grid-area: body }
  .v9line-side  {
    grid-area: side; min-width: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 11px; border-top: 1px dashed var(--sf-line);
  }
  .v9line-title { font-size: calc(13px * var(--fz-table, 1)); -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden }
  .v9line-price { font-size: calc(14.5px * var(--fz-price, 1))}
  .v9line-unit { display: none }
  .v9qty { height: 36px }
  .v9qty button { width: 34px }
  .v9qty input { width: 40px }
  .v9line-del { position: absolute; top: 8px; inset-inline-end: 8px; padding: 4px 6px; font-size: 0 }
  .v9line-del::before { content: "✕"; font-size: calc(13px * var(--fz-price, 1))}

  .v9cart-bar { padding: 10px 12px; gap: 6px }
  .v9cart-bar h2 { font-size: calc(13.5px * var(--fz-h2, 1))}
  .v9cart-bar a, .v9cart-bar button { font-size: calc(11.5px * var(--fz-btn, 1)); padding: 5px 6px }

  .v9dock { display: flex }
  body.has-v9dock { padding-bottom: calc(var(--sf-v9dock-h, 84px) + env(safe-area-inset-bottom, 0px)) }
  body.has-v9dock .sf-bottomnav { display: none }

  .v9box { padding: 14px; border-radius: 14px }
  .v9cross { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 380px) {
  .v9line { grid-template-columns: 60px minmax(0, 1fr) }
  .v9line-thumb { width: 60px; height: 60px }
}

.v9alert {
  display: grid; gap: 8px; margin-bottom: 16px; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in oklch, var(--gold), transparent 90%);
  border: 1px solid color-mix(in oklch, var(--gold), transparent 62%);
}
.v9alert-head { display: flex; align-items: center; gap: 9px; font: 900 13px var(--font); color: color-mix(in oklch, var(--gold), var(--ink) 34%); font-size: calc(13px * var(--fz-base, 1))}
html[data-theme="dark"] .v9alert-head { color: var(--gold) }
.v9alert ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 5px }
.v9alert li { font: 600 12.5px/1.7 var(--font); color: var(--ink); font-size: calc(12.5px * var(--fz-base, 1))}
.v9alert li b { font-weight: 800 }
.v9alert li em { font-style: normal; color: var(--muted) }
.v9alert.is-removed {
  background: color-mix(in oklch, var(--red), transparent 92%);
  border-color: color-mix(in oklch, var(--red), transparent 68%);
}
.v9alert.is-removed .v9alert-head { color: color-mix(in oklch, var(--red), var(--ink) 20%) }
html[data-theme="dark"] .v9alert.is-removed .v9alert-head { color: var(--red) }

.v9specs { display: grid; gap: 12px }
.v9spec-group { border: 1px solid var(--sf-hair); border-radius: 14px; overflow: hidden; background: var(--surface) }
.v9spec-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 15px; cursor: pointer;
  background: var(--surface2); border: 0; font: 900 13px var(--font); color: var(--ink); text-align: start; font-size: calc(13px * var(--fz-base, 1))}
.v9spec-head .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--v9-tint); color: var(--v9-accent); flex: none }
.v9spec-head .n { margin-inline-start: auto; font: 700 11px var(--font); color: var(--muted); font-size: calc(11px * var(--fz-base, 1))}
.v9spec-head .arrow { transition: transform .2s var(--ease); color: var(--muted) }
.v9spec-group.open .v9spec-head .arrow { transform: rotate(180deg) }
.v9spec-body { display: none; padding: 4px 15px 12px }
.v9spec-group.open .v9spec-body { display: block }
.v9spec-row { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--sf-line) }
.v9spec-row:last-child { border-bottom: 0 }
.v9spec-row dt { font: 600 12.5px var(--font); color: var(--muted); font-size: calc(12.5px * var(--fz-base, 1))}
.v9spec-row dd { margin: 0; font: 700 12.5px var(--font); color: var(--ink); font-size: calc(12.5px * var(--fz-base, 1))}
.v9spec-swatch { display: inline-block; width: 13px; height: 13px; border-radius: 4px; vertical-align: -2px; margin-inline-end: 6px; border: 1px solid var(--sf-line) }
@media (max-width: 520px) {
  .v9spec-row { grid-template-columns: 1fr; gap: 2px }
}

.sf-progress i { background-image: linear-gradient(90deg, var(--v9-accent), var(--v9-accent2)) }
.sf-bottomnav a.on { color: var(--v9-accent) }
.sf-bottomnav a.on .ic { background: var(--v9-tint) }
.sf-foot { background: var(--surface); border-top: 1px solid var(--sf-line) }
.sf-foot h4 { color: var(--ink) }
.sf-foot-links a:hover { color: var(--v9-accent) }
.sf-ann { background-image: linear-gradient(135deg, var(--v9-deep), var(--v9-accent)) }
html[data-theme="dark"] .sf-ann { background-image: linear-gradient(135deg, var(--surface2), color-mix(in oklch, var(--v9-accent), transparent 72%)) }
::selection { background: color-mix(in oklch, var(--v9-accent), transparent 72%) }
* { scrollbar-color: color-mix(in oklch, var(--v9-accent), transparent 55%) transparent }