/* Raf — sıva duvar, ahşap raflar, asılı fiyat etiketleri */
.theme-raf {
  --bg: #f1eee6; --surface: #fbf9f4; --surface-2: #e9e4d8; --text: #3a3a30; --muted: #676559; --faint: #aba796;
  --line: rgba(58, 58, 48, .1); --radius: 16px; --price: var(--text);
  --wood: #c9a77c; --wood-d: #a8865c; --kraft: #e8d5b5;
}
body.theme-raf { background-color: var(--bg); background-image: radial-gradient(rgba(120, 110, 80, .05) 1px, transparent 1.2px); background-size: 6px 6px; }
.theme-raf [data-section] { scroll-margin-top: 66px; }

/* Dükkân tabelası */
.shop { position: relative; max-width: 680px; margin: 0 auto; padding: calc(8px + var(--safe-t)) 18px 0; text-align: center; }
.shop-tools { display: flex; justify-content: flex-end; }
.shop .tool { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sign { position: relative; display: inline-block; margin-top: 34px; animation: sway 6s ease-in-out infinite; transform-origin: 50% -40px; }
@keyframes sway { 50% { transform: rotate(1.2deg); } }
.rope { position: absolute; top: -40px; width: 2px; height: 46px; background: #8a7a5c; }
.rope.l { left: 22%; transform: rotate(8deg); } .rope.r { right: 22%; transform: rotate(-8deg); }
.sign-board { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 22px 12px 12px; border-radius: 14px; background: linear-gradient(180deg, #d8bb92, var(--wood) 60%, var(--wood-d)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 24px -14px rgba(80, 60, 30, .6); color: #3a2e1e; }
.sign-board::before { content: ''; position: absolute; inset: 5px; border-radius: 10px; border: 1.5px dashed rgba(58, 46, 30, .3); pointer-events: none; }
.sign-logo { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: var(--surface); color: var(--primary); font-family: var(--font-head); font-size: 24px; }
.shop h1 { font-size: clamp(24px, 7.4vw, 34px); font-weight: 400; line-height: 1.05; text-align: start; }
.tagline { color: var(--muted); font-size: 15.5px; margin-top: 16px; }
.meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.meta .status-pill, .meta .table-pill { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.meta .table-pill { background: var(--primary); color: #fff; box-shadow: none; }
.window { margin-top: 18px; aspect-ratio: 16 / 9; border-radius: 22px 22px 6px 6px; overflow: hidden; border: 8px solid var(--surface); box-shadow: 0 0 0 1px var(--line), 0 18px 30px -22px rgba(80,60,30,.6); }
.window img { width: 100%; height: 100%; object-fit: cover; }
.acts { max-width: 680px; margin: 0 auto; padding: 14px 18px 0; justify-content: center; flex-wrap: wrap; gap: 6px; }
.act { height: 38px; padding: 0 14px 0 10px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 2px 0 var(--line); font-size: 13.5px; font-weight: 600; }
.act-ic { color: var(--primary); }
.act-ic .icon { width: 16px; height: 16px; }
.banner { max-width: 644px; margin: 14px 18px 0; border-radius: 14px; background: var(--kraft); box-shadow: none; }
@media (min-width: 680px) { .banner { margin-inline: auto; } }

/* Reyonlar */
.aisles { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px; margin-top: 18px; padding: 8px 0 8px 12px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.aisles-row { flex: 1; display: flex; gap: 6px; overflow-x: auto; }
.aisles-row a { flex-shrink: 0; height: 38px; display: grid; place-items: center; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.aisles-row a.active { background: var(--primary); color: var(--on-primary); }
.aisles-btn { width: 46px; height: 40px; display: grid; place-items: center; flex-shrink: 0; }

/* Raf birimleri */
.store { max-width: 680px; margin: 0 auto; padding: 0 12px 30px; }
.unit { padding-top: 30px; }
.plaque { display: flex; justify-content: center; }
.plaque h2 { position: relative; padding: 8px 22px; border-radius: 8px; background: linear-gradient(180deg, #d8bb92, var(--wood)); color: #3a2e1e; font-size: 20px; font-weight: 400; box-shadow: 0 6px 12px -8px rgba(80,60,30,.6); }
.plaque h2::before, .plaque h2::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #8a7a5c; }
.plaque h2::before { left: 8px; } .plaque h2::after { right: 8px; }
.unit-desc { text-align: center; color: var(--muted); font-size: 14px; margin-top: 8px; }
.unit > .sec-closed { display: flex; width: fit-content; max-width: 100%; margin: 8px auto 0; }
.items { margin-top: 14px; }
.shelf { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 10px; margin-bottom: 34px; align-items: start; }
.shelf::before { content: ''; position: absolute; inset-inline: 0; top: calc(var(--jar-h, 108px) - 4px); height: 14px; border-radius: 3px; background: linear-gradient(180deg, #dcc199, var(--wood) 40%, var(--wood-d)); box-shadow: 0 10px 14px -8px rgba(80, 60, 30, .55); z-index: 0; }
.good { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.jar { position: relative; width: 100%; height: var(--jar-h, 108px); border-radius: 18px 18px 6px 6px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 3px rgba(255,255,255,.75), 0 10px 16px -10px rgba(80,60,30,.55); transition: transform .3s var(--spring); }
.good:active .jar { transform: translateY(-4px); }
.jar img { width: 100%; height: 100%; object-fit: cover; }
.jar .ph { background: var(--kraft); color: #6b5638; }
.jar .ph b { font-size: 34px; }
.jar .add { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; background: rgba(255,255,255,.95); color: var(--primary); box-shadow: 0 3px 8px -3px rgba(0,0,0,.35); }
.jar .add .icon { width: 15px; height: 15px; }
.tag-hang { position: relative; margin-top: 18px; padding: 5px 10px 5px 14px; border-radius: 4px 8px 8px 4px; background: #fffdf6; box-shadow: 0 2px 6px -2px rgba(80,60,30,.4); transform: rotate(-3deg); font-weight: 700; font-size: 13px; min-height: 26px; }
.tag-hang::before { content: ''; position: absolute; top: -12px; left: 18px; width: 1px; height: 14px; background: #8a7a5c; }
.hole { position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.good:nth-child(2) .tag-hang { transform: rotate(2deg); }
.good:nth-child(3) .tag-hang { transform: rotate(-1deg); }
.tag-hang small { font-weight: 600; }
.good h3 { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; line-height: 1.25; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sold { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #b91c1c; margin-top: 2px; }
.unavailable .items { opacity: .55; }
@media (min-width: 560px) { .theme-raf { --jar-h: 150px; } }

.cart-bar { background: var(--text); border-radius: 16px; }
.cta { border-radius: 14px; }
.foot-social a { box-shadow: 0 0 0 1px var(--line); }
body.dm-on { --kraft: #3a3326; }
body.dm-on .tag-hang { background: #2a2620; }