/* Visual layer for the customer storefront and live room. Presentation only; loaded last.
   Behaviour, session gates and demo-only commerce rules live in the scripts, not here. */

/* Product cards are buttons: drop the native bevel and give them a calm card treatment. */
.shop-grid-scroll { gap: 18px 14px !important; padding: 14px 16px 20px !important; }
.shop-grid-card { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: left; }
.shop-grid-card:focus-visible { outline: 2px solid #b08a52; outline-offset: 4px; }
.shop-grid-card .sgc-img-box { margin-bottom: 9px; border: 0 !important; border-radius: 12px; background: #f3f0ec; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 5%); transition: box-shadow .2s; }
.shop-grid-card:hover .sgc-img-box { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%), 0 10px 24px rgb(40 30 20 / 12%); }
.shop-grid-card.active-pin .sgc-img-box { box-shadow: 0 0 0 2px #1d1915, 0 10px 24px rgb(40 30 20 / 14%); }
.shop-grid-card .sgc-live-tag { top: 8px; left: 8px; padding: 3px 9px 3px 8px; border-radius: 999px; background: rgb(20 17 14 / 82%); backdrop-filter: blur(4px); font-size: 10.5px; letter-spacing: .02em; }
.shop-grid-card .sgc-title { padding: 0 2px; color: #1d1915; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.shop-grid-card .sgc-price { padding: 0 2px; color: #a3324f; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Shop and bag switcher */
#mobileShopTabs { gap: 4px !important; padding: 4px !important; border-radius: 12px; background: #f3f0ec; }
#mobileShopTabs button { border: 0 !important; border-radius: 9px !important; font-weight: 650; }
#mobileShopTabs button[aria-selected=true] { background: #1d1915 !important; color: #fff !important; box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }

/* Desktop chat column */
.panel-top-header { font-weight: 650 !important; letter-spacing: .01em; }
.cw-item { position: relative; }
.cw-item .chat-reply-button, .el-mobile-chat .chat-reply-button { margin: 3px 0 0 4px; padding: 1px 8px; border: 0; border-radius: 999px; background: transparent; color: #7a6a58; font-size: 11px; font-weight: 600; cursor: pointer; }
.cw-item .chat-reply-button:hover, .cw-item .chat-reply-button:focus-visible { background: #f1ece5; color: #3e3125; }
@media (hover: hover) {
  .cw-item .chat-reply-button { opacity: 0; transition: opacity .15s; }
  .cw-item:hover .chat-reply-button, .cw-item:focus-within .chat-reply-button { opacity: 1; }
}
.cw-item .chat-quote, .vf-msg .chat-quote { border: 0; border-left: 3px solid #d8cbb8; border-radius: 6px; background: #f6f2ec; color: #5a4c3d; font-size: 11.5px; text-align: left; }

/* Phone overlay chat: quieter reply action over video */
#videoFloatingChatList .chat-reply-button { margin: 3px 0 0; padding: 1px 9px; min-height: 0; border: 0 !important; border-radius: 999px; background: rgb(255 255 255 / 14%) !important; color: rgb(255 255 255 / 85%) !important; font-size: 11px; font-weight: 600; backdrop-filter: blur(6px); }
#videoFloatingChatList .chat-quote { background: rgb(255 255 255 / 12%); border-left-color: rgb(255 255 255 / 45%); color: rgb(255 255 255 / 88%); }

/* Sound hint: high-contrast pill with a speaker glyph */
.viewer-sound-hint { display: inline-flex !important; align-items: center; gap: 9px; padding: 13px 20px 13px 16px !important; border: 0 !important; background: #fff !important; color: #1d1915 !important; box-shadow: 0 10px 30px rgb(0 0 0 / 35%); font-weight: 700 !important; }
.viewer-sound-hint[hidden] { display: none !important; }
.viewer-sound-hint::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='m17 9 4 6M21 9l-4 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='m17 9 4 6M21 9l-4 6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Storefront mini player and the reopen pill */
.floating-corner-mini { border-radius: 16px !important; box-shadow: 0 14px 36px rgb(0 0 0 / 32%), 0 0 0 1px rgb(255 255 255 / 10%) !important; }
.viewer-float-header button { background: rgb(18 14 12 / 46%) !important; backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgb(255 255 255 / 14%); }
.viewer-float-header #floatingDragHandle { font-weight: 800; letter-spacing: .04em; }
.viewer-live-pill { display: inline-flex; align-items: center; gap: 2px; border: 0 !important; background: #1d1915 !important; box-shadow: 0 10px 28px rgb(0 0 0 / 28%), 0 0 0 1px rgb(255 255 255 / 8%) !important; letter-spacing: .03em; }
.viewer-live-pill span { animation: viewer-live-dot 1.6s ease-in-out infinite; }
@keyframes viewer-live-dot { 50% { opacity: .35; } }

/* Product sheet */
.quick-sheet-card { border-radius: 18px !important; }
.qsc-var-btn { min-height: 46px; border-radius: 12px !important; border-color: #ddd5cb !important; transition: border-color .15s, background-color .15s; }
.qsc-var-btn:hover:not(:disabled) { border-color: #1d1915 !important; background: #faf8f5 !important; }

@media (prefers-reduced-motion: reduce) {
  .viewer-live-pill span { animation: none; }
  .shop-grid-card .sgc-img-box, .cw-item .chat-reply-button, .qsc-var-btn { transition: none; }
}