/* TabbyIced — design polish layer (enhance, never redesign).
   Loaded after the base <style> block in includes/header.php. */

/* 1 — Gold buttons: shine sweep on hover */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .55s ease}
.btn-gold:hover::after{left:130%}
.btn-gold:hover{box-shadow:0 8px 24px rgba(201,162,39,.35)}

/* 2 — Product cards: lift + gold edge glow */
.card:hover{transform:translateY(-6px);border-color:rgba(201,162,39,.55);
  box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(201,162,39,.25)}
.card-media{overflow:hidden}
.card-media img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.card:hover .card-media img{transform:scale(1.06)}

/* 3 — Category tiles: same lift language */
.cat-tile{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.cat-tile:hover{transform:translateY(-4px);border-color:rgba(201,162,39,.5);
  box-shadow:0 14px 30px rgba(0,0,0,.5)}

/* 4 — Section headings: softer gold rule with glow */
.gold-rule{background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 12px rgba(201,162,39,.6)}

/* 5 — Shared form controls (coupon, reviews, stock alerts, blog search) */
.ti-input,.ti-textarea{width:100%;background:#0b0b0c;border:1px solid #3a3a40;color:var(--txt);
  padding:.9rem 1.1rem;border-radius:6px;font-size:.95rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.ti-input:focus,.ti-textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.ti-textarea{min-height:110px;resize:vertical}
.ti-label{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);margin:0 0 .5rem}
.ti-err{color:#e88;font-size:.85rem;margin-top:.4rem}
.ti-ok{color:#8de08d;font-size:.85rem;margin-top:.4rem}

/* 6 — Star ratings */
.stars{display:inline-flex;gap:.15rem;font-size:1.05rem;line-height:1}
.stars .on{color:var(--gold2);text-shadow:0 0 8px rgba(232,200,90,.5)}
.stars .off{color:#3a3a40}
.stars-input{display:inline-flex;flex-direction:row-reverse;gap:.2rem}
.stars-input input{display:none}
.stars-input label{font-size:1.6rem;color:#3a3a40;cursor:pointer;transition:color .15s,transform .15s}
.stars-input label:hover,.stars-input label:hover~label{color:var(--gold2);transform:scale(1.12)}
.stars-input input:checked~label{color:var(--gold2)}

/* 7 — Small badges */
.ti-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .7rem;border-radius:20px}
.ti-badge.gold{background:rgba(201,162,39,.15);color:var(--gold2);border:1px solid rgba(201,162,39,.5)}
.ti-badge.red{background:rgba(220,80,80,.12);color:#e88;border:1px solid rgba(220,80,80,.4)}
.ti-badge.green{background:rgba(80,200,120,.12);color:#8de08d;border:1px solid rgba(80,200,120,.4)}

/* 8 — Review cards */
.rev-card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:1.4rem;transition:border-color .3s}
.rev-card:hover{border-color:rgba(201,162,39,.4)}

/* 9 — Footer links */
footer a{transition:color .2s}
footer a:hover{color:var(--gold2)}

/* 10 — Slim luxe scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0b0c}
::-webkit-scrollbar-thumb{background:#2c2c31;border-radius:6px;border:2px solid #0b0b0c}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* 11 — Smoother reveal (respects reduced motion via base rule) */
.reveal{transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}

/* 12 — Focus visibility for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}

/* 13 — Hero: gentle vignette for text legibility (keeps the new logo art intact) */
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.5))}

/* 14 — Blog cards reuse product-card language */
.post-card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-6px);border-color:rgba(201,162,39,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.post-card img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .6s ease}
.post-card:hover img{transform:scale(1.05)}
.post-card .pbody{padding:1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.post-card h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.35}
.post-card h3 a:hover{color:var(--gold2)}
.post-meta{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.post-card p{color:var(--mut);font-size:.92rem;flex:1}
.read-more{color:var(--gold2);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.read-more:hover{color:var(--gold)}

/* 15 — Article typography */
.article{max-width:820px;margin:0 auto}
.article h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:2.2rem 0 .8rem}
.article h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:1.8rem 0 .6rem;color:var(--gold2)}
.article p{color:#d8d5cf;margin:0 0 1.1rem;line-height:1.8}
.article ul,.article ol{color:#d8d5cf;margin:0 0 1.2rem 1.4rem;line-height:1.8}
.article a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.article img{border-radius:10px;margin:1.5rem 0}

/* 16 — Product gallery: show the full photo instead of cropping (mobile zoom-out fix) */
.pd-main img{object-fit:contain}
.pd-thumbs img{object-fit:contain}