/* تفاصيل الصنف (v5 s3، المرحلة ١٣) للوحة وللصفحة: صفحة الصنف تحمّله مع app، وصفحات التصفح وقت الفراغ (ui.js) */
@font-face{font-family:Oi;font-weight:400;font-display:swap;src:url(../fonts/oi-400-latin.woff2);unicode-range:U+0000-00FF,U+2013-2193}
.item{display:flex;flex-direction:column;gap:.5rem}
.item-hd{position:relative;display:grid;place-items:center;height:14.875rem;margin:0 -1rem .625rem;border-radius:0 0 2.75rem 2.75rem;background:var(--tint,var(--tint-y));box-shadow:inset 0 -.75rem 1.375rem #aa6e0029,inset 0 .5rem 1rem #ffffffb3,0 1.25rem 1.875rem -1rem #ffba088c}
.item-hd .el{position:absolute;top:1.875rem;left:50%;width:18.75rem;max-width:96%;height:12.5rem;color:#FFE38A;opacity:.8;transform:translateX(-50%)}
.item-hd .art{position:relative;width:12.5rem;height:12.5rem;margin-top:1.25rem;filter:drop-shadow(0 1.125rem 1.125rem #13192a40)}
.item-img{position:relative;width:12.5rem;height:12.5rem;margin-top:1.25rem}
.item-hd .share{position:absolute;top:.5rem;left:.875rem}
.item-hd .stk{position:absolute;left:1.375rem;bottom:-.625rem;width:4.625rem;height:3.25rem;font-size:.875rem;box-shadow:0 .5rem 1rem #13192a40}
.item .item-t{margin:.5rem 0 0;font:700 1.6875rem/1.15 var(--name);text-align:start}
.item-en{margin:0;font:400 .6875rem var(--oi);letter-spacing:.5px;color:var(--orange)}
.item-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .625rem;margin:0}
.price-lg{font-size:.9375rem;font-weight:800;color:var(--orange);white-space:nowrap}
.item-meta .was{margin:0}
.item-d{margin:0;font-size:.75rem;font-weight:500;line-height:1.6;color:var(--muted)}
.sizes{display:grid;grid-template-columns:max-content;gap:.5rem;width:max-content;max-width:100%;min-width:0;margin:.25rem 0 0;padding:0;border:0}
.sizes legend{width:100%;padding:0 0 .4375rem;font:800 .875rem var(--ar)}
.sizes legend small{float:left;margin-top:.125rem;font:600 .6875rem var(--ar);color:var(--muted)}
.size{position:relative;display:flex;align-items:center;gap:.625rem;height:2.75rem;padding:0 .875rem;border-radius:1rem;background:linear-gradient(150deg,#FFF,#FFF6E2);box-shadow:var(--clay-w);cursor:pointer;transition:transform var(--t)}
.size input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.size span{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.size input+span::before{content:"";display:inline-block;width:1.125rem;height:1.125rem;margin-inline-end:.625rem;vertical-align:-.25rem;border-radius:50%;background:#fff;box-shadow:inset 1px 2px 3px #8c501440,0 0 0 2px #CFC7AE}
.size b{margin-inline-start:1.75rem;font-weight:800;white-space:nowrap}
.size.on{background:#FFE4CC;box-shadow:var(--clay-in);color:var(--orange)}
.size.on span::before,.size input:checked+span::before{background:radial-gradient(var(--orange) .3125rem,#fff calc(.3125rem + 1px));box-shadow:0 0 0 2px var(--orange)}
.size input:focus-visible+span::before{outline:2px solid var(--orange);outline-offset:3px}
.size.off{opacity:.55}
.item-cta{position:sticky;bottom:0;z-index:4;display:flex;gap:.625rem;margin:.5rem -1rem 0;padding:1rem 1rem calc(1.25rem + var(--safe));border-top:1px solid var(--glass-b);border-radius:1.625rem 1.625rem 0 0;background:#ffffffc7;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--g-sh)}
.item-cta .add-wrap{flex:none}
.sz-cta .add-wrap+.add-wrap,.item-cta>.add-wrap:only-child{flex:1}
.big .add,.big .step{height:3.125rem}
.big .add{width:100%;gap:.5rem;padding:0 .875rem;white-space:nowrap;border:0;border-radius:999px;background:var(--g-orange);box-shadow:var(--clay-o);color:#fff;font:700 .90625rem var(--ar);cursor:pointer}
.big .add b{font-weight:800}
.big .add:disabled{background:#EDE6D3;box-shadow:none;color:var(--muted)}
.big .step{justify-content:space-between;padding:0 .25rem}
.big .step button{width:2.125rem;height:2.125rem;font-size:1.125rem}
.big .step .qty{min-width:1.375rem;font-size:.875rem}
.item-page .item{min-height:100vh}
.item-page .item-cta{margin-top:auto}
@media (min-width:600px){
.item-page .item-hd{margin:0 0 .625rem;border-radius:2.75rem}
.item-page .item-cta{margin:.5rem 0 0;border-radius:1.625rem}
}
@media (min-width:1024px){
.item-page{max-width:960px;margin:0 auto}
.item-page .item{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:.5rem 2rem;min-height:0;padding-top:3.5rem}
.item-page .item>*{grid-column:2}
.item-page .item-hd{grid-column:1;grid-row:1/span 9;align-self:start;height:28rem}
.item-page .item-hd .art,.item-page .item-img{width:20rem;height:20rem}
.item-page .item-hd .el{width:26rem;height:18rem;top:4rem}
.item-page .item-cta{position:static;margin-top:1rem}
}