:root {
  --cam-grey: #BFC3C2;
  --cam-grey-deep: #B1B6B5;
  --cam-grey-lift: #CDD0CF;
  --cam-dev: #1C1D1F;
  --cam-paper: #F3F0E8;
  --cam-tone: #5B2148;
  --cam-c41: #D9773A;
  --cam-hair: rgb(28 29 31 / .28);
  --cam-step: clamp(2.75rem, 1.6rem + 4.4vw, 6rem);
  --cam-arm: 22px;
  --cam-bar: 3px;
  --cam-head: 'Archivo', system-ui, sans-serif;
  --cam-read: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --cam-pull: 'Instrument Serif', Georgia, serif;
  --cam-arab: 'IBM Plex Sans Arabic', 'Archivo', system-ui, sans-serif;
}

.sf-hx__media,
.cameras-rule__plate,
.cameras-room__plate,
.sf-design-link,
.sf-coll-top--media {
  position: relative;
  padding: calc(var(--cam-bar) * 4);
  background-color: transparent;
  background-image:
    linear-gradient(var(--cam-dev) 0 0), linear-gradient(var(--cam-dev) 0 0),
    linear-gradient(var(--cam-dev) 0 0), linear-gradient(var(--cam-dev) 0 0),
    linear-gradient(var(--cam-dev) 0 0), linear-gradient(var(--cam-dev) 0 0),
    linear-gradient(var(--cam-dev) 0 0), linear-gradient(var(--cam-dev) 0 0);
  background-repeat: no-repeat;
  background-size:
    var(--cam-arm) var(--cam-bar), var(--cam-bar) var(--cam-arm),
    var(--cam-arm) var(--cam-bar), var(--cam-bar) var(--cam-arm),
    var(--cam-arm) var(--cam-bar), var(--cam-bar) var(--cam-arm),
    var(--cam-arm) var(--cam-bar), var(--cam-bar) var(--cam-arm);
  background-position:
    0 0, 0 0, 100% 0, 100% 0,
    0 100%, 0 100%, 100% 100%, 100% 100%;
}

.sf-eyebrow::before,
.sf-hx__eyebrow::before,
.cameras-eyebrow::before {
  content: "";
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-inline-end: 0.55em;
  border-radius: 50%;
  background: var(--cam-c41);
  vertical-align: 0.08em;
}

.sf-bar,
.sf-site-footer {
  --holes: repeating-linear-gradient(90deg, transparent 0 14px, var(--cam-grey) 14px 24px, transparent 24px 38px);
  background-color: var(--cam-dev);
}

.sf-bar {
  background-image: var(--holes), var(--holes);
  background-size: 100% 5px, 100% 5px;
  background-position: 0 4px, 0 calc(100% - 4px);
  background-repeat: repeat-x;
  padding-block: 0.85rem;
}

.sf-site-footer {
  background-image: var(--holes);
  background-size: 100% 6px;
  background-position: 0 10px;
  background-repeat: repeat-x;
  padding-block-start: 1.25rem;
}

html[lang=en] body {
  font-family: var(--cam-head);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.58;
}

html[lang=ar] body {
  font-family: var(--cam-arab);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.9;
}

html[lang=en] h1,
html[lang=en] h2,
html[lang=en] .sf-hx__title,
html[lang=en] .sf-title {
  font-family: var(--cam-head);
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  line-height: 1.02;
}

html[lang=en] h3 {
  font-family: var(--cam-head);
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

html[lang=ar] h1,
html[lang=ar] h2,
html[lang=ar] h3,
html[lang=ar] .sf-hx__title,
html[lang=ar] .sf-title {
  font-family: var(--cam-arab);
  font-weight: 700 !important;
  line-height: 1.4;
}

h1, h2, .sf-hx__title { text-wrap: balance; }

html[lang=en] .sf-hx__title { font-size: clamp(2.4rem, 1.1rem + 4.6vw, 5.2rem); }
html[lang=ar] .sf-hx__title { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.2rem); }

.sf-eyebrow,
.sf-hx__eyebrow,
.cameras-eyebrow,
.cameras-ro,
.sf-price,
.sf-swatch,
.sf-size {
  font-family: var(--cam-read);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sf-eyebrow,
.sf-hx__eyebrow,
.cameras-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--cam-dev);
}

.cameras-ro {
  unicode-bidi: isolate;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

html[lang=ar] .sf-eyebrow,
html[lang=ar] .cameras-eyebrow {
  font-family: var(--cam-arab);
  font-size: 0.94rem;
  letter-spacing: 0;
}

a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.sf-rte a, .sf-story a, .sf-about a { color: var(--cam-tone); }
.sf-rte a:hover, .sf-story a:hover { color: var(--cam-dev); }

.sf-bar p {
  color: var(--cam-paper);
  font-family: var(--cam-read);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

html[lang=ar] .sf-bar p { font-family: var(--cam-arab); font-size: 0.9rem; letter-spacing: 0; }

.sf-header__row {
  min-block-size: 4.75rem;
  box-shadow: inset 0 -2px 0 var(--cam-dev);
}

.sf-logo img { block-size: 2.6rem; inline-size: auto; }

html[lang=en] .sf-nav a {
  font-family: var(--cam-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

html[lang=ar] .sf-nav a { font-family: var(--cam-arab); font-weight: 600; font-size: 1rem; }

.sf-nav a:hover,
.sf-nav a[aria-current] {
  color: var(--cam-tone);
  text-decoration: underline 2px;
  text-underline-offset: 0.5em;
}

.sf-btn,
.sf-news button,
.sf-notify__button {
  border-radius: 0;
  border: 2px solid var(--cam-dev);
  background: var(--cam-dev);
  color: var(--cam-paper);
  font-family: var(--cam-read);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.95rem 1.7rem;
}

html[lang=ar] .sf-btn,
html[lang=ar] .sf-news button,
html[lang=ar] .sf-notify__button { font-family: var(--cam-arab); font-weight: 700; font-size: 1rem; letter-spacing: 0; }

.sf-btn:hover,
.sf-news button:hover { background: var(--cam-tone); border-color: var(--cam-tone); color: var(--cam-paper); }

.sf-btn--light { background: transparent; color: var(--cam-dev); }
.sf-btn--light:hover { background: var(--cam-dev); color: var(--cam-paper); }

.sf-hx { background: var(--cam-grey); color: var(--cam-dev); }
.sf-hx__media img { object-fit: contain; }
.sf-hx__sub { max-inline-size: 42ch; color: var(--sf-muted); font-size: 1.06rem; }

@media (min-width: 990px) {
  .sf-hx__text { padding-inline: clamp(2rem, 4.5vw, 4.5rem); }
}

.sf-rich--rule,
.sf-rich--room { padding-block: var(--cam-step); }

.sf-rich--room { background: var(--cam-dev); color: var(--cam-paper); }
.sf-rich--room .cameras-eyebrow,
.sf-rich--room h2 { color: var(--cam-paper); }
.sf-rich--room a { color: var(--cam-paper); }
.sf-rich--room .cameras-room__plate {
  background-image:
    linear-gradient(var(--cam-paper) 0 0), linear-gradient(var(--cam-paper) 0 0),
    linear-gradient(var(--cam-paper) 0 0), linear-gradient(var(--cam-paper) 0 0),
    linear-gradient(var(--cam-paper) 0 0), linear-gradient(var(--cam-paper) 0 0),
    linear-gradient(var(--cam-paper) 0 0), linear-gradient(var(--cam-paper) 0 0);
}

.cameras-rule,
.cameras-room {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}

@media (min-width: 990px) {
  .cameras-rule { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cameras-room { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cameras-room__plate { order: 2; }
}

.cameras-rule__plate img,
.cameras-room__plate img { display: block; inline-size: 100%; block-size: auto; }

.cameras-rule__plate figcaption {
  margin-block-start: 0.75rem;
  font-family: var(--cam-read);
  font-size: 0.74rem;
  color: var(--sf-muted);
}

html[lang=ar] .cameras-rule__plate figcaption { font-family: var(--cam-arab); font-size: 0.9rem; }

.cameras-rule__text p,
.cameras-room__text p { max-inline-size: 58ch; }

.cameras-rule__more a,
.cameras-room__more a {
  font-family: var(--cam-read);
  font-weight: 500;
  text-decoration-line: underline;
}

.cameras-table { overflow-x: auto; margin-block: 1.5rem 1rem; }
.cameras-table table { inline-size: 100%; border-collapse: collapse; }
.cameras-table th,
.cameras-table td {
  padding: 0.6rem 0.75rem;
  border-block-end: 1px solid var(--cam-hair);
  text-align: start;
  vertical-align: baseline;
}
.cameras-table thead th {
  font-family: var(--cam-read);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  border-block-end: 2px solid var(--cam-dev);
}
html[lang=ar] .cameras-table thead th { font-family: var(--cam-arab); font-size: 0.9rem; letter-spacing: 0; }
.cameras-table td:nth-child(2) { font-size: 1.15rem; }
.cameras-table tr.is-key th,
.cameras-table tr.is-key td { color: var(--cam-tone); font-weight: 700; }

.sf-kx-section { padding-block: var(--cam-step) 0; }

.sf-kx-section .sf-head,
.sf-row .sf-head {
  display: grid;
  gap: 0.35rem;
  padding-block-end: 0.9rem;
  margin-block-end: 1.75rem;
  box-shadow: inset 0 -2px 0 var(--cam-dev);
}

.sf-kx__card,
.sf-kx__media { border-radius: 0; }
.sf-kx__media { background: var(--cam-grey); }

html[lang=en] .sf-kx__card h3,
html[lang=en] .sf-kx__title {
  font-family: var(--cam-head);
  font-weight: 800 !important;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sf-kx__sub,
.sf-kx__card p {
  font-family: var(--cam-read);
  font-size: 0.8rem;
  color: var(--sf-muted);
}

html[lang=ar] .sf-kx__sub,
html[lang=ar] .sf-kx__card p { font-family: var(--cam-arab); font-size: 0.95rem; }

.sf-kx__more { background: var(--cam-dev); color: var(--cam-paper); }
.sf-kx__more a { color: inherit; }
.sf-kx__more .sf-kx__line { font-family: var(--cam-read); color: var(--cam-grey-lift); }

.sf-row { padding-block: var(--cam-step) 0; }
.sf-card__media,
.sf-ph { background: var(--cam-grey); border-radius: 0; }
.sf-card:hover .sf-card__media img { transform: scale(1.015); transition: transform 0.3s ease; }

html[lang=en] .sf-card__title {
  font-family: var(--cam-head);
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.01em;
}

html[lang=ar] .sf-card__title { font-family: var(--cam-arab); font-weight: 600; }

.sf-price { font-size: 0.86rem; color: var(--cam-dev); }
.sf-card__badge { border-radius: 0; background: var(--cam-dev); color: var(--cam-paper); font-family: var(--cam-read); }
.sf-card__swatches span { border-radius: 0; box-shadow: 0 0 0 1px var(--cam-hair); }

.sf-rich--hfaq { padding-block: var(--cam-step); }

@media (min-width: 990px) {
  .cameras-hfaq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; }
}

.cameras-hfaq__list details { border-block-end: 1px solid var(--cam-hair); }
.cameras-hfaq__list details:first-child { border-block-start: 2px solid var(--cam-dev); }
.cameras-hfaq__list summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.cameras-hfaq__list summary::-webkit-details-marker { display: none; }
.cameras-hfaq__list summary::after { content: "+"; font-family: var(--cam-read); color: var(--cam-tone); }
.cameras-hfaq__list details[open] summary::after { content: "−"; }
.cameras-hfaq__list p { padding-block-end: 1rem; max-inline-size: 64ch; color: var(--sf-muted); }
.cameras-hfaq__more a { font-family: var(--cam-read); color: var(--cam-tone); }

.sf-section--sunken:has(.sf-craft) { background: var(--cam-grey-deep); }
.sf-craft__grid > div { border-block-start: 2px solid var(--cam-dev); padding-block-start: 1.1rem; }
.sf-craft__grid svg { color: var(--cam-tone); stroke-width: 1.6; }
html[lang=en] .sf-craft__grid h3 { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.98rem; }

.sf-news { background: var(--cam-grey-lift); border: 2px solid var(--cam-dev); padding: clamp(1.5rem, 4vw, 3rem); }
.sf-news input { border-radius: 0; border: 2px solid var(--cam-dev); background: var(--cam-paper); }

.sf-chip {
  border-radius: 0;
  border: 1.5px solid var(--cam-dev);
  font-family: var(--cam-read);
  font-size: 0.78rem;
}

html[lang=ar] .sf-chip { font-family: var(--cam-arab); font-size: 0.95rem; }
.sf-chip.is-active,
.sf-chip:hover { background: var(--cam-dev); color: var(--cam-paper); }
.sf-group__head { box-shadow: inset 0 -1px 0 var(--cam-hair); padding-block-end: 0.6rem; }

html[lang=en] .sf-buy h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); }
.sf-buy .sf-btn { inline-size: 100%; }
.cameras-story p { font-size: 1.08rem; max-inline-size: 60ch; }
html[lang=en] .cameras-story p { font-family: var(--cam-pull); font-style: italic; font-size: 1.3rem; line-height: 1.35; }
.cameras-panel { border-block-start: 1px solid var(--cam-hair); padding-block: 0.25rem; }
.cameras-panel:last-child { border-block-end: 1px solid var(--cam-hair); }
.cameras-panel summary { cursor: pointer; padding-block: 0.8rem; font-family: var(--cam-read); font-weight: 500; }
html[lang=ar] .cameras-panel summary { font-family: var(--cam-arab); font-weight: 700; }

.sf-size[disabled],
.sf-size.is-soldout,
[aria-disabled=true].sf-size { text-decoration: line-through; opacity: 0.45; }

.sf-about__mark { max-inline-size: 21rem; margin-inline: auto; }
.sf-about .sf-figure,
.cameras-figure { margin-block: 2rem; }
.cameras-figure img { display: block; inline-size: 100%; block-size: auto; max-inline-size: 30rem; }

.cameras-designs { margin-block: 2.5rem; }
.cameras-designs h2 { display: flex; align-items: baseline; justify-content: space-between; box-shadow: inset 0 -2px 0 var(--cam-dev); padding-block-end: 0.5rem; }
.cameras-designs h2 span { font-family: var(--cam-read); font-size: 0.78rem; font-weight: 500; text-transform: none; }
html[lang=ar] .cameras-designs h2 span { font-family: var(--cam-arab); font-size: 0.95rem; }
.cameras-designs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.cameras-designs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.7rem; border-block-end: 1px solid var(--cam-hair); }
.cameras-designs li a { font-weight: 700; color: var(--cam-dev); text-decoration: none; }
.cameras-designs li a:hover { color: var(--cam-tone); }
.cameras-designs li span { font-family: var(--cam-read); font-size: 0.82rem; color: var(--sf-muted); }
html[lang=ar] .cameras-designs li span { font-family: var(--cam-arab); font-size: 0.95rem; }

@media (min-width: 750px) {
  .cameras-designs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}

.cameras-fold > summary { cursor: pointer; list-style: none; }
.cameras-fold > summary::-webkit-details-marker { display: none; }
.cameras-fold > summary h2 { display: inline; }
.cameras-sizeguide { display: grid; gap: 2rem; margin-block: 1.25rem 2.5rem; }
.cameras-sizecard h3 { margin-block-end: 0.35rem; }
.cameras-sizecard td,
.cameras-sizecard tbody th { font-family: var(--cam-read); font-variant-numeric: tabular-nums; }
.cameras-note { font-size: 0.9rem; color: var(--sf-muted); }

.sf-site-footer,
.sf-site-footer h2,
.sf-site-footer h3,
.sf-site-footer p { color: var(--cam-paper); }
.sf-footer a { color: var(--cam-paper); text-decoration: none; }
.sf-footer a:hover { color: var(--cam-c41); }
.sf-footer__copy { font-family: var(--cam-read); font-size: 0.74rem; color: var(--cam-grey-lift); }
html[lang=ar] .sf-footer__copy { font-family: var(--cam-arab); font-size: 0.88rem; }

:focus-visible { outline: 2px solid var(--cam-tone); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sf-card:hover .sf-card__media img { transform: none; transition: none; }
}