/* CLASH Jewelry — home page styles. Loaded only on index/home via pageStyles. */

/* ---------- hero ---------- */
.hero{padding:56px 0 64px;}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero__copy h1{font-size:clamp(38px,5vw,58px);font-weight:800;line-height:1.03;letter-spacing:-.025em;margin:14px 0 0;}
.hero__copy p{font-size:16.5px;color:var(--ink-2);line-height:1.6;margin:18px 0 0;max-width:440px;}
.hero__ctas{display:flex;gap:14px;margin-top:30px;}
.btn-primary{height:54px;padding:0 28px;border-radius:14px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;transition:.2s;}
.btn-primary:hover{background:#000;color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-ghost{height:54px;padding:0 26px;border-radius:14px;border:1.5px solid var(--line);color:var(--ink);font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;transition:.2s;}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-deep);}
.btn-cat{height:54px;padding:0 26px;border-radius:14px;background:var(--orange);color:#fff;font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;transition:.2s;}
.btn-cat:hover{background:#d97a3d;color:#fff;}
.hero__art{aspect-ratio:1/1;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-md);}

/* ---------- brand story + social ---------- */
.story{padding:20px 0 68px;}
.story__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;}
.story__text h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:12px 0 0;}
.story__text p{font-size:15px;color:var(--ink-2);line-height:1.7;margin:16px 0 0;max-width:420px;}
.story__text a{display:inline-block;margin-top:20px;font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid var(--orange);padding-bottom:3px;}
.story__text a:hover{color:var(--orange-deep);}
.social__head{margin-bottom:14px;}
.social__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.social__grid > div{aspect-ratio:1/1;border-radius:12px;overflow:hidden;}

/* ---------- product carousels ---------- */
.carousel-section{padding:16px 0 8px;}
.carousel__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;}
.carousel__head h2{font-size:26px;font-weight:800;letter-spacing:-.015em;margin:0;}
.carousel__head a{font-size:13px;font-weight:600;color:var(--orange-deep);white-space:nowrap;}
.carousel__head a:hover{text-decoration:underline;}
.carousel__wrap{position:relative;}
.carousel{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:0 28px;margin:0 -28px;}
.carousel::-webkit-scrollbar{display:none;}
.carousel__track{display:flex;gap:22px;width:max-content;padding:2px 0 28px;}
.ccard{display:block;width:230px;color:inherit;scroll-snap-align:start;flex:none;}
.carousel{scroll-snap-type:x proximity;}
.ccard__imgwrap{aspect-ratio:1/1;background:#fff;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;padding:10%;transition:.2s;position:relative;}
.ccard:hover .ccard__imgwrap{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft);}
.ccard__imgwrap img{width:100%;height:100%;object-fit:contain;transition:transform .4s cubic-bezier(.2,.7,.3,1);}
.ccard:hover .ccard__imgwrap img{transform:scale(1.05);}
.ccard__name{font-size:15px;font-weight:600;letter-spacing:-.005em;margin:13px 0 0;line-height:1.3;}
.ccard:hover .ccard__name{color:var(--orange-deep);}
.ccard__price{font-size:14px;font-weight:700;color:var(--ink-2);margin-top:3px;}
.wishbtn{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;z-index:2;transition:.15s;}
.wishbtn svg{width:17px;height:17px;stroke:var(--ink-2);fill:none;stroke-width:1.8;transition:.15s;}
.wishbtn:hover{border-color:var(--orange);}
.wishbtn.is-active svg{fill:var(--orange);stroke:var(--orange-deep);}
.carousel__nav{position:absolute;top:calc(50% - 14px);width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow-sm);z-index:5;transition:.16s;}
.carousel__nav:hover{border-color:var(--orange);color:var(--orange-deep);}
.carousel__nav.prev{left:-6px;}
.carousel__nav.next{right:-6px;}
@media (max-width:1000px){.carousel__nav{display:none;}}

/* ---------- email signup ---------- */
.signup{background:var(--orange);margin-top:24px;padding:64px 0;}
.signup__inner{text-align:center;max-width:560px;margin:0 auto;}
.signup__inner h2{color:#fff;font-size:clamp(26px,3vw,32px);font-weight:800;letter-spacing:-.02em;margin:0;}
.signup__inner p{color:rgba(255,255,255,.9);font-size:14.5px;margin:12px 0 26px;}
.signup__form{display:flex;gap:10px;max-width:420px;margin:0 auto;}
.signup__form input{flex:1;height:52px;border-radius:12px;border:none;padding:0 18px;font-size:14.5px;font-family:inherit;color:var(--ink);caret-color:var(--ink);}
.signup__form input:focus{outline:2px solid var(--ink);outline-offset:2px;}
.signup__form button{height:52px;padding:0 24px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;font-size:14.5px;white-space:nowrap;transition:.2s;}
.signup__form button:hover{background:#000;}

@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:32px;}
  .hero__art{order:-1;aspect-ratio:1/1;}
  .story__grid{grid-template-columns:1fr;gap:28px;}
  .story__text{order:2;}
}
@media (max-width:560px){
  .social__grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  .signup__form{flex-direction:column;}
  .signup__form button{width:100%;}
  .ccard{width:170px;}
}