/* ============================================================
   YUE WORKS 悦香坊 — "coming soon" advisor panel
   ------------------------------------------------------------
   Kept in its own file rather than appended to theme.css, which
   is a verbatim copy of the approved design and stays diffable
   against it, or to opencart.css, which exists to reconcile
   core OpenCart markup with the design. This is neither: it is
   new theme UI, so it gets its own file and can be removed in
   one line if the feature is dropped.

   Everything here is namespaced .yw-adv-* so it cannot collide
   with core Bootstrap or with the bag drawer.
   ============================================================ */

/* ---------- the button ---------- */
.yw-adv-fab{
  position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px);
  z-index:1200; display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px;
  background:var(--walnut); color:var(--silk);
  font-family:var(--body); font-size:11.5px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  box-shadow:0 10px 30px rgba(43,35,31,.22);
  transition:transform .3s var(--out), background .3s var(--out), box-shadow .3s var(--out);
}
.yw-adv-fab:hover{background:var(--brass); transform:translateY(-2px); box-shadow:0 14px 34px rgba(168,130,67,.3)}
.yw-adv-fab[aria-expanded="true"]{opacity:0; pointer-events:none}

/* The pulse marks it as unreleased. It is decoration, so it stops
   entirely for anyone who has asked for reduced motion. */
.yw-adv-dot{
  width:7px; height:7px; border-radius:50%; background:var(--brass-lt);
  flex:none; box-shadow:0 0 0 0 rgba(194,156,94,.6);
  animation:ywAdvPulse 2.4s var(--ease) infinite;
}
@keyframes ywAdvPulse{
  0%{box-shadow:0 0 0 0 rgba(194,156,94,.55)}
  70%{box-shadow:0 0 0 9px rgba(194,156,94,0)}
  100%{box-shadow:0 0 0 0 rgba(194,156,94,0)}
}

/* On a narrow screen the label would sit over the page, so the
   button collapses to the dot alone. */
@media (max-width:600px){
  .yw-adv-fab{padding:12px; gap:0}
  .yw-adv-fab-t{display:none}
}

/* ---------- the panel ---------- */
.yw-adv-scrim{
  position:fixed; inset:0; z-index:1300;
  background:rgba(43,35,31,.42); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .35s var(--out);
}
.yw-adv-scrim.open{opacity:1}

.yw-adv{
  position:fixed; z-index:1310;
  right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px);
  width:min(420px, calc(100vw - 28px));
  max-height:min(640px, calc(100vh - 28px)); overflow-y:auto;
  padding:30px 26px 24px;
  background:var(--silk); border:1px solid var(--hair);
  box-shadow:0 24px 60px rgba(43,35,31,.26);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .35s var(--out), transform .35s var(--out);
}
.yw-adv.open{opacity:1; transform:none}

/* Centred on a phone, where a corner card would be most of the
   screen anyway and the offset just looks like a mistake. */
@media (max-width:600px){
  .yw-adv{left:14px; right:14px; bottom:14px; width:auto}
}

.yw-adv-x{
  position:absolute; top:14px; right:14px; width:30px; height:30px;
  display:grid; place-items:center;
}
.yw-adv-x span{
  position:absolute; width:15px; height:1px; background:var(--walnut);
  transition:background .25s var(--out);
}
.yw-adv-x span:first-child{transform:rotate(45deg)}
.yw-adv-x span:last-child{transform:rotate(-45deg)}
.yw-adv-x:hover span{background:var(--brass)}

.yw-adv-eyebrow{display:flex; align-items:center; gap:8px}
.yw-adv h3{font-size:1.6rem; margin:6px 0 8px}
.yw-adv-lede{font-size:13.5px; color:var(--muted); margin-bottom:18px}

/* ---------- moods ---------- */
.yw-adv-moods{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.yw-adv-mood{
  padding:9px 14px; border:1px solid var(--hair); border-radius:999px;
  font-size:12.5px; color:var(--walnut); background:var(--silk);
  transition:var(--out); transition-property:background,border-color,color;
}
.yw-adv-mood:hover{border-color:var(--brass); color:var(--brass)}
.yw-adv-mood.on{background:var(--walnut); border-color:var(--walnut); color:var(--silk)}

.yw-adv-rec{
  padding:16px 18px; margin-bottom:18px;
  background:var(--cashmere); border-left:2px solid var(--brass);
}
.yw-adv-rec-h{font-family:var(--display); font-size:1.25rem; margin:4px 0 4px}
.yw-adv-rec-p{font-size:12.5px; color:var(--muted); line-height:1.7}

.yw-adv .btn{width:100%}

.yw-adv-note{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--hair);
  font-size:11.5px; color:var(--muted); line-height:1.65;
}

/* The Chinese type stack needs a touch more room per line; the
   theme sets data-lang on <html> from the store's language. */
html[data-lang="zh"] .yw-adv h3{font-family:var(--cjk); font-size:1.4rem}
html[data-lang="zh"] .yw-adv-fab{letter-spacing:.08em}
html[data-lang="zh"] .yw-adv-rec-h{font-family:var(--cjk); font-size:1.1rem}

@media (prefers-reduced-motion:reduce){
  .yw-adv, .yw-adv-scrim, .yw-adv-fab{transition:none}
  .yw-adv-dot{animation:none}
}

/* Printing a shop page should not print a floating button. */
@media print{
  .yw-adv-fab, .yw-adv, .yw-adv-scrim{display:none !important}
}