/* Akiqun: premium footwear gallery */
.akg{position:relative;padding:110px 0 120px;background:radial-gradient(120% 80% at 50% 0%,#1a2c66 0%,#0b1d52 38%,#060d26 100%);color:#eef1f8;overflow:hidden;isolation:isolate}
.akg::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 30% at 50% 0%,rgba(212,185,135,.18),transparent 70%);pointer-events:none;z-index:-1}
.akg::after{content:"";position:absolute;left:50%;top:0;width:min(1100px,90%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(212,185,135,.55),transparent)}
.akg .wrap{position:relative}
.akg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.akg-head>div:first-child{max-width:560px}
.akg-eye{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:#d4b987;font-weight:500}
.akg-eye::before{content:"";width:34px;height:1px;background:#b08d57}
.akg h2{font:300 clamp(32px,4.4vw,52px)/1.1 Raleway,sans-serif;color:#fff;margin:16px 0 14px;letter-spacing:-.01em}
.akg h2 em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;color:#d4b987;font-size:1.08em}
.akg-head p{color:rgba(232,237,247,.72);font-size:15.5px;max-width:480px}
.akg-chips{display:flex;gap:6px;padding:5px;border:1px solid rgba(212,185,135,.28);border-radius:999px;background:rgba(255,255,255,.03);backdrop-filter:blur(6px)}
.akg-chips button{appearance:none;border:0;background:transparent;color:rgba(238,241,248,.75);font:500 12px Raleway,sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:10px 20px;border-radius:999px;cursor:pointer;transition:.3s}
.akg-chips button:hover{color:#fff}
.akg-chips button.on{background:linear-gradient(135deg,#d4b987,#b08d57);color:#0b1d52}
.akg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.akg-card{margin:0;animation:akgIn .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes akgIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.akg-ph{position:relative;display:block;width:100%;padding:0;border:0;cursor:zoom-in;background:#0b1433;border-radius:4px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 48px -24px rgba(0,0,0,.7)}
.akg-ph::after{content:"";position:absolute;inset:0;border:1px solid rgba(212,185,135,.16);border-radius:4px;transition:border-color .45s;pointer-events:none}
.akg-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .6s}
.akg-card:hover .akg-ph img{transform:scale(1.06) translateY(-1.5%)}
.akg-card:hover .akg-ph::after{border-color:rgba(212,185,135,.65)}
.akg-no{position:absolute;top:14px;left:14px;font:500 10.5px Raleway,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#d4b987;padding:6px 10px;border:1px solid rgba(212,185,135,.35);border-radius:2px;background:rgba(6,13,38,.45);backdrop-filter:blur(4px)}
.akg-zoom{position:absolute;right:14px;bottom:14px;font:500 11px Raleway,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#0b1d52;background:#f0dcae;padding:8px 14px;border-radius:2px;opacity:0;transform:translateY(8px);transition:.4s}
.akg-card:hover .akg-zoom,.akg-ph:focus-visible .akg-zoom{opacity:1;transform:none}
.akg-ph:focus-visible{outline:2px solid #d4b987;outline-offset:3px}
.akg-card figcaption{padding:18px 2px 0}
.akg-card small{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#b08d57;font-weight:500}
.akg-card h3{font:400 21px/1.25 "Instrument Serif",Georgia,serif;color:#fff;margin:6px 0 10px;letter-spacing:.01em}
.akg-card figcaption a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(238,241,248,.7);text-decoration:none;border-bottom:1px solid rgba(212,185,135,.35);padding-bottom:3px;transition:.3s}
.akg-card figcaption a span{display:inline-block;transition:transform .3s}
.akg-card figcaption a:hover{color:#f0dcae;border-color:#d4b987}
.akg-card figcaption a:hover span{transform:translateX(4px)}
.akg-more{text-align:center;margin-top:56px}
.akg-more a{display:inline-flex;gap:10px;align-items:center;padding:15px 34px;border:1px solid #b08d57;color:#f0dcae;text-decoration:none;font:500 12.5px Raleway,sans-serif;letter-spacing:.2em;text-transform:uppercase;border-radius:2px;transition:.35s}
.akg-more a:hover{background:#d4b987;color:#0b1d52}
/* lightbox */
.akg-lb{position:fixed;inset:0;z-index:9999;background:rgba(3,7,22,.88);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;animation:akgFade .3s ease both}
@keyframes akgFade{from{opacity:0}to{opacity:1}}
.akg-lb-in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;width:min(1040px,100%);max-height:calc(100vh - 48px);background:#08112f;border:1px solid rgba(212,185,135,.3);border-radius:6px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.akg-lb-in img{display:block;width:100%;height:100%;max-height:calc(100vh - 48px);object-fit:cover}
.akg-lb-tx{padding:48px 44px;color:#eef1f8}
.akg-lb-tx h3{font:400 clamp(30px,3.4vw,42px)/1.1 "Instrument Serif",Georgia,serif;color:#fff;margin:16px 0 14px}
.akg-lb-tx p{color:rgba(232,237,247,.72);font-size:15px;margin-bottom:28px}
.akg-cta{display:inline-block;background:linear-gradient(135deg,#d4b987,#b08d57);color:#0b1d52!important;padding:14px 30px;font:600 12.5px Raleway,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:.3s}
.akg-cta:hover{filter:brightness(1.08)}
.akg-lb-tx small{display:block;margin-top:28px;font-size:12px;letter-spacing:.2em;color:rgba(212,185,135,.75)}
.akg-x,.akg-nav{position:absolute;appearance:none;border:1px solid rgba(212,185,135,.4);background:rgba(6,13,38,.6);color:#f0dcae;width:44px;height:44px;border-radius:50%;font:300 26px/1 Raleway,sans-serif;cursor:pointer;display:grid;place-items:center;transition:.3s;backdrop-filter:blur(4px)}
.akg-x:hover,.akg-nav:hover{background:#d4b987;color:#0b1d52}
.akg-x{top:14px;right:14px}
.akg-nav{top:50%;transform:translateY(-50%)}
.akg-prev{left:14px}
.akg-next{left:calc(55% - 58px)}
@media (max-width:1024px){.akg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
 .akg-lb{background:rgba(3,7,22,.97)}
 .akg{padding:80px 0 88px}
 .akg-head{margin-bottom:32px}
 .akg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .akg-card h3{font-size:18px}
 .akg-card figcaption{padding-top:12px}
 .akg-no{top:10px;left:10px;padding:4px 7px;font-size:9.5px}
 .akg-zoom{display:none}
 .akg-lb{padding:12px;align-items:flex-start;overflow:auto}
 .akg-lb-in{grid-template-columns:1fr;max-height:none}
 .akg-lb-in img{max-height:62vh;aspect-ratio:4/5}
 .akg-lb-tx{padding:26px 22px 28px}
 .akg-next{left:auto;right:14px}
 .akg-nav{top:31vh}
}
@media (max-width:380px){.akg-chips button{padding:9px 13px}}
@media (prefers-reduced-motion:reduce){.akg-card,.akg-lb{animation:none}.akg-ph img{transition:none}}
/* framed cards */
.akg-card{position:relative;padding:12px 12px 20px;border:1px solid rgba(212,185,135,.55);border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));transition:border-color .4s,box-shadow .4s,transform .4s}
.akg-card::before{content:"";position:absolute;inset:5px;border:1px solid rgba(212,185,135,.18);border-radius:4px;pointer-events:none}
.akg-card:hover{border-color:#d4b987;box-shadow:0 0 0 1px rgba(212,185,135,.35),0 26px 50px -26px rgba(212,185,135,.35);transform:translateY(-4px)}
.akg-ph::after{border-color:rgba(212,185,135,.4)}
.akg-card figcaption{padding:16px 6px 0}
@media (max-width:760px){.akg-card{padding:8px 8px 16px}.akg-card::before{inset:3px}.akg-card figcaption{padding:12px 4px 0}}
@media (max-width:760px){.akg-card figcaption a{font-size:10.5px;letter-spacing:.1em;white-space:nowrap}}
.akg-card small{margin-bottom:10px}
/* text-free cards + premium hover zoom */
.akg-card{padding:10px}
.akg-card figcaption,.akg-no,.akg-zoom{display:none}
.akg-ph{cursor:zoom-in;--zx:50%;--zy:50%}
.akg-ph img{transform-origin:var(--zx) var(--zy);transition:transform .9s cubic-bezier(.16,.84,.24,1),filter .6s}
.akg-card:hover .akg-ph img{transform:scale(1.75);filter:saturate(1.06) contrast(1.04)}
.akg-shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--zx) var(--zy),rgba(255,236,190,.16),transparent 38%);opacity:0;transition:opacity .5s}
.akg-card:hover .akg-shine{opacity:1}
.akg-lb-img{display:block;width:auto;max-width:min(860px,100%);background:#08112f}
.akg-lb-img img{max-height:calc(100vh - 48px);width:auto;max-width:100%;aspect-ratio:4/5;margin:0 auto}
.akg-lb-img .akg-next{left:auto;right:14px}
.akg-lb-img .akg-nav{top:50%}
@media (max-width:760px){.akg-card{padding:6px}.akg-lb{align-items:center}.akg-lb-img img{max-height:85vh;width:100%}}
@media (hover:none){.akg-card:hover .akg-ph img{transform:none}}
.akg{isolation:auto}
.akg::before{z-index:0}
.akg .wrap{z-index:1}
.akg-lb{z-index:2147483000}
/* pop-out zoom: whole image enlarges above the grid, nothing is cropped */
.akg-card{z-index:1}
.akg-card:hover{z-index:20;transform:none}
.akg-ph{overflow:visible;cursor:zoom-in}
.akg-ph img{position:relative;border-radius:4px;transform-origin:50% 50%!important;transition:transform .7s cubic-bezier(.16,.84,.24,1),box-shadow .7s,outline-color .7s;outline:1px solid transparent;outline-offset:-1px}
.akg-card:hover .akg-ph img{transform:scale(1.32);filter:saturate(1.06) contrast(1.04);box-shadow:0 40px 90px -20px rgba(0,0,0,.85),0 0 0 1px rgba(212,185,135,.7),0 0 50px rgba(212,185,135,.18);outline-color:rgba(212,185,135,.0)}
.akg-card:hover .akg-ph::after{border-color:transparent}
.akg-shine{display:none}
.akg-grid>.akg-card:nth-child(4n+1):hover .akg-ph img{transform-origin:15% 50%!important}
.akg-grid>.akg-card:nth-child(4n):hover .akg-ph img{transform-origin:85% 50%!important}
@media (max-width:1024px){.akg-grid>.akg-card:nth-child(n):hover .akg-ph img{transform-origin:50% 50%!important}.akg-grid>.akg-card:nth-child(3n+1):hover .akg-ph img{transform-origin:15% 50%!important}.akg-grid>.akg-card:nth-child(3n):hover .akg-ph img{transform-origin:85% 50%!important}}
@media (hover:none){.akg-card:hover .akg-ph img{transform:none;box-shadow:none}}
/* single border */
.akg-card{padding:0;border:0;background:none;box-shadow:none}
.akg-card::before{display:none}
.akg-card:hover{box-shadow:none}
.akg-ph::after{border:1px solid rgba(212,185,135,.6)}
@media (max-width:760px){.akg-card{padding:0}}
