/* GOHSY Fashion TV — Shared Components */

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);background:rgba(10,10,10,0.75);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);transition:background var(--dur-normal) ease}
.nav--scrolled{background:rgba(10,10,10,0.95)}
.nav__brand{font-size:1rem;font-weight:var(--w-light);letter-spacing:var(--ls-widest);text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.nav__channels{display:flex;gap:var(--sp-1);position:absolute;left:50%;transform:translateX(-50%)}
.nav__ch{position:relative;padding:var(--sp-2) var(--sp-4);font-size:var(--text-xs);font-weight:var(--w-medium);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-3);transition:color var(--dur-normal) ease;white-space:nowrap}
.nav__ch::after{content:'';position:absolute;bottom:-1px;left:var(--sp-4);right:var(--sp-4);height:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform var(--dur-normal) var(--ease-out)}
.nav__ch:hover{color:var(--text-2)}
.nav__ch.is-active{color:var(--text)}
.nav__ch.is-active::after{transform:scaleX(1)}
.nav__actions{display:flex;gap:var(--sp-4);align-items:center;flex-shrink:0}
.nav__link{font-size:var(--text-xs);font-weight:var(--w-regular);letter-spacing:var(--ls-wide);color:var(--text-3);text-transform:uppercase;transition:color var(--dur-fast) ease}
.nav__link:hover{color:var(--text)}
@media(max-width:768px){.nav__channels{position:static;transform:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav__channels::-webkit-scrollbar{display:none}.nav__ch{padding:var(--sp-2) var(--sp-3);font-size:var(--text-micro)}.nav__actions{display:none}}

/* ── PLAYER BAR ── */
.player-bar{position:fixed;bottom:0;left:0;right:0;height:var(--player-h);z-index:var(--z-player);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);gap:var(--sp-4);background:rgba(10,10,10,0.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid var(--border);transform:translateY(100%);transition:transform var(--dur-slow) var(--ease-out)}
.player-bar.is-visible{transform:translateY(0)}
.player-bar__music{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.player-bar__art{width:40px;height:40px;border-radius:var(--r-sm);background:var(--elevated);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--text-small)}
.player-bar__meta{min-width:0}
.player-bar__title{font-size:var(--text-xs);font-weight:var(--w-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar__artist{font-size:var(--text-micro);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar__controls{display:flex;align-items:center;gap:var(--sp-4)}
.player-bar__btn{width:36px;height:36px;border-radius:var(--r-full);border:1px solid var(--border-bold);display:flex;align-items:center;justify-content:center;font-size:var(--text-small);transition:all var(--dur-fast) ease;color:var(--text)}
.player-bar__btn:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.player-bar__btn--play{width:40px;height:40px;background:var(--text);color:var(--bg);border:none}
.player-bar__btn--play:hover{transform:scale(1.08);background:var(--accent);color:var(--white)}
.player-bar__product{display:flex;align-items:center;gap:var(--sp-3);justify-content:flex-end;min-width:0}
.player-bar__thumb{width:40px;height:40px;border-radius:var(--r-sm);background:var(--elevated);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--text-small)}
.player-bar__buy{flex-shrink:0;padding:var(--sp-2) var(--sp-4);background:var(--accent);color:var(--white);font-size:var(--text-micro);font-weight:var(--w-semibold);letter-spacing:var(--ls-wide);text-transform:uppercase;border-radius:var(--r-full);transition:all var(--dur-fast) ease}
.player-bar__buy:hover{background:var(--accent-hover);transform:scale(1.04)}
@media(max-width:768px){.player-bar{height:var(--player-h-m);grid-template-columns:1fr auto auto;gap:var(--sp-3)}.player-bar__controls{gap:var(--sp-2)}.player-bar__btn{display:none}.player-bar__btn--play{display:flex;width:32px;height:32px}.player-bar__meta{display:none}}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-8);font-size:var(--text-xs);font-weight:var(--w-medium);letter-spacing:var(--ls-wider);text-transform:uppercase;border:1px solid var(--text-3);border-radius:0;color:var(--text);background:transparent;transition:all var(--dur-normal) var(--ease-out);white-space:nowrap;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:var(--text);transform:translateY(101%);transition:transform var(--dur-normal) var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--bg);border-color:var(--text)}
.btn span{position:relative;z-index:1}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn--accent::before{background:var(--white)}
.btn--accent:hover{color:var(--accent)}
.btn--ghost{border-color:transparent;color:var(--text-2)}
.btn--ghost::before{display:none}
.btn--ghost:hover{color:var(--text)}
.btn--lg{padding:var(--sp-4) var(--sp-12);font-size:var(--text-small)}
.btn--sm{padding:var(--sp-2) var(--sp-4);font-size:var(--text-micro)}
.btn--full{width:100%}

/* ── PRODUCT CARD ── */
.card{position:relative;overflow:hidden;cursor:pointer;transition:transform var(--dur-slow) var(--ease-out);display:block}
.card:hover{transform:translateY(-4px)}
.card__image{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--surface)}
.card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.card:hover .card__image img{transform:scale(1.05)}
.card__placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);background:var(--surface);transition:background var(--dur-normal) ease}
.card__placeholder-icon{font-size:2.5rem;opacity:0.3}
.card__placeholder-text{font-size:var(--text-display);font-weight:var(--w-black);letter-spacing:var(--ls-tight);opacity:0.04;position:absolute;white-space:nowrap}
.card:hover .card__placeholder{background:var(--elevated)}
.card__badge{position:absolute;top:var(--sp-3);left:var(--sp-3);padding:var(--sp-1) var(--sp-3);font-size:var(--text-micro);font-weight:var(--w-semibold);letter-spacing:var(--ls-wide);text-transform:uppercase;background:var(--bg);color:var(--text);border:1px solid var(--border-bold)}
.card__info{padding:var(--sp-4) 0}
.card__category{font-size:var(--text-micro);font-weight:var(--w-medium);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-1)}
.card__name{font-size:var(--text-body);font-weight:var(--w-light);margin-bottom:var(--sp-1)}
.card__price{font-size:var(--text-body);font-weight:var(--w-medium)}
.card__colors{display:flex;gap:var(--sp-1);margin-top:var(--sp-3)}
.color-dot{width:12px;height:12px;border-radius:var(--r-full);border:1px solid var(--border-bold);transition:transform var(--dur-fast) ease}
.color-dot:hover{transform:scale(1.3)}

/* ── SECTION ── */
.section{padding:var(--sp-24) 0;position:relative}
.section--flush{padding:0}
.section--sm{padding:var(--sp-16) 0}
.section__label{font-size:var(--text-micro);font-weight:var(--w-medium);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-6)}
.section__title{font-size:var(--text-h1);font-weight:var(--w-thin);letter-spacing:var(--ls-tight);margin-bottom:var(--sp-6)}
@media(max-width:768px){.section{padding:var(--sp-16) 0}}

/* ── OUTLINE TEXT ── */
.outline-text{font-size:var(--text-display);font-weight:var(--w-black);letter-spacing:var(--ls-tight);line-height:0.85;color:transparent;-webkit-text-stroke:1px var(--text-3);user-select:none}

/* ── FOOTER ── */
.footer{padding:var(--sp-24) 0 var(--sp-8);border-top:1px solid var(--border)}
.footer__brand{font-size:var(--text-h2);font-weight:var(--w-light);letter-spacing:var(--ls-widest);text-transform:uppercase;margin-bottom:var(--sp-2)}
.footer__tagline{font-size:var(--text-xs);color:var(--text-3);letter-spacing:var(--ls-wide);margin-bottom:var(--sp-12)}
.footer__links{display:flex;gap:var(--sp-8);margin-bottom:var(--sp-16);flex-wrap:wrap}
.footer__link{font-size:var(--text-xs);font-weight:var(--w-medium);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-3);transition:color var(--dur-fast) ease}
.footer__link:hover{color:var(--text)}
.footer__copy{font-size:var(--text-micro);color:var(--text-3)}
.page-spacer{height:var(--player-h)}
@media(max-width:768px){.page-spacer{height:var(--player-h-m)}.footer{padding:var(--sp-16) 0 var(--sp-6)}.footer__links{gap:var(--sp-4)}.footer__tagline{margin-bottom:var(--sp-8)}.footer__links{margin-bottom:var(--sp-10)}.next-channel{padding:var(--sp-16) var(--gutter)}.next-channel__name{font-size:var(--text-h2)}.section__title{font-size:var(--text-h2)}}

/* ── HOVER EFFECTS ── */
.hover-zoom{overflow:hidden}
.hover-zoom img{transition:transform var(--dur-slow) var(--ease-out)}
.hover-zoom:hover img{transform:scale(1.06)}
.hover-line{position:relative;display:inline-block}
.hover-line::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-normal) var(--ease-out)}
.hover-line:hover::after{transform:scaleX(1);transform-origin:left}

/* ── NEXT CHANNEL CTA ── */
.next-channel{text-align:center;padding:var(--sp-24) var(--gutter);border-top:1px solid var(--border)}
.next-channel__label{font-size:var(--text-micro);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-4)}
.next-channel__name{font-size:var(--text-h1);font-weight:var(--w-bold);transition:color var(--dur-fast) ease}
.next-channel a:hover .next-channel__name{color:var(--accent)}