.rec-section { scroll-margin-top:30px; padding:30px 0; min-width:0; outline:none; }
.rec-section [hidden],.rec-dock[hidden],.rec-notice[hidden] { display:none!important; }
.rec-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.rec-eyebrow { margin:0 0 7px; color:#8b6951; font-size:12px; letter-spacing:.09em; text-transform:uppercase; }
.rec-section h2 { margin:0; font-size:clamp(24px,3vw,34px); line-height:1.15; font-weight:600; color:#232927; }
.rec-text-button { background:none; border:0; padding:10px 4px; color:#8e471e; font:inherit; font-size:14px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.rec-description,.rec-empty { margin:0 0 20px; font-size:14px; line-height:1.6; color:#666d69; }
.rec-empty { padding:22px; background:#f6f4f0; border-radius:10px; }
.rec-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 16px; }
.rec-tile { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid #eeece7; border-radius:12px; overflow:hidden; }
/* Intrinsic image height must not determine the flex item or stretch the whole row. */
.rec-tile__photo { position:relative; flex:none; min-height:0; aspect-ratio:1; max-height:320px; margin:6px; overflow:hidden; background:#fff; }
.rec-tile__photo>a { position:absolute; inset:0; display:block; width:100%; height:100%; }
.rec-section .rec-tile__photo img { display:block; width:100%; height:100%; max-height:100%; margin:0; object-fit:contain; }
.rec-tile__actions { position:absolute; right:4px; top:4px; display:flex; gap:4px; z-index:2; }
button.rec-reaction { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:40px; height:40px; min-width:40px; padding:8px; border:1px solid #e6e3dc; border-radius:50%; color:#505b56; background:rgba(255,255,255,.94); box-shadow:none; cursor:pointer; font-size:14px; line-height:1.3; }
button.rec-reaction:disabled { opacity:.5; cursor:wait; }
button.rec-reaction[aria-pressed=true] { color:#d85324; border-color:#efbeaa; background:#fff4ed; }
button.rec-reaction[data-rec-action=like][aria-pressed=true] .rec-icon { fill:#d85324; }
.rec-icon { display:block; width:21px; height:21px; flex:none; }
.rec-reaction.btn { width:auto; border-radius:8px; height:auto; min-height:44px; }
.rec-reaction:focus-visible,.rec-text-button:focus-visible,.rec-dock a:focus-visible,.rec-dock button:focus-visible,.rec-tile a:focus-visible { outline:2px solid #d45822; outline-offset:3px; }
.card-catalog .card-catalog__body { position:relative; }
.card-catalog button.rec-reaction.card-catalog__btn { position:absolute; z-index:4; top:8px; right:8px; margin:0; opacity:1; visibility:visible; transform:none; }
.rec-tile__body { display:flex; flex-direction:column; flex:1; gap:8px; padding:12px 14px 14px; }
.rec-tile__title { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:57px; font-size:14px; line-height:19px; color:#232927!important; text-decoration:none!important; }
.rec-tile__price { font-size:18px; font-weight:600; margin-top:auto; }
.rec-tile__stock { color:#69716d; font-size:12px; line-height:18px; min-height:36px; }
.rec-tile .rec-text-button { text-align:left; align-self:flex-start; margin-top:auto; }
.rec-about { margin-top:20px; max-width:760px; color:#707773; font-size:12px; line-height:1.6; }
.rec-about summary { cursor:pointer; padding:8px 0; }
.rec-progress { margin:16px 0 0; font-size:13px; color:#707773; }
.rec-load-more { display:block; margin:24px auto 0; min-width:190px; min-height:44px; }
.rec-about p { margin:8px 0; }
.rec-fallback-wrap { max-width:1400px; margin:0 auto; padding:0 30px; }
.rec-dock { position:fixed; right:90px; bottom:20px; z-index:1040; display:flex; align-items:center; gap:8px; padding:10px 34px 10px 8px; width:max-content; max-width:min(380px,calc(100vw - 24px)); box-sizing:border-box; border:1px solid rgba(255,255,255,.8); border-radius:16px; background:rgba(255,253,248,.94); box-shadow:0 8px 24px rgba(35,52,44,.1),inset 0 1px 0 rgba(255,255,255,.65); touch-action:none; --rec-safe-top:env(safe-area-inset-top,0px); }
/* Blur only this small surface, never the content or the entire page. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .rec-dock { background:rgba(255,253,248,.68); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); }
}
@media(prefers-reduced-transparency:reduce) {
 .rec-dock { background:#fffdf8; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
.rec-dock[data-rec-positioned] { left:var(--rec-left); top:var(--rec-top); right:auto; bottom:auto; }
.rec-dock [data-rec-drag-handle] { cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.rec-dock.is-dragging,.rec-dock.is-dragging [data-rec-drag-handle] { cursor:grabbing; user-select:none; -webkit-user-select:none; }
.rec-dock.is-dragging { transition:none; }
.rec-dock__help { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.rec-dock__bulb { display:block; width:66px; flex:none; }
.rec-dock__bulb svg { display:block; width:66px; height:74px; }
.rec-dock .bulb-thought,.rec-dock .bulb-grin { display:none; }
.rec-dock .bulb-eyes { animation:rec-blink 7s infinite; transform-origin:46px 39px; }
@keyframes rec-blink { 0%,45%,49%,100% { transform:scaleY(1); } 47% { transform:scaleY(.15); } }
.rec-dock__title { display:block; font-size:12px; font-weight:600; margin:0 0 8px; color:#39463f!important; text-decoration:none!important; }
.rec-dock__thumbs { display:flex; gap:6px; }
.rec-dock__item { display:flex; align-items:center; gap:8px; }
.rec-dock__thumbs a { display:block; flex:none; width:64px; height:60px; border:0; background:transparent; border-radius:7px; overflow:hidden; }
.rec-dock__thumbs img { display:block; width:100%; height:100%; object-fit:contain; }
.rec-dock__actions { display:flex; justify-content:space-between; gap:4px; }
.rec-dock button.rec-reaction { width:36px; min-width:36px; height:32px; padding:6px; border:0; border-radius:7px; background:transparent; box-shadow:none; }
.rec-dock .rec-icon { width:18px; height:18px; }
.rec-dock__close { position:absolute; right:0; top:0; border:0; border-radius:50%; background:none; width:34px; height:34px; font-size:24px; color:#757c76; cursor:pointer; }
.rec-notice { position:absolute; bottom:calc(100% + 22px); right:0; width:100%; box-sizing:border-box; padding:24px 30px; color:#39463f; font-size:14px; line-height:1.45; text-align:center; pointer-events:none; filter:drop-shadow(0 4px 8px #29372c16); animation:rec-thought-in .18s ease-out; }
.rec-notice__cloud { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; fill:#fffdf7; stroke:#e5ded2; stroke-width:1; }
.rec-notice__cloud path { vector-effect:non-scaling-stroke; }
.rec-notice__text { position:relative; display:block; overflow-wrap:anywhere; }
.rec-notice::before,.rec-notice::after { content:""; position:absolute; border:1px solid #e5ded2; border-radius:50%; background:#fffdf7; }
.rec-notice::before { left:47px; bottom:-7px; width:13px; height:11px; }
.rec-notice::after { left:35px; bottom:-18px; width:7px; height:7px; }
.rec-dock[data-rec-notice-below] .rec-notice { top:calc(100% + 22px); bottom:auto; }
.rec-dock[data-rec-notice-below] .rec-notice::before { top:-7px; bottom:auto; }
.rec-dock[data-rec-notice-below] .rec-notice::after { top:-18px; bottom:auto; }
@keyframes rec-thought-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
body:has(dialog[open]) .rec-dock,body:has(.fancybox-container) .rec-dock { display:none!important; }
@media(hover:hover) { .rec-reaction:not(:disabled):hover { border-color:#d85324; color:#d85324; } .rec-tile:hover { border-color:#cfc6b7; } }
@media(max-width:767px) {
 .rec-section { padding:22px 0; scroll-margin-top:14px; }
 .rec-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
 .rec-tile__body { padding:10px; }
 .rec-tile__actions { top:0; right:0; gap:2px; }
 button.rec-reaction { width:40px; height:40px; }
 .rec-tile__price { font-size:17px; }
 .rec-dock { right:12px; bottom:calc(78px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; width:144px; max-width:calc(100vw - 24px); padding:6px 8px 4px; gap:2px 6px; border-radius:14px; }
 .rec-dock__bulb,.rec-dock__bulb svg { width:28px; height:34px; }
 .rec-dock__bulb { grid-column:1; grid-row:1; }
 .rec-dock__content { display:contents; }
 .rec-dock__title { grid-column:2; grid-row:1; font-size:10px; line-height:12px; margin:0; padding-right:18px; }
 .rec-dock__thumbs { grid-column:1 / -1; justify-content:center; }
 .rec-dock__item { flex-direction:column; gap:0; }
 .rec-dock__thumbs a { width:56px; height:56px; }
 .rec-dock__actions { gap:0; background:transparent; }
 .rec-dock button.rec-reaction { width:44px; min-width:44px; height:44px; border:0; box-shadow:none; background:transparent; }
 .rec-dock__close { width:26px; height:28px; top:2px; right:0; font-size:20px; }
 .rec-notice { left:var(--rec-notice-left,auto); right:0; width:220px; max-width:calc(100vw - 16px); padding:20px 24px; font-size:12px; }
 .rec-notice::before { left:var(--rec-notice-tail-before,33px); }
 .rec-notice::after { left:var(--rec-notice-tail-after,23px); }
 .rec-fallback-wrap { padding:0 15px; }
}
@media(prefers-reduced-motion:reduce) { .rec-dock .bulb-eyes,.rec-notice { animation:none; } }