/*
Theme Name: ThePotlok
Theme URI: https://thepotlok.renderhost.me/
Description: The Potlok staging child theme for XStore, with a custom responsive homepage.
Author: The Potlok
Template: xstore
Version: 1.0.0
Text Domain: thepotlok
*/

/* The Potlok homepage styles */
:root {
  --potlok-ink: #171b19;
  --potlok-muted: #686b68;
  --potlok-line: #dededb;
  --potlok-warm: #f6f0ed;
  --potlok-content: 1320px;
}
body { color: var(--potlok-ink); }
.potlok-home { overflow: hidden; }
.potlok-container { width: min(var(--potlok-content), calc(100% - 48px)); margin-inline: auto; }
.potlok-promo { background: #19211e; color: #fff; text-align: center; padding: 9px 16px; font-size: 13px; letter-spacing: .02em; }
.potlok-hero { position: relative; min-height: clamp(340px, 38vw, 570px); display: flex; align-items: end; background: #d8d2c8 center/cover no-repeat; }
.potlok-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.38), rgba(0,0,0,.02) 78%), linear-gradient(0deg, rgba(0,0,0,.2), transparent 60%); }
.potlok-hero__content { position: relative; z-index: 1; width: min(var(--potlok-content), calc(100% - 48px)); margin: 0 auto; padding: 0 0 clamp(30px, 4vw, 58px); color: white; }
.potlok-hero h1 { color: white; font-size: clamp(36px, 5.3vw, 76px); line-height: .98; font-weight: 600; letter-spacing: -.035em; margin: 0 0 10px; max-width: 800px; }
.potlok-hero p { color: white; font-size: clamp(25px, 4vw, 58px); line-height: 1.1; margin: 0; font-weight: 300; max-width: 900px; }
.potlok-section { padding: 34px 0 38px; border-bottom: 1px solid var(--potlok-line); }
.potlok-section__heading { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.potlok-section__heading::before, .potlok-section__heading::after { content: ""; height: 1px; background: var(--potlok-line); flex: 1; }
.potlok-section__heading::before { flex: .08; }
.potlok-section__heading h2 { margin: 0; font-size: clamp(21px, 2vw, 29px); font-weight: 400; letter-spacing: .01em; white-space: nowrap; }
.potlok-section__top { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.potlok-text-link { color: var(--potlok-ink); text-decoration: none; font-size: 10px; letter-spacing: .04em; border-bottom: 1px solid currentColor; padding-bottom: 5px; text-transform: uppercase; }
.potlok-spaces { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.potlok-space { position: relative; display:block; overflow:hidden; background:#e5e1da; aspect-ratio: .78; color:white; }
.potlok-space img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.potlok-space:hover img { transform:scale(1.035); }
.potlok-space::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.5)); }
.potlok-space span { position:absolute; z-index:1; bottom:18px; left:16px; right:10px; color:#fff; font-size:clamp(16px,1.7vw,23px); font-weight:300; }
.potlok-products { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.potlok-product { min-width:0; }
.potlok-product__image { height:clamp(150px, 20vw, 260px); display:flex; align-items:center; justify-content:center; background:#fff; }
.potlok-product__image img { width:100%; height:100%; object-fit:contain; }
.potlok-product__brand { font-size:9px; text-transform:uppercase; color:#777; letter-spacing:.06em; margin:12px 0 4px; }
.potlok-product__name { font-size:13px; line-height:1.35; margin:0 0 5px; }
.potlok-product__price { font-size:12px; }
.potlok-product__fallback { padding:28px; border:1px solid #ecebe8; color:var(--potlok-muted); text-align:center; grid-column:1/-1; }
.potlok-brands { background:linear-gradient(110deg,#f7efeb,#fffaf7,#f4ece8); padding:32px 20px; }
.potlok-brand-list { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(22px,4vw,58px); }
.potlok-brand-list a { color:#69635f; text-decoration:none; font-size:clamp(14px,1.6vw,20px); letter-spacing:.04em; }
.potlok-brand-list img { max-width:125px; max-height:48px; width:auto; height:auto; object-fit:contain; }
.potlok-footer { background:#111; color:#f7f7f5; padding:38px 0 18px; }
.potlok-footer a { color:inherit; text-decoration:none; }
.potlok-footer__grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr 1.2fr; gap:26px; }
.potlok-footer__brand { font-size:14px; letter-spacing:.13em; margin-bottom:12px; }
.potlok-footer p,.potlok-footer li { font-size:10px; line-height:1.7; }
.potlok-footer ul { list-style:none; margin:0; padding:0; }
.potlok-footer__bottom { border-top:1px solid #2a2a2a; margin-top:28px; padding-top:12px; color:#aaa; font-size:9px; }
@media(max-width:760px) {
 .potlok-container { width:calc(100% - 28px); }
 .potlok-hero { min-height:360px; }
 .potlok-hero__content { width:calc(100% - 28px); }
 .potlok-spaces { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .potlok-space { aspect-ratio:.88; }
 .potlok-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
 .potlok-section { padding:26px 0; }
 .potlok-footer__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .potlok-footer__grid > :first-child { grid-column:1/-1; }
 .potlok-section__heading::before { flex:.02; }
}