/*
Theme Name: Fundas Star Child
Template: fundas-star
Author: STAR - grup 7 (ASIX Projecte 2)
Description: Tema fill del tema Fundas Star del professor. Aplica la paleta corporativa de STAR (azul noche #0F1633, dorado #F2B632, crema #F8F3EA, coral #F0675A) i sobreescriu portada, capcalera i peu. El tema pare no es modifica.
Version: 1.2.0
Text Domain: fundas-star-child
*/

/* ============================ 1. Paleta de marca ========================= */
:root {
  --fs-bg: #0F1633;
  --fs-surface: #18224a;
  --fs-surface-2: #1f2c5c;
  --fs-text: #F8F3EA;
  --fs-muted: #c9c4bb;
  --fs-primary: #F2B632;
  --fs-primary-2: #F0675A;
  --fs-accent: #F0675A;
  --fs-cream: #F8F3EA;
  --fs-border: rgba(248, 243, 234, .14);
  --fs-shadow: 0 18px 60px rgba(4, 8, 22, .5);
}
body {
  background: radial-gradient(circle at top right, rgba(242, 182, 50, .16), transparent 32%),
              radial-gradient(circle at 10% 60%, rgba(240, 103, 90, .10), transparent 30%), var(--fs-bg);
}

/* ============================ 2. Capcalera ============================== */
.site-header { background: rgba(15, 22, 51, .86); }
.brand { gap: 12px; font-size: 1.05rem; }
.brand-logo { display: block; width: 40px; height: 40px; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name small { font-weight: 600; font-size: .62rem; letter-spacing: .22em; color: var(--fs-primary); }
.site-nav a:hover { color: var(--fs-primary); }
.cart-link { border-color: rgba(242, 182, 50, .45); color: var(--fs-primary); }
.cart-link:hover { background: rgba(242, 182, 50, .14); color: var(--fs-primary); }
.nav-account { color: var(--fs-muted); }
.menu-toggle { display: none; }
.menu-toggle > summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--fs-border); border-radius: 12px; }
.menu-toggle > summary::-webkit-details-marker { display: none; }

/* ============================ 3. Botons i preus ========================= */
.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .wc-block-components-button {
  background: linear-gradient(135deg, var(--fs-primary), #f7cd66) !important;
  color: #0F1633 !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}
.btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .wc-block-components-button:hover {
  background: linear-gradient(135deg, var(--fs-primary-2), #f78d7f) !important;
  color: #fff !important;
}
.btn.secondary {
  background: transparent !important; color: var(--fs-cream) !important;
  border: 1px solid rgba(248, 243, 234, .35) !important;
}
.btn.secondary:hover { background: rgba(248, 243, 234, .08) !important; color: var(--fs-cream) !important; }
.eyebrow { border-color: rgba(242, 182, 50, .38); color: var(--fs-primary); background: rgba(242, 182, 50, .12); }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--fs-primary) !important; }
.woocommerce span.onsale {
  background: var(--fs-primary-2) !important; color: #fff !important;
  border-radius: 999px !important; padding: 6px 14px !important; min-height: 0 !important; line-height: 1.4 !important;
}
.woocommerce ul.products li.product { background: var(--fs-surface); transition: transform .18s ease, box-shadow .18s ease; }
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--fs-shadow); }

/* ============================ 4. Portada ================================ */
.hero-media img { border-radius: 28px; box-shadow: var(--fs-shadow); }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; color: var(--fs-muted); font-size: .92rem; }
.hero-badges span { border: 1px solid var(--fs-border); border-radius: 999px; padding: 7px 14px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat-card { display: block; border: 1px solid var(--fs-border); border-radius: 24px; overflow: hidden; background: var(--fs-surface); box-shadow: var(--fs-shadow); transition: transform .18s ease; }
.cat-card:hover { transform: translateY(-4px); }
.cat-card img { display: block; width: 100%; aspect-ratio: 9 / 6; object-fit: cover; }
.cat-card .cat-body { padding: 20px 22px 24px; }
.cat-card h3 { margin: 0 0 6px; }
.cat-card p { margin: 0 0 10px; color: var(--fs-muted); }
.cat-links { display: flex; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: var(--fs-primary); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chips a { border: 1px solid var(--fs-border); border-radius: 999px; padding: 9px 16px; color: var(--fs-muted); font-weight: 650; }
.chips a:hover { border-color: var(--fs-primary); color: var(--fs-primary); }

.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center;
  border: 1px solid var(--fs-border); border-radius: 28px; padding: 30px; background: linear-gradient(160deg, rgba(242,182,50,.10), rgba(240,103,90,.06)); }
.split img { border-radius: 20px; }
.split ul { color: var(--fs-muted); padding-left: 18px; }

.benefit .category-icon { color: var(--fs-primary); }

/* ===================== 4b. Checkout classic (pagaments) ================= */
.woocommerce-checkout #payment {
  background: var(--fs-surface); border: 1px solid var(--fs-border);
  border-radius: 20px; padding: 20px;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--fs-border); padding: 0 0 14px; margin: 0 0 14px;
}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; padding: 8px 0; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 700; color: var(--fs-text); }
.woocommerce-checkout #payment div.payment_box {
  background: linear-gradient(160deg, rgba(242,182,50,.14), rgba(240,103,90,.06)) !important;
  color: var(--fs-text) !important; border: 1px solid rgba(242,182,50,.28);
  border-radius: 14px; margin: 10px 0 4px; padding: 16px 18px; font-size: .95rem;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: rgba(242,182,50,.3) !important; }
.woocommerce-checkout #payment div.payment_box label { color: var(--fs-muted); font-weight: 600; font-size: .86rem; }
.woocommerce-checkout #payment div.payment_box input.input-text {
  width: 100%; margin-top: 4px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25); background: #fff; color: #111;
  font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em;
}
.woocommerce-checkout #payment .place-order { padding-top: 10px; }
.woocommerce form .form-row label, .woocommerce-checkout h3 { color: var(--fs-text); }
.woocommerce table.shop_table { border-color: var(--fs-border); color: var(--fs-text); border-radius: 14px; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--fs-border); }
.woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text { color: var(--fs-muted); font-size: .9rem; }
.woocommerce-order, .woocommerce-order-overview { color: var(--fs-text); }

/* ============================ 5. Contingut ============================== */
.entry-content h2 { margin-top: 36px; color: var(--fs-text); }
.entry-content h3 { margin-top: 22px; color: var(--fs-text); }
.entry-content .lead { font-size: 1.15rem; color: var(--fs-text); }
.entry-content table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.entry-content th, .entry-content td { border: 1px solid var(--fs-border); padding: 10px 12px; text-align: left; color: var(--fs-muted); }
.entry-content th { color: var(--fs-text); background: rgba(248, 243, 234, .06); }
.entry-content a { color: var(--fs-primary); text-decoration: underline; }
.entry-content hr { border: 0; border-top: 1px solid var(--fs-border); margin: 28px 0; }

/* ============================ 6. Peu =================================== */
.site-footer { background: rgba(9, 13, 32, .6); }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding-bottom: 26px; }
.footer-cols h4 { margin: 0 0 12px; color: var(--fs-text); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-cols a:hover { color: var(--fs-primary); }
.footer-brand p { margin: 10px 0 0; max-width: 34ch; }
.footer-bottom { border-top: 1px solid var(--fs-border); padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .9rem; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--fs-primary); }
.pay-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-badges span { border: 1px solid var(--fs-border); border-radius: 8px; padding: 4px 10px; font-size: .8rem; }

/* ============================ 7. Avis de botiga de proves =============== */
/* WooCommerce el posa fix a dalt i tapa la capcalera: el fem estatic */
.woocommerce-store-notice, p.demo_store {
  position: static !important; margin: 0 !important;
  background: var(--fs-primary) !important; color: #0F1633 !important;
  font-weight: 700; text-align: center; padding: 10px 16px !important;
}
body.woocommerce-demo-store { padding-top: 0 !important; }
.woocommerce-store-notice a, p.demo_store a { color: #0F1633 !important; text-decoration: underline; }

/* ============================ 8. Responsive ============================= */
@media (max-width: 900px) {
  .grid-3, .footer-cols, .split { grid-template-columns: 1fr !important; }
  .menu-toggle { display: block; }
  .site-nav.desktop { display: none; }
  .menu-toggle .site-nav { display: grid; gap: 12px; padding: 14px 0; }
}

/* =======================================================================
   CAPA D'ANIMACIO I 3D  (afegit 06/10/2026)
   Tot el que te a veure amb el moviment viu aqui baix, separat de la resta,
   perque es pugui treure sencer si mai fa nosa.
   ======================================================================= */

/* ---- vel d'entrada: tapa la pagina mentre carrega i puja ---- */
.veu-carrega{position:fixed;inset:0;z-index:9999;background:var(--noche,#0F1633);
  display:grid;place-items:center;gap:22px}
.veu-carrega .veu-logo{font:800 30px/1 Georgia,serif;color:var(--oro,#F2B632);
  letter-spacing:.22em}
.veu-carrega .veu-pista{width:180px;height:2px;background:rgba(248,243,234,.18);
  border-radius:2px;overflow:hidden}
.veu-carrega .veu-barra{display:block;height:100%;width:100%;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--oro,#F2B632),#ffd977)}
.sense-moviment .veu-carrega{display:none}

/* ---- l'escena 3D de la portada ---- */
.hero{position:relative;overflow:hidden}
#hero3d{position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none}
.hero .hero-grid{position:relative;z-index:2}
.te-3d .hero-media{opacity:0;pointer-events:none}      /* la foto fixa sobra */
@media (max-width:860px){
  #hero3d{opacity:.42}
  .te-3d .hero-media{display:none}
}

/* ---- aparicions ---- */
[data-anim]{will-change:transform,opacity}
.sense-moviment [data-anim]{opacity:1!important;transform:none!important}

/* ---- ratlla daurada sota els titols de seccio ---- */
.section-head h2{position:relative;display:inline-block}
.section-head h2::after{content:"";position:absolute;left:0;bottom:-10px;height:3px;
  width:var(--ratlla,0%);border-radius:3px;
  background:linear-gradient(90deg,var(--oro,#F2B632),var(--coral,#F0675A))}

/* ---- targetes amb volum ---- */
.te-volum{transform-style:preserve-3d;position:relative;overflow:hidden}
.te-volum::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s;
  background:radial-gradient(420px circle at var(--llum-x,50%) var(--llum-y,50%),
             rgba(255,255,255,.22),transparent 55%)}
.te-volum:hover::after{opacity:1}
.te-volum img{transition:none}

/* ---- resplendor que segueix el cursor ---- */
.resplendor{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;z-index:1;opacity:.5;
  background:radial-gradient(circle,rgba(242,182,50,.16),transparent 62%);
  mix-blend-mode:screen}
@media (hover:none){.resplendor{display:none}}

/* ---- cinta de text en moviment ---- */
.cinta{overflow:hidden;padding:18px 0;border-block:1px solid rgba(15,22,51,.1);
  background:var(--crema,#F8F3EA)}
.cinta-pista{display:flex;gap:46px;width:max-content;white-space:nowrap}
.cinta-pista span{font:700 19px/1 Georgia,serif;color:var(--noche,#0F1633);
  display:flex;align-items:center;gap:46px;letter-spacing:.02em}
.cinta-pista span::after{content:"★";color:var(--oro,#F2B632);font-size:18px}

/* ---- xifres grans ---- */
.xifres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;
  text-align:center}
.xifra b{display:block;font:800 46px/1 Georgia,serif;color:var(--noche,#0F1633);
  letter-spacing:-.02em}
.xifra span{display:block;margin-top:8px;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:#6b7391}

/* ---- capcalera que s'amaga en baixar ---- */
.site-header{transition:transform .4s cubic-bezier(.4,0,.2,1),
  box-shadow .3s,background .3s}
.site-header.enganxada{position:sticky;top:0;z-index:50;
  background:rgba(248,243,234,.88);backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -22px rgba(15,22,51,.5)}
.site-header.amagada{transform:translateY(-100%)}

/* ---- botons: brillantor que creua en passar-hi per sobre ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  transition:transform .65s cubic-bezier(.22,1,.36,1)}
.btn:hover::after{transform:translateX(100%)}

/* ---- fitxes de producte de WooCommerce ---- */
ul.products li.product{transition:box-shadow .35s}
ul.products li.product:hover{box-shadow:0 26px 48px -28px rgba(15,22,51,.55)}
ul.products li.product img{border-radius:14px}

/* el desplacament suau de Lenis necessita aixo */
html.lenis-actiu,html.lenis-actiu body{height:auto}
.lenis-actiu.lenis-smooth{scroll-behavior:auto!important}

/* ---- desplegable de orden: era el <select> del navegador en crudo, blanco
       sobre fondo oscuro. Ahora va con el resto. ---- */
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select{
  appearance:none;-webkit-appearance:none;
  padding:11px 42px 11px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(248,243,234,.22);
  color:var(--crema,#F8F3EA);font:inherit;font-size:14px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2B632' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px;
  transition:border-color .2s,background-color .2s}
.woocommerce-ordering select:hover{border-color:var(--oro,#F2B632);
  background-color:rgba(242,182,50,.10)}
.woocommerce-ordering select:focus{outline:none;border-color:var(--oro,#F2B632);
  box-shadow:0 0 0 3px rgba(242,182,50,.18)}
/* la lista desplegada la pinta el sistema: ahi hace falta contraste propio */
.woocommerce-ordering select option{background:#0F1633;color:#F8F3EA}

/* ---- las fotos de producto ya no llevan fondo pegado: se apoyan en la
       tarjeta con una sombra suave ---- */
ul.products li.product img,
.woocommerce div.product div.images img{
  background:radial-gradient(60% 55% at 50% 45%,rgba(255,255,255,.07),transparent 70%);
  border-radius:16px}

/* ---- visor 3D de la fitxa de producte ---- */
.visor3d-caixa{margin:18px 0 0}
#visor3d{position:relative;display:none;width:100%;aspect-ratio:1/1;
  border-radius:18px;overflow:hidden;margin-top:14px;
  background:
    radial-gradient(70% 60% at 50% 40%,rgba(242,182,50,.10),transparent 70%),
    linear-gradient(170deg,#141c3e,#0a0f24);
  border:1px solid rgba(248,243,234,.12)}
#visor3d.obert{display:block}
#visor3d canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#visor3d canvas:active{cursor:grabbing}
#visor3d .visor3d-ajuda{position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-size:12px;color:rgba(248,243,234,.55);pointer-events:none;
  opacity:0;transition:opacity .4s}
#visor3d.llest .visor3d-ajuda{opacity:1}
#visor3d::after{content:"Cargando…";position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(248,243,234,.5);font-size:13px;transition:opacity .3s}
#visor3d.llest::after{opacity:0;pointer-events:none}