/*
IRAN Sharp fonts are considered a proprietary software. To gain
information about the laws regarding the use of these fonts, please
visit www.fontiran.com
---------------------------------------------------------------------
This set of fonts are used in this project under the license: (PIKEL5V)
---------------------------------------------------------------------
The required FontLicense.txt file is placed next to the font files in /Fonts.
*/
@font-face{
font-family:"IRANSharp";
font-style:normal;
font-weight:300;
src:url("../Fonts/eot/iransharp_light_web.eot");
src:url("../Fonts/eot/iransharp_light_web.eot?#iefix") format("embedded-opentype"),
url("../Fonts/woff2/iransharp_light_web.woff2") format("woff2"),
url("../Fonts/woff/iransharp_light_web.woff") format("woff"),
url("../Fonts/ttf/iransharp_light_web.ttf") format("truetype");
font-display:swap;
}

@font-face{
font-family:"IRANSharp";
font-style:normal;
font-weight:400;
src:url("../Fonts/eot/iransharp_regular_web.eot");
src:url("../Fonts/eot/iransharp_regular_web.eot?#iefix") format("embedded-opentype"),
url("../Fonts/woff2/iransharp_regular_web.woff2") format("woff2"),
url("../Fonts/woff/iransharp_regular_web.woff") format("woff"),
url("../Fonts/ttf/iransharp_regular_web.ttf") format("truetype");
font-display:swap;
}

@font-face{
font-family:"IRANSharp";
font-style:normal;
font-weight:700;
src:url("../Fonts/eot/iransharp_bold_web.eot");
src:url("../Fonts/eot/iransharp_bold_web.eot?#iefix") format("embedded-opentype"),
url("../Fonts/woff2/iransharp_bold_web.woff2") format("woff2"),
url("../Fonts/woff/iransharp_bold_web.woff") format("woff"),
url("../Fonts/ttf/iransharp_bold_web.ttf") format("truetype");
font-display:swap;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
min-height:100%;
}


.hidden-text,
body[data-lang="fa"] .en,
body[data-lang="en"] .fa{
display:none !important;
}

body[data-lang="fa"] .fa,
body[data-lang="en"] .en{
display:initial;
}

.shop-entry{
display:inline-flex;
align-items:center;
justify-content:center;
margin-inline-start:10px;
border:1px solid rgba(255,255,255,.6);
color:white;
padding:10px 16px;
font-size:.72rem;
letter-spacing:.12em;
text-decoration:none;
background:rgba(0,0,0,.18);
backdrop-filter:blur(8px);
}

body[data-lang="fa"] .shop-entry{
letter-spacing:0;
}

.shop-page{
min-height:100vh;
height:auto;
overflow:auto;
display:block;
background:
radial-gradient(circle at 18% 8%, rgba(255,255,255,.12), transparent 28%),
radial-gradient(circle at 86% 22%, rgba(154,133,95,.16), transparent 32%),
linear-gradient(145deg, #111, #050505 70%);
color:#f5f1e9;
}

.shop-page::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(circle at center, black, transparent 78%);
}

.shop-page .fa,
.shop-page[data-lang="fa"] button,
.shop-page[data-lang="fa"] input{
font-family:"IRANSharp", tahoma, sans-serif;
}

.shop-header{
position:sticky;
top:0;
z-index:20;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:20px;
padding:22px clamp(18px, 4vw, 54px);
background:rgba(5,5,5,.72);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.08);
}

.shop-wordmark{
color:#f5f1e9;
text-decoration:none;
font-size:1.2rem;
letter-spacing:.2em;
text-transform:uppercase;
}

body[data-lang="fa"] .shop-wordmark{
letter-spacing:0;
font-size:1.35rem;
}

.shop-tabs{
display:flex;
gap:8px;
padding:6px;
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
background:rgba(255,255,255,.045);
}

.shop-tab,
.ghost-button,
.primary-button,
.secondary-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid rgba(255,255,255,.16);
color:#f5f1e9;
text-decoration:none;
cursor:pointer;
transition:transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.shop-tab{
min-height:38px;
padding:0 15px;
border-radius:999px;
background:transparent;
font-size:.76rem;
letter-spacing:.08em;
}

.shop-tab.is-active,
.shop-tab:hover{
background:#f5f1e9;
color:#111;
}

.cart-pill{
min-width:19px;
height:19px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:rgba(255,255,255,.12);
font-size:.7rem;
}

.shop-tab.is-active .cart-pill{
background:#111;
color:#f5f1e9;
}

.shop-actions{
display:flex;
justify-content:flex-end;
gap:10px;
}

.ghost-button{
min-height:40px;
padding:0 15px;
border-radius:999px;
background:rgba(255,255,255,.04);
font-size:.72rem;
letter-spacing:.08em;
}

.ghost-button:hover,
.secondary-button:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.shop-shell{
position:relative;
z-index:1;
width:min(1180px, calc(100% - 36px));
margin:0 auto;
padding:54px 0 80px;
}

.shop-view{
display:none;
animation:shopReveal .55s ease both;
}

.shop-view.is-active{
display:block;
}

@keyframes shopReveal{
from{opacity:0; transform:translateY(16px)}
to{opacity:1; transform:translateY(0)}
}

.product-hero{
display:grid;
grid-template-columns:minmax(260px, 420px) minmax(0, 1fr);
gap:clamp(28px, 6vw, 72px);
align-items:center;
min-height:calc(100vh - 190px);
}

.product-art{
position:relative;
aspect-ratio:2 / 3;
border:1px solid rgba(255,255,255,.22);
background:#090909;
box-shadow:0 36px 90px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.04);
overflow:hidden;
}

.product-art::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.52), transparent 46%, rgba(255,255,255,.08));
}

.product-art img{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(100%) contrast(106%);
}

.product-edition{
position:absolute;
left:22px;
bottom:22px;
z-index:2;
padding:8px 10px;
border:1px solid rgba(255,255,255,.32);
background:rgba(0,0,0,.32);
font-size:.68rem;
letter-spacing:.18em;
}

.shop-kicker{
margin-bottom:12px;
color:rgba(245,241,233,.62);
font-size:.72rem;
letter-spacing:.18em;
text-transform:uppercase;
}

body[data-lang="fa"] .shop-kicker{
letter-spacing:0;
}

.product-copy h1,
.shop-card h1,
.preview-panel h2{
font-size:clamp(2.4rem, 7vw, 6.4rem);
line-height:.92;
letter-spacing:.02em;
margin-bottom:24px;
}

body[data-lang="fa"] .product-copy h1,
body[data-lang="fa"] .shop-card h1,
body[data-lang="fa"] .preview-panel h2{
line-height:1.25;
}

body[data-lang="fa"] .product-copy h1{
font-size:clamp(2rem, 5.8vw, 5.2rem);
}

.product-lede{
max-width:660px;
color:rgba(245,241,233,.74);
font-size:1.05rem;
line-height:1.85;
}

.product-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:28px 0;
}

.product-meta span{
padding:8px 11px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.045);
font-size:.72rem;
letter-spacing:.08em;
}

.price-row{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:14px;
margin-bottom:24px;
}

.price-row strong{
font-size:2rem;
}

.price-row span,
.shop-note{
color:rgba(245,241,233,.58);
font-size:.86rem;
line-height:1.65;
}

.shop-button-row{
display:flex;
flex-wrap:wrap;
gap:12px;
margin:24px 0 0;
}

.primary-button,
.secondary-button{
min-height:48px;
padding:0 20px;
border-radius:0;
font-size:.78rem;
letter-spacing:.08em;
}

.primary-button{
background:#f5f1e9;
color:#111;
border-color:#f5f1e9;
}

.primary-button:hover{
transform:translateY(-2px);
box-shadow:0 18px 34px rgba(0,0,0,.28);
}

.secondary-button{
background:rgba(255,255,255,.04);
}

.full-button{
width:100%;
}

.shop-card{
border:1px solid rgba(255,255,255,.12);
background:rgba(10,10,10,.72);
box-shadow:0 26px 70px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.025);
backdrop-filter:blur(14px);
}

.panel-heading{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
margin-bottom:24px;
}

.panel-heading h2,
.payment-card h2{
font-size:1.45rem;
line-height:1.4;
}

.shop-card{
padding:clamp(24px, 4vw, 44px);
}

.wide-card{
width:min(860px, 100%);
margin:0 auto;
}

.cart-empty{
place-items:center;
min-height:220px;
text-align:center;
border:1px dashed rgba(255,255,255,.18);
background:rgba(255,255,255,.025);
}

.cart-line{
display:grid;
grid-template-columns:72px 1fr auto;
gap:18px;
align-items:center;
padding:18px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.035);
}

.cart-line img{
width:72px;
height:96px;
object-fit:cover;
filter:grayscale(100%);
}

.cart-line div{
display:grid;
gap:6px;
}

.cart-line span{
color:rgba(245,241,233,.62);
font-size:.86rem;
line-height:1.55;
}

.cart-total,
.summary-row{
display:flex;
justify-content:space-between;
gap:18px;
padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.1);
}

.cart-total{
margin-top:10px;
border-top:1px solid rgba(255,255,255,.1);
border-bottom:0;
font-size:1.1rem;
}

.checkout-grid{
display:grid;
grid-template-columns:1fr minmax(320px, 430px);
gap:22px;
align-items:start;
}

.shop-card label{
display:grid;
gap:8px;
margin-top:18px;
color:rgba(245,241,233,.76);
font-size:.86rem;
}

.shop-card input{
width:100%;
height:48px;
border:1px solid rgba(255,255,255,.16);
background:rgba(0,0,0,.28);
color:#f5f1e9;
padding:0 14px;
outline:none;
}

.shop-card input:focus{
border-color:rgba(245,241,233,.72);
}

.summary-row.total{
font-size:1.15rem;
border-bottom:0;
}


.shop-toast{
position:fixed;
left:50%;
bottom:24px;
z-index:100;
max-width:min(520px, calc(100% - 32px));
transform:translate(-50%, 18px);
padding:13px 16px;
border:1px solid rgba(255,255,255,.16);
background:rgba(5,5,5,.88);
color:#f5f1e9;
box-shadow:0 20px 60px rgba(0,0,0,.4);
opacity:0;
pointer-events:none;
transition:opacity .25s ease, transform .25s ease;
}

.shop-toast.is-visible{
opacity:1;
transform:translate(-50%, 0);
}

body[data-lang="fa"].shop-page{
direction:rtl;
}

body[data-lang="en"].shop-page{
direction:ltr;
}

body[data-lang="fa"] .shop-actions,
body[data-lang="fa"] .panel-heading,
body[data-lang="fa"] .cart-total,
body[data-lang="fa"] .summary-row{
direction:rtl;
}

@media (max-width:860px){
.shop-header{
grid-template-columns:1fr;
position:relative;
}

.shop-tabs,
.shop-actions{
justify-content:flex-start;
flex-wrap:wrap;
}

.product-hero{
grid-template-columns:1fr;
min-height:auto;
}

.product-art{
width:min(320px, 100%);
}

.panel-heading{
flex-direction:column;
}

.cart-line{
grid-template-columns:64px 1fr;
}

.cart-line > strong{
grid-column:2;
}
}

@media (max-width:900px) and (orientation:portrait){
.shop-page{
height:auto;
overflow:auto;
}

.shop-page .shop-header,
.shop-page .shop-shell,
.shop-page .shop-toast{
transform:none;
}
}

@media (max-width:860px){
.shop-page{
text-align:center;
}

.shop-header{
justify-items:center;
text-align:center;
}

.shop-wordmark,
.shop-tabs,
.shop-actions{
justify-self:center;
}

.shop-tabs,
.shop-actions,
.shop-button-row,
.product-meta,
.price-row{
justify-content:center;
}

.product-hero,
.product-copy,
.product-copy h1,
.product-lede,
.shop-card{
text-align:center;
}

.product-art{
margin:0 auto;
}

.product-lede,
.shop-note,
.text{
margin-left:auto;
margin-right:auto;
}

.panel-heading{
align-items:center;
text-align:center;
}

.cart-empty{
justify-items:center;
}

.cart-line{
justify-items:center;
text-align:center;
}

.cart-line div{
justify-items:center;
}

.cart-line > strong{
grid-column:auto;
}

.shop-card label{
text-align:center;
}

.shop-card input{
text-align:center;
}

body[data-lang="fa"] .shop-actions,
body[data-lang="fa"] .panel-heading,
body[data-lang="fa"] .cart-total,
body[data-lang="fa"] .summary-row{
direction:rtl;
}
}

.payment-modal{
position:fixed;
inset:0;
z-index:200;
display:none;
align-items:center;
justify-content:center;
padding:22px;
background:rgba(0,0,0,.72);
backdrop-filter:blur(12px);
}

.payment-modal.is-visible{
display:flex;
}

.payment-modal-card{
position:relative;
width:min(520px, 100%);
max-height:calc(100dvh - 44px);
overflow:auto;
padding:34px;
border:1px solid rgba(255,255,255,.14);
background:
radial-gradient(circle at top, rgba(255,255,255,.08), transparent 38%),
linear-gradient(145deg, rgba(18,18,18,.98), rgba(4,4,4,.98));
box-shadow:0 34px 90px rgba(0,0,0,.52);
}

.payment-modal-card h2{
font-size:1.7rem;
line-height:1.5;
margin-bottom:14px;
}

.modal-close{
position:absolute;
top:14px;
right:16px;
width:36px;
height:36px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.04);
color:#f5f1e9;
font-size:1.4rem;
line-height:1;
}

body[data-lang="fa"] .modal-close{
right:auto;
left:16px;
}

.payment-info-form{
display:grid;
gap:16px;
margin-top:22px;
}

.payment-info-form label{
display:grid;
gap:8px;
color:rgba(245,241,233,.76);
font-size:.86rem;
}

.payment-info-form input{
width:100%;
height:48px;
border:1px solid rgba(255,255,255,.16);
background:rgba(0,0,0,.28);
color:#f5f1e9;
padding:0 14px;
outline:none;
}

.payment-info-form input:focus{
border-color:rgba(245,241,233,.72);
}

.payment-wait-message{
color:rgba(245,241,233,.68);
font-size:.86rem;
line-height:1.7;
text-align:center;
}

@media (max-width:860px){
.payment-modal-card{
padding:28px 22px;
text-align:center;
}

.payment-info-form label,
.payment-info-form input{
text-align:center;
}
}

.captcha-box{
display:grid;
gap:12px;
padding:14px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.035);
}

.captcha-question{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
color:rgba(245,241,233,.78);
font-size:.88rem;
}

.captcha-question strong{
font-size:1.15rem;
letter-spacing:.08em;
color:#f5f1e9;
}

.captcha-refresh{
width:34px;
height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.04);
color:#f5f1e9;
}

.captcha-refresh:hover{
background:rgba(255,255,255,.12);
}

@media (max-width:860px){
.captcha-question{
justify-content:center;
flex-wrap:wrap;
}
}

.signed-highlight{
color:#fff;
font-weight:700;
white-space:nowrap;
}

.products-grid{
display:grid;
gap:clamp(34px, 7vw, 82px);
}

.shop-title-block{
margin-bottom:36px;
}

.product-card{
min-height:auto;
}

.product-copy h2{
font-size:clamp(2.4rem, 7vw, 6.4rem);
line-height:.92;
letter-spacing:.02em;
margin-bottom:24px;
}

body[data-lang="fa"] .product-copy h2{
font-size:clamp(2rem, 5.8vw, 5.2rem);
line-height:1.25;
}

.primary-button:disabled,
.secondary-button:disabled{
opacity:.38;
cursor:not-allowed;
transform:none;
box-shadow:none;
}
