/* ==========================================================================
   Deka Shop — editorial shop + single-product stylesheet.
   Loaded in addition to home-v1.css on /shop/ URLs (body.shop-editorial).
   Inherits every design token (--deka-*) from the home stylesheet and
   extends it with catalog / product-detail layout.
   ========================================================================== */

/* ── Shop hero ──────────────────────────────────────────────────────── */
.shop-editorial .shop-hero {
    padding: 160px 0 120px;
    background: var(--deka-ivory);
    color: var(--deka-ink);
}
.shop-editorial .shop-hero__meta {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    color: rgba(4, 5, 65, 0.55); margin-bottom: 80px;
}
.shop-editorial .shop-hero__meta .mono {
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.shop-editorial .shop-hero__title {
    font-size: clamp(48px, 6.5vw, 112px);
    max-width: 1100px;
}
.shop-editorial .shop-hero__sub {
    margin-top: 40px; max-width: 50ch;
    font-family: var(--deka-serif); font-style: italic; font-weight: 300;
    font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55;
    color: rgba(4, 5, 65, 0.72);
}

/* ── Systems row ────────────────────────────────────────────────────── */
.shop-editorial .shop-systems { padding: 120px 0; background: var(--deka-ivory); }
.shop-editorial .shop-systems__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; border-top: 1px solid var(--deka-rule); margin-top: 80px;
}
@media (max-width: 900px) { .shop-editorial .shop-systems__grid { grid-template-columns: 1fr; } }
.shop-editorial .shop-system {
    display: flex; flex-direction: column; gap: 24px;
    border-right: 1px solid var(--deka-rule); border-bottom: 1px solid var(--deka-rule);
    padding: 40px 36px 44px;
    transition: background .45s ease;
    color: var(--deka-ink);
}
.shop-editorial .shop-system:last-child { border-right: none; }
@media (max-width: 900px) { .shop-editorial .shop-system { border-right: none; } }
.shop-editorial .shop-system:hover { background: #fff; }
.shop-editorial .shop-system__visual {
    aspect-ratio: 5/4; position: relative;
    background:
        repeating-linear-gradient(135deg, rgba(4, 5, 65, 0.05) 0 2px, transparent 2px 12px),
        var(--deka-bone);
    border: 1px solid var(--deka-rule);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.shop-editorial .shop-system__visual .shape { width: 64%; aspect-ratio: 1/1; position: relative; }
.shop-editorial .shop-system__visual .shape .ring { position: absolute; inset: 0; border: 1px solid rgba(4, 5, 65, 0.3); border-radius: 50%; }
.shop-editorial .shop-system__visual .shape .ring-in { position: absolute; inset: 22%; border: 1px solid var(--deka-sapphire); border-radius: 50%; }
.shop-editorial .shop-system__visual .pv-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.shop-editorial .shop-system__visual .pv-photo img { height: 80%; width: auto; max-width: 60%; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(4, 5, 65, 0.2)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.shop-editorial .shop-system:hover .pv-photo img { transform: translateY(-6px) scale(1.02); }
.shop-editorial .shop-system__visual .tag { position: absolute; top: 16px; left: 16px; font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(4, 5, 65, 0.55); }
.shop-editorial .shop-system__visual .caption { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; font-family: var(--deka-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(4, 5, 65, 0.4); }
.shop-editorial .shop-system h3 { font-family: var(--deka-serif); font-weight: 400; font-size: 30px; letter-spacing: -0.01em; }
.shop-editorial .shop-system h3 .sm { display: block; font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--deka-sapphire); margin-bottom: 12px; font-weight: 500; }
.shop-editorial .shop-system p { font-size: 14px; line-height: 1.65; color: rgba(4, 5, 65, 0.7); max-width: 36ch; }
.shop-editorial .shop-system__meta { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--deka-rule); font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--deka-sapphire); margin-top: auto; }
.shop-editorial .shop-system__meta .arrow { display: inline-block; transition: transform .3s ease; color: var(--deka-ink); }
.shop-editorial .shop-system:hover .arrow { transform: translateX(6px); }

/* ── Catalog (accessories) ───────────────────────────────────────────── */
.shop-editorial .shop-catalog { padding: 140px 0 180px; background: var(--deka-bone); color: var(--deka-ink); }
.shop-editorial .shop-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 56px 0 40px;
}
.shop-editorial .shop-filter {
    padding: 10px 18px; border-radius: 999px;
    border: 1px solid rgba(4, 5, 65, 0.18);
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--deka-ink);
    background: transparent;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
    cursor: pointer;
}
.shop-editorial .shop-filter:hover { border-color: var(--deka-ink); }
.shop-editorial .shop-filter.active {
    background: var(--deka-ink); color: var(--deka-ivory); border-color: var(--deka-ink);
}
.shop-editorial .shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--deka-rule);
    border-left: 1px solid var(--deka-rule);
}
@media (max-width: 1100px) { .shop-editorial .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .shop-editorial .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .shop-editorial .shop-grid { grid-template-columns: 1fr; } }
.shop-editorial .shop-card {
    border-right: 1px solid var(--deka-rule);
    border-bottom: 1px solid var(--deka-rule);
    padding: 24px; display: flex; flex-direction: column; gap: 18px;
    background: var(--deka-bone);
    transition: background .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
    color: var(--deka-ink);
}
.shop-editorial .shop-card:hover { background: var(--deka-ivory); transform: translateY(-3px); }
.shop-editorial .shop-card[hidden] { display: none !important; }
.shop-editorial .shop-card__visual {
    aspect-ratio: 1/1;
    background: #fff;
    border: 1px solid var(--deka-rule);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.shop-editorial .shop-card__visual img {
    width: 86%; height: 86%; object-fit: contain;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.shop-editorial .shop-card:hover .shop-card__visual img { transform: scale(1.04); }
.shop-editorial .shop-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.shop-editorial .shop-card__kicker {
    font-family: var(--deka-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--deka-sapphire);
}
.shop-editorial .shop-card__title {
    font-family: var(--deka-serif); font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em;
    margin: 0;
}
.shop-editorial .shop-card__meta {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: auto; padding-top: 16px; border-top: 1px solid var(--deka-rule);
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.shop-editorial .shop-card__price { font-family: var(--deka-serif); font-size: 18px; font-weight: 400; letter-spacing: -0.01em; text-transform: none; color: var(--deka-ink); }
.shop-editorial .shop-card .arrow { transition: transform .3s ease; }
.shop-editorial .shop-card:hover .arrow { transform: translateX(5px); }

/* ── Product detail ──────────────────────────────────────────────────── */
.shop-editorial .product { padding: 140px 0 120px; background: var(--deka-ivory); color: var(--deka-ink); }
.shop-editorial .product--system { background: var(--deka-ink); color: var(--deka-ivory); }
.shop-editorial .product--system a { color: var(--deka-ivory); }

.shop-editorial .product__breadcrumbs {
    display: flex; gap: 12px; align-items: center;
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(4, 5, 65, 0.55); margin-bottom: 48px;
}
.shop-editorial .product--system .product__breadcrumbs { color: rgba(245, 244, 239, 0.55); }
.shop-editorial .product__breadcrumbs a { border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.shop-editorial .product__breadcrumbs a:hover { border-bottom-color: currentColor; }

.shop-editorial .product__wrap {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center;
}
@media (max-width: 960px) { .shop-editorial .product__wrap { grid-template-columns: 1fr; gap: 48px; } }

.shop-editorial .product__visual {
    aspect-ratio: 4/5; position: relative; overflow: hidden;
    background:
        linear-gradient(135deg, rgba(43, 82, 159, 0.10), rgba(4, 5, 65, 0.0)),
        repeating-linear-gradient(135deg, rgba(4, 5, 65, 0.04) 0 2px, transparent 2px 12px),
        var(--deka-bone);
    border: 1px solid var(--deka-rule);
    display: flex; align-items: center; justify-content: center;
}
.shop-editorial .product__visual--dark {
    background:
        linear-gradient(135deg, rgba(43, 82, 159, 0.12), rgba(4, 5, 65, 0.0)),
        repeating-linear-gradient(135deg, rgba(245, 244, 239, 0.04) 0 2px, transparent 2px 10px),
        #06074a;
    border-color: var(--deka-rule-light);
}
.shop-editorial .product__visual .sc-label { position: absolute; top: 20px; left: 20px; font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245, 244, 239, 0.55); }
.shop-editorial .product__visual .sc-frame { width: 74%; aspect-ratio: 3/4; position: relative; }
.shop-editorial .product__visual .sc-frame .ring { position: absolute; inset: 0; border: 1px solid rgba(245, 244, 239, 0.1); border-radius: 6px; }
.shop-editorial .product__visual .sc-frame .ring2 { inset: 10%; border-color: rgba(139, 142, 178, 0.25); animation: deka-pulse 4s ease-in-out infinite; }
.shop-editorial .product__visual .sc-frame .ring3 { inset: 25%; border-color: rgba(43, 82, 159, 0.5); animation: deka-pulse 4s ease-in-out infinite; animation-delay: -1.3s; border-radius: 50%; }
.shop-editorial .product__visual .sc-frame .dot { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--deka-brass); transform: translate(-50%, -50%); box-shadow: 0 0 40px 8px rgba(205, 175, 120, 0.5); }
.shop-editorial .product__photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.shop-editorial .product--system .product__photo img { height: 70%; width: auto; max-width: 60%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)); animation: deka-floaty 6s ease-in-out infinite; }
.shop-editorial .product--accessory .product__photo img { width: 80%; height: 80%; object-fit: contain; }

.shop-editorial .product__kicker {
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--deka-sapphire); margin-bottom: 16px;
}
.shop-editorial .product--system .product__kicker { color: var(--deka-brass); }
.shop-editorial .product__title {
    font-size: clamp(42px, 5vw, 84px); margin: 0;
}
.shop-editorial .product__tagline {
    font-family: var(--deka-serif); font-style: italic; font-weight: 300;
    font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4;
    margin-top: 24px; max-width: 40ch; opacity: 0.85;
}
.shop-editorial .product__body {
    font-size: 15px; line-height: 1.7; margin-top: 24px; max-width: 52ch;
    color: rgba(4, 5, 65, 0.72);
}
.shop-editorial .product--system .product__body { color: rgba(245, 244, 239, 0.78); }
.shop-editorial .product__price-block {
    margin-top: 40px; padding: 24px 0;
    border-top: 1px solid var(--deka-rule); border-bottom: 1px solid var(--deka-rule);
}
.shop-editorial .product--system .product__price-block { border-top-color: var(--deka-rule-light); border-bottom-color: var(--deka-rule-light); }
.shop-editorial .product__price-label {
    font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    opacity: 0.55; margin-bottom: 10px;
}
.shop-editorial .product__price {
    font-family: var(--deka-serif); font-weight: 300;
    font-size: clamp(32px, 3.5vw, 48px); letter-spacing: -0.02em;
}
.shop-editorial .product__price-note {
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
    opacity: 0.55; margin-top: 10px;
}
.shop-editorial .product__ctas { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Specs + includes grid ─────────────────────────────────────────── */
.shop-editorial .product-details { padding: 120px 0; background: var(--deka-bone); color: var(--deka-ink); }
.shop-editorial .product-details__grid {
    margin-top: 56px;
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px;
}
@media (max-width: 860px) { .shop-editorial .product-details__grid { grid-template-columns: 1fr; gap: 40px; } }
.shop-editorial .product-specs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid var(--deka-rule);
}
.shop-editorial .product-spec { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--deka-rule); }
.shop-editorial .product-spec:nth-child(odd) { border-right: 1px solid var(--deka-rule); padding-left: 0; padding-right: 24px; }
.shop-editorial .product-spec:nth-child(even) { padding-left: 24px; }
.shop-editorial .product-spec .k { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 8px; }
.shop-editorial .product-spec .v { font-family: var(--deka-serif); font-weight: 300; font-size: 22px; letter-spacing: -0.01em; }
.shop-editorial .product-spec .v sup { font-family: var(--deka-mono); font-size: 0.42em; vertical-align: top; margin-left: 3px; color: var(--deka-brass); font-weight: 400; }

.shop-editorial .product-includes {
    padding: 28px; border: 1px solid var(--deka-rule);
    background: var(--deka-ivory);
}
.shop-editorial .product-includes__title {
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
    opacity: 0.55; margin-bottom: 18px;
}
.shop-editorial .product-includes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.shop-editorial .product-includes li {
    font-family: var(--deka-serif); font-weight: 400; font-size: 16px; line-height: 1.5;
    padding-left: 22px; position: relative;
}
.shop-editorial .product-includes li::before {
    content: ''; position: absolute; left: 0; top: 0.7em;
    width: 12px; height: 1px; background: var(--deka-sapphire);
}

/* ── Compatibility row ─────────────────────────────────────────────── */
.shop-editorial .product-compat { padding: 120px 0; background: var(--deka-ivory); color: var(--deka-ink); }
.shop-editorial .product-compat__row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px; margin-top: 56px;
}
.shop-editorial .product-compat__card {
    padding: 24px; border: 1px solid var(--deka-rule); background: var(--deka-bone);
    display: flex; flex-direction: column; gap: 16px;
    transition: background .4s ease, transform .4s ease;
}
.shop-editorial .product-compat__card:hover { background: var(--deka-ivory); transform: translateY(-3px); }
.shop-editorial .product-compat__img {
    aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--deka-rule);
}
.shop-editorial .product-compat__img img { width: 80%; height: 80%; object-fit: contain; }
.shop-editorial .product-compat__name { font-family: var(--deka-serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
.shop-editorial .product-compat__sub { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--deka-sapphire); }

/* ── Related grid ─────────────────────────────────────────────────── */
.shop-editorial .product-related { padding: 120px 0 160px; background: var(--deka-bone); color: var(--deka-ink); }
.shop-editorial .product-related .shop-grid { margin-top: 56px; }