/* تولید از خروجی next/font (خودمیزبان)؛ فایلها در fonts/. */
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/2c55a0e60120577a-s.0-dom-5bn10r2.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/ad66f9afd8947f86-s.3lvt2whj97whp.woff2)format("woff2");unicode-range:U+1F??}
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/5476f68d60460930-s.2uwcyprjm3xu3.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/2c55a0e60120577a-s.0-dom-5bn10r2.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/ad66f9afd8947f86-s.3lvt2whj97whp.woff2)format("woff2");unicode-range:U+1F??}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/5476f68d60460930-s.2uwcyprjm3xu3.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/2c55a0e60120577a-s.0-dom-5bn10r2.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/ad66f9afd8947f86-s.3lvt2whj97whp.woff2)format("woff2");unicode-range:U+1F??}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/5476f68d60460930-s.2uwcyprjm3xu3.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/2c55a0e60120577a-s.0-dom-5bn10r2.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/ad66f9afd8947f86-s.3lvt2whj97whp.woff2)format("woff2");unicode-range:U+1F??}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/5476f68d60460930-s.2uwcyprjm3xu3.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/2c55a0e60120577a-s.0-dom-5bn10r2.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/ad66f9afd8947f86-s.3lvt2whj97whp.woff2)format("woff2");unicode-range:U+1F??}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/5476f68d60460930-s.2uwcyprjm3xu3.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter Fallback;src:local(Arial);ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.0%;size-adjust:107.12%}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200;font-display:swap;src:url(/theme/optiview/fonts/150f724d70372c02-s.1ljbalzvxyif7.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200;font-display:swap;src:url(/theme/optiview/fonts/750c737482d9de2f-s.3ex3j6ahhvjry.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200;font-display:swap;src:url(/theme/optiview/fonts/5f402bd2d8eef81a-s.p.40bho2kviej2o.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/150f724d70372c02-s.1ljbalzvxyif7.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Newsreader;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/750c737482d9de2f-s.3ex3j6ahhvjry.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/5f402bd2d8eef81a-s.p.40bho2kviej2o.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/150f724d70372c02-s.1ljbalzvxyif7.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Newsreader;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/750c737482d9de2f-s.3ex3j6ahhvjry.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/5f402bd2d8eef81a-s.p.40bho2kviej2o.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/150f724d70372c02-s.1ljbalzvxyif7.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Newsreader;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/750c737482d9de2f-s.3ex3j6ahhvjry.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/5f402bd2d8eef81a-s.p.40bho2kviej2o.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader Fallback;src:local(Times New Roman);ascent-override:69.68%;descent-override:25.12%;line-gap-override:0.0%;size-adjust:105.48%}
@font-face{font-family:Cairo;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/9ff27b8a0a8f3dc0-s.p.40_3w74kn95bo.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:Cairo;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/a5b03b231ce290a0-s.0nlsxckj73qpt.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cairo;font-style:normal;font-weight:300;font-display:swap;src:url(/theme/optiview/fonts/d41831e24743a3c1-s.p.08tn9snzkmifr.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/9ff27b8a0a8f3dc0-s.p.40_3w74kn95bo.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:Cairo;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/a5b03b231ce290a0-s.0nlsxckj73qpt.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cairo;font-style:normal;font-weight:400;font-display:swap;src:url(/theme/optiview/fonts/d41831e24743a3c1-s.p.08tn9snzkmifr.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/9ff27b8a0a8f3dc0-s.p.40_3w74kn95bo.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:Cairo;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/a5b03b231ce290a0-s.0nlsxckj73qpt.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cairo;font-style:normal;font-weight:500;font-display:swap;src:url(/theme/optiview/fonts/d41831e24743a3c1-s.p.08tn9snzkmifr.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/9ff27b8a0a8f3dc0-s.p.40_3w74kn95bo.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:Cairo;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/a5b03b231ce290a0-s.0nlsxckj73qpt.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cairo;font-style:normal;font-weight:600;font-display:swap;src:url(/theme/optiview/fonts/d41831e24743a3c1-s.p.08tn9snzkmifr.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/9ff27b8a0a8f3dc0-s.p.40_3w74kn95bo.woff2)format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:Cairo;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/a5b03b231ce290a0-s.0nlsxckj73qpt.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cairo;font-style:normal;font-weight:700;font-display:swap;src:url(/theme/optiview/fonts/d41831e24743a3c1-s.p.08tn9snzkmifr.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cairo Fallback;src:local(Arial);ascent-override:137.65%;descent-override:60.32%;line-gap-override:0.0%;size-adjust:94.66%}
:root{--ff-inter:Inter,'Inter Fallback';--ff-newsreader:Newsreader,'Newsreader Fallback';--ff-cairo:Cairo,'Cairo Fallback'}
/* ═══════════════════════════════════════════════════════════════════
لایه ۱ — توکن پایهی AIDA. خنثی، بیبرند.
───────────────────────────────────────────────────────────────────
هر توکن اینجا با **نام نقش** تعریف میشود، نه نام رنگ. مقدارها عمداً
بیشخصیتاند تا هر قالبی بتواند رویشان بنشیند.
⚠️ قاعدهی سختگیرانه (ADR-005 §۷): هیچ قالبی حق ندارد توکن تازه بسازد.
اگر OptiView به چیزی نیاز دارد که اینجا نیست، **اول اینجا با نام نقش
تعریف میشود** و بعد آنجا مقدار میگیرد. لحظهای که قالب توکن اختصاصی
خودش را داشته باشد، دیگر تم نیست و قالب دومی از آن درنمیآید.
═══════════════════════════════════════════════════════════════════ */
:root {
/* ── سطح و مرکب ── */
--surface: #ffffff;
--surface-raised: #fafafa; /* لایهی میانی میان سطح و فرورفته */
--surface-sunken: #f5f5f4;
--surface-inverse: #18181b;
/* سطحِ فرورفته **روی** سطح معکوس. بدون این نقش، هر پنل تیرهی
دوم مجبور است رنگ خودش را hardcode کند. */
--surface-inverse-sunken: #101013;
--ink: #18181b;
--ink-muted: #71717a;
--ink-inverse: #fafafa;
--line: #e4e4e7;
--line-strong: #a1a1aa;
/* ── لهجه ──
رنگی که چشم را میبرد. در لایهی پایه عمداً همان مرکب است تا
قالبی که لهجه تعریف نکرده، بیرنگ ولی سالم بماند. */
--accent: #18181b;
--accent-ink: #ffffff;
--accent-quiet: #f4f4f5;
/* ── حالت ──
⚠️ این چهارتا حتی در طرح تکرنگ هم باید از هم تفکیکپذیر بمانند.
«ناموجود» و «خطا» که فقط با وزن فرق کنند، در checkout میشکنند. */
--ok: #15803d;
--warn: #a16207;
--danger: #b91c1c;
--info: #1d4ed8;
/* ── فاصله ── مقیاس ۴ پایه */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 128px;
/* ── شعاع و خط ── */
/* مقیاس شعاع — پنج پله، از «تقریباً تیز» تا «قرص» */
--radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
--radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;
--border: 1px;
/* ── تایپ ── */
--font-display: Georgia, "Times New Roman", serif;
--font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
/* ── مقیاس تایپ ──
نقشمحور، نه اندازهمحور. نامها میگویند «کجا»، نه «چند پیکسل». */
--text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-md: 16px;
--text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 28px;
--text-4xl: 32px; --text-5xl: 44px; --text-6xl: 64px;
--leading-tight: 1.2; --leading-normal: 1.6; --leading-loose: 1.9;
--tracking-wide: .12em; --tracking-wider: .22em; --tracking-widest: .34em;
/* ── سایه ── کم و کمرنگ؛ کاتالوگ عکسمحور سایه نمیخواهد */
--shadow-sm: 0 1px 2px rgb(0 0 0 / .06);
--shadow-md: 0 4px 16px rgb(0 0 0 / .08);
/* ── چیدمان ── */
--container: 1320px;
--header-h: 68px;
/* ── نسبت قاب محصول ──
⚠️ عدد از دادهی واقعی آمده نه سلیقه: از ۳۴٬۴۰۸ عکس مبدأ، ۹۴٪ افقیاند
ولی دو نسبت غالب دارند — ۴۸٫۵٪ دقیقاً ۲:۱ و ~۳۳٪ ۱۶:۹. قاب ۱۶:۹
بلندتر از ۲:۱ است، پس با `contain` هیچ فریمی بریده نمیشود. */
--ratio-product: 16 / 9;
/* ── حرکت ── */
--ease: cubic-bezier(.2,.6,.2,1);
--dur: 180ms;
}
@media (prefers-reduced-motion: reduce) {
:root { --dur: 0ms; }
}
/* ═══════════════════════════════════════════════════════════════════
لایه ۲ — تم OptiView.
───────────────────────────────────────────────────────────────────
⚠️ این فایل **فقط مقدار بازنویسی میکند**. هیچ توکن تازهای اینجا
متولد نمیشود. اگر چیزی لازم شد، اول در `aida.css` با نام نقش.
پالت «مشکی و برنج» — تصمیم ۱۴۰۵/۰۶/۱۱.
لوگو تکرنگ است و هیچ رنگی برای استخراج نداشت؛ این یک انتخاب است.
═══════════════════════════════════════════════════════════════════ */
:root {
/* ══ پالت ══ بازنگری ۳ — «مشکی و برنج»، عمیقتر و گرمتر
───────────────────────────────────────────────────────────────
نسخهی قبل امن بود ولی بیروح: خاکستریِ سرد و برنجِ کمی خردلی.
سه تغییر:
• مرکب از #0A0A0B به #101012 — سیاهِ مطلق روی صفحه سخت است؛
این یکذره آبیِ عمیق دارد و نرمتر مینشیند.
• سطح فرورفته گرمتر (#F4F2EE) و یک پلهی تازهی #FAF9F7 برای
لایهی میانی — قبلاً فقط دو پله داشتیم و صفحه تخت میخواند.
• برنج از #B08D4F به #A67C3D — سیرتر و کمتر خردلی.
⚠️ هر مقدار با سنجش کنتراست انتخاب شد، نه با چشم. */
--surface: #FFFFFF;
--surface-raised: #FAF9F7; /* لایهی میانی — کارت روی سطح */
--surface-sunken: #F4F2EE;
--surface-inverse: #101012;
--surface-inverse-sunken: #1A1A1E;
--ink: #101012; /* سطح ۱۹٫۰:۱ · فرورفته ۱۷٫۰:۱ */
--ink-muted: #5A5A61; /* سطح ۶٫۸:۱ · فرورفته ۶٫۱:۱ */
--ink-inverse: #FFFFFF;
--line: #E6E3DD; /* جداکنندهی تزئینی */
--line-strong: #8A8A92; /* مرز اجزای تعاملی — ۳٫۴:۱ */
/* ── لهجه: برنجِ سیر ──
⚠️ مرکبِ تیره روی برنج، نه سفید. سفید روی #A67C3D فقط ۳٫۷۷:۱ میداد
— زیر کف. مرکب تیره ۵٫۰:۱ میدهد و برای یک برند لوکس زیباتر هم هست.
قاعدهی مصرف سر جایش: حداکثر دو عنصر برنجی در هر نما. مات، نه براق. */
--accent: #A67C3D;
--accent-ink: #101012;
--accent-quiet: #F6F0E4;
--ok: #1E7A46;
--warn: #8A6A24;
--danger: #B4372C; /* قیمتِ تخفیفخورده — ۶٫۰:۱ روی سطح */
--info: #2B5C8A;
/* ── شعاع ──
⚠️ نسخهی قبل تقریباً تیز بود (۰/۲/۴px) و خشک میخواند. لبهی گرد
در این رده نشانهی ارزانی نیست — Sunglass Hut هم دکمه و کارتش گرد
است. مقدارها یک پله بیشتر از پایه، چون عکس محصول گرد است نه گوشهدار. */
--radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
--radius-lg: 22px; --radius-xl: 34px;
--leading-tight: 1.02;
--container: 1600px; /* پهنتر — کارت بزرگتر جا میخواهد */
--header-h: 70px;
--ratio-product: 1 / 1;
--shadow-md: 0 18px 48px rgb(16 16 18 / .14);
/* ══ تایپ ══ بازنگری ۴ — روی CSS واقعی Sunglass Hut
───────────────────────────────────────────────────────────────
استایلشیت زندهشان (از بایگانی، چون سایت پشت Akamai است) دو خانواده
دارد و نه بیشتر:
• Helvetica Neue → ۲۳۲ ارجاع. **همه چیز**: بدنه، ناوبری، قیمت،
دکمه، برچسب. وزنهای ۳۵ Thin / ۵۵ Roman / ۶۵ Medium / ۷۵ Bold.
• Acta Headline (سریف) → ۱۶ ارجاع، همیشه با !important. فقط سه جا:
**تیتر صفحه، تیتر بخش، و نام برند.**
⚠️ همین «فقط سه جا» چیزی است که نسخهی اولِ ما را خراب کرده بود:
سریف را همهجا و در سایز کوچک گذاشته بودیم. سریف در جای درست مدرن
است؛ در جای غلط، کاتالوگ چاپی دههی ۲۰۱۰.
جایگزین آزاد:
Helvetica Neue → **Inter** (نئوگروتسک، نزدیکترین آزاد)
Acta Headline → **Newsreader** (سریف روزنامهای، همان رده) */
--font-ui: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: Newsreader, Georgia, "Times New Roman", serif;
/* مقیاس آنها: `html{font-size:10px}` و پرتکرارترین اندازهها
1.2/1.4/1.6/1.8/2/2.4/2.8/3.2rem — یعنی بدنه **۱۴px** و سقف تیتر ۳۲px.
کوچک و متراکم. مقیاس پایه همین است و اینجا دست نمیخورد. */
/* ── شعاع ──
⚠️ نسخهی قبل تقریباً تیز بود (۰/۲/۴px) و خشک میخواند. لبهی گرد
در این رده نشانهی ارزانی نیست — Sunglass Hut هم دکمه و کارتش گرد
است. مقدارها یک پله بیشتر از پایه، چون عکس محصول گرد است نه گوشهدار. */
--radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
--radius-lg: 22px; --radius-xl: 34px;
--leading-tight: 1.02;
--container: 1600px; /* پهنتر — کارت بزرگتر جا میخواهد */
--header-h: 70px;
/* قاب کارت: محصول برشخورده و شفاف است، پس قاب میتواند کوتاهتر و
متراکمتر باشد. ۴:۳ بهجای ۱۶:۹ — شبکه پر میشود، نه خالی. */
--ratio-product: 4 / 3;
--shadow-md: 0 18px 48px rgb(10 10 11 / .13);
}
/* ── عربی ──
⚠️ نه Inter گلیف عربی دارد نه Newsreader، و هیچ معادل آزادی برای
«Acta Headline عربی» وجود ندارد. Cairo هر دو نقش را میگیرد و تمایز
نمایشی/رابط با **وزن و اندازه** ساخته میشود، نه با تعویض خانواده.
سازش آگاهانه، نه غفلت. */
:root:lang(ar), [lang="ar"] {
--font-ui: Cairo, "Noto Sans Arabic", system-ui, sans-serif;
--font-display: Cairo, "Noto Sans Arabic", system-ui, sans-serif;
--tracking-wide: 0; --tracking-wider: 0; --tracking-widest: 0;
}
/* ═══════════════════════════════════════════════════════════════════
اسکلت اتود OptiView — بازنگری ۴
───────────────────────────────────────────────────────────────────
مبنا: CSS زندهی Sunglass Hut (از بایگانی — سایت پشت Akamai است) و
مشاهدهی مستقیم dubaioptical در Chrome headless.
⚠️ دو قاعدهی ثابت: فقط logical properties · هیچ رنگ طراحیِ hardcode.
══ دستگاه تایپ ══ نقشمحور. هر متن **یک** نقش دارد و نقش، اندازه و
وزن و فاصله را با هم میآورد. این همان چیزی است که «استانداردسازی»
یعنی — نه اینکه هر جا یک font-size دلبخواه بنشیند.
.t-display تیتر هیرو سریف · ۴۴–۶۴px · وزن ۳۰۰
.t-section تیتر بخش سریف · ۲۸px · وزن ۴۰۰
.t-brand نام برند سریف · ۱۴px ← Acta هم دقیقاً همینجاست
.t-title عنوان محصول/کارت سنس · ۱۴px · وزن ۴۰۰
.t-price قیمت سنس · ۱۴–۲۴px · وزن ۷۰۰ · tabular
.t-label برچسب ریزِ بزرگحرف سنس · ۱۱px · tracking ۰.۱em
.t-body متن سنس · ۱۴px
.t-meta متن ثانویه سنس · ۱۲–۱۴px · ink-muted
═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-ui);
font-size:var(--text-sm);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-inline-size:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-inline-size:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
.wrap--tight{max-inline-size:1160px}
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-muted)}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[dir="rtl"] .flip{transform:scaleX(-1)}
/* ══ نقشهای تایپ ══ */
.t-display{font-family:var(--font-display);font-weight:300;font-size:clamp(34px,4.4vw,var(--text-6xl));
line-height:1.04;letter-spacing:-.02em;margin:0}
.t-section{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);
line-height:1.15;letter-spacing:-.01em;margin:0}
.t-brand{font-family:var(--font-display);font-weight:400;font-size:var(--text-sm);
line-height:1.3;letter-spacing:.01em}
.t-title{font-size:var(--text-sm);font-weight:400;line-height:1.4;margin:0}
.t-price{font-weight:700;font-size:var(--text-sm);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.t-label{font-size:var(--text-2xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-muted)}
.t-body{font-size:var(--text-sm);line-height:1.7}
.t-meta{font-size:var(--text-xs);color:var(--ink-muted)}
[lang="ar"] .t-label{letter-spacing:0;text-transform:none;font-size:var(--text-xs)}
[lang="ar"] .t-display,[lang="ar"] .t-section{letter-spacing:0;font-weight:400;line-height:1.3}
/* ══ هدر ══ */
.topbar{background:var(--surface-inverse);color:var(--ink-inverse);font-size:var(--text-2xs);
text-align:center;padding-block:8px;letter-spacing:.03em}
.topbar .hl{color:var(--accent)}
.header{position:sticky;inset-block-start:0;z-index:40;background:var(--surface);
border-block-end:1px solid var(--line)}
.header__in{block-size:var(--header-h);display:flex;align-items:center;gap:var(--space-5)}
.brandmark{display:flex;align-items:center;flex:0 0 auto}
.brandmark img{block-size:34px;inline-size:auto;max-inline-size:none}
.brandmark--ar{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1}
.burger{display:none;inline-size:38px;block-size:38px;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{content:"";display:block;inline-size:19px;
block-size:1.5px;background:var(--ink);position:relative}
.burger span::before{position:absolute;inset-block-start:-6px}
.burger span::after{position:absolute;inset-block-start:6px}
/* ── ناوبری + مگامنو ──
⚠️ دو باگ که تشخیص هندسی پیدا کرد و اینجا بسته شدهاند:
۱. چوران بهعنوان **برادرِ** لینک گذاشته شده بود، پس یک آیتم ناوبری
مستقل میشد و منو را به دو خط میبرد (ارتفاع ۱۱۰px بهجای ۶۲).
حالا داخل خودِ است.
۲. مگامنو با `inset-inline-start:50%; translate:-50%` روی آیتمِ ۷۴
پیکسلی مینشست و با عرض ۱۱۲۰ به `x=-316` میرفت — بیرون از صفحه.
حالا **تمامعرض زیر هدر** است، همان کاری که مبدأ میکند. */
.nav{display:flex;gap:var(--space-5);font-size:var(--text-sm);list-style:none;margin:0;padding:0}
.nav__item{position:static}
.nav__link{display:inline-flex;align-items:center;gap:6px;
padding-block:calc(var(--header-h)/2 - 9px);position:relative;white-space:nowrap}
.nav__link::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;block-size:2px;
background:var(--ink);transform:scaleX(0);transition:transform var(--dur) var(--ease)}
.nav__item:hover .nav__link::after,.nav__link[aria-current]::after{transform:scaleX(1)}
.car{inline-size:7px;block-size:7px;border-inline-end:1.5px solid currentColor;
border-block-end:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-2px);
opacity:.55;display:inline-block;flex:0 0 auto}
.mega{position:absolute;inset-block-start:100%;inset-inline:0;background:var(--surface);
border-block-end:1px solid var(--line);box-shadow:0 16px 40px rgb(10 10 11/.1);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 160ms;z-index:45}
.nav__item:hover>.mega,.nav__item:focus-within>.mega{opacity:1;visibility:visible;transform:none}
.mega__in{display:grid;grid-auto-flow:column;gap:var(--space-8);
padding-block:var(--space-7);align-items:start}
.mega__col{min-inline-size:0}
.mega__col h3{margin:0 0 var(--space-3)}
.mega__col ul{list-style:none;margin:0;padding:0}
.mega__col li{margin-block-end:8px}
.mega__col a{font-size:var(--text-sm);color:var(--ink-muted);transition:color var(--dur) var(--ease)}
.mega__col a:hover{color:var(--ink)}
.mega__promo{inline-size:220px;justify-self:end}
.mega__promo img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg)}
.mega__promo span{display:block;margin-block-start:var(--space-3);font-weight:600;font-size:var(--text-sm)}
.tools{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm)}
.iconbtn{inline-size:36px;block-size:36px;display:grid;place-items:center;border-radius:var(--radius-md);
transition:background var(--dur) var(--ease)}
.iconbtn:hover{background:var(--surface-sunken)}
.iconbtn svg{inline-size:19px;block-size:19px}
.chipbtn{border:1px solid var(--line-strong);padding:5px var(--space-3);font-size:var(--text-2xs);
font-weight:600;border-radius:var(--radius-md);transition:all var(--dur) var(--ease)}
.chipbtn:hover{background:var(--ink);color:var(--ink-inverse);border-color:var(--ink)}
.cartbtn{position:relative}
.cartbtn .dot{position:absolute;inset-block-start:2px;inset-inline-end:2px;background:var(--accent);
color:var(--accent-ink);min-inline-size:16px;block-size:16px;border-radius:99px;display:grid;
place-items:center;font-size:10px;font-weight:700;padding-inline:3px}
/* ══ دکمه ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
padding:13px var(--space-6);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-md);
transition:all var(--dur) var(--ease)}
.btn--accent{background:var(--accent);color:var(--accent-ink)}
.btn--accent:hover{background:var(--ink);color:var(--ink-inverse)}
.btn--solid{background:var(--ink);color:var(--ink-inverse)}
.btn--solid:hover{background:var(--accent);color:var(--accent-ink)}
.btn--light{background:var(--surface);color:var(--ink)}
.btn--light:hover{background:var(--accent);color:var(--accent-ink)}
.btn--ghost{border:1px solid var(--line-strong)}
.btn--ghost:hover{background:var(--ink);color:var(--ink-inverse);border-color:var(--ink)}
.btn--block{inline-size:100%}
.btn--lg{padding:16px var(--space-7);font-size:var(--text-md)}
/* ══ سربرگ بخش ══ */
.sechead{display:flex;align-items:end;gap:var(--space-4);margin-block-end:var(--space-5);
padding-block-end:var(--space-3);border-block-end:1px solid var(--line)}
.sechead .more{margin-inline-start:auto;font-size:var(--text-sm);font-weight:600;white-space:nowrap}
.sechead .more:hover{color:var(--accent)}
/* ══ هیرو ══ بنر کمپین؛ نام برند در خودِ تصویر است، پس تیتر رویش نمیرود */
.hero{position:relative;background:var(--surface-sunken);overflow:hidden}
.hero__slide{position:relative;aspect-ratio:2.8/1;overflow:hidden}
.hero__slide img{inline-size:100%;block-size:100%;object-fit:cover;will-change:transform}
.hero__foot{position:absolute;inset-block-end:0;inset-inline:0;display:flex;align-items:center;
gap:var(--space-4);padding:var(--space-6);
background:linear-gradient(to top,rgb(10 10 11/.55),transparent)}
.hero__label{color:var(--ink-inverse);font-size:var(--text-sm);font-weight:600;
text-shadow:0 1px 10px rgb(0 0 0/.6)}
.hero__dots{margin-inline-start:auto;display:flex;gap:6px}
.hero__dots i{inline-size:28px;block-size:3px;background:var(--ink-inverse);opacity:.4;display:block}
.hero__dots i[data-on]{opacity:1}
@media(max-width:760px){.hero__slide{aspect-ratio:3/2}}
/* ══ نوار پیام ══ */
.pitch{background:var(--surface-inverse);color:var(--ink-inverse)}
.pitch__in{display:flex;align-items:center;gap:var(--space-6);padding-block:var(--space-7);flex-wrap:wrap}
.pitch .t-display{font-size:clamp(26px,2.6vw,var(--text-4xl));max-inline-size:20ch}
.pitch p{margin:0;opacity:.6;max-inline-size:44ch}
.pitch .btn{margin-inline-start:auto}
@media(max-width:820px){.pitch .btn{margin-inline-start:0}}
/* ══ نوار اطمینان ══ با آیکون، مثل مبدأ */
.assure{background:var(--surface-sunken)}
.assure__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--space-5);padding-block:var(--space-6);text-align:center}
.assure svg{inline-size:24px;block-size:24px;margin-inline:auto;margin-block-end:var(--space-2);
color:var(--ink-muted)}
.assure b{display:block;font-size:var(--text-sm);font-weight:600;margin-block-end:2px}
.assure span{font-size:var(--text-xs);color:var(--ink-muted)}
/* ══ قاب لوگو ══
⚠️ دو بار اشتباه کردم و بار سوم درست شد:
۱. «ارتفاع یکسان» — لوگوی مربعی کنار لوگوی کشیده وزن بصری کاملاً
متفاوتی میگرفت.
۲. «قاب یکسان با contain» — بهتر بود ولی کافی نبود: مساحتِ **مرکبِ**
لوگوها ۵.۴ برابر تفاوت داشت.
۳. حل واقعی: هر لوگو روی یک **بوم ۶۴۰×۳۶۰ (همنسبت با قاب)** پخته شد و
با میانگین هندسی کادر مقیاس گرفت. حالا همه یک نسبت دارند، پس مرورگر
همه را یکسان مقیاس میکند و CSS دیگر کاری برای انجام ندارد. */
.logobox{display:grid;place-items:center;padding:var(--space-3);background:var(--surface-sunken);
border-radius:var(--radius-lg);aspect-ratio:16/9;overflow:hidden;
transition:background var(--dur) var(--ease)}
.logobox img{inline-size:100%;block-size:100%;max-inline-size:none;object-fit:contain;
opacity:.75;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
/* ⚠️ `a:hover > .logobox` و `.brandbar__track` حذف شدند: نوار برندِ قدیمی
جایش را به مارکی و شبکهی برند داد و اینها به هیچ عنصری نمیخوردند.
قاعدهی مرده در CSS بیضرر نیست — همین طبقه بود که باگ هاور را ساخت. */
.brandgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:var(--space-3)}
/* ══ کاشی دسته ══ */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.tile{position:relative;aspect-ratio:5/6;overflow:hidden;border-radius:var(--radius-lg);
background:var(--surface-sunken)}
.tile img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile__cap{position:absolute;inset-block-end:0;inset-inline:0;padding:var(--space-6) var(--space-4) var(--space-4);
color:var(--ink-inverse);font-weight:600;font-size:var(--text-md);
background:linear-gradient(to top,rgb(0 0 0/.66),transparent)}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
/* ══ شبکهی محصول ══
⚠️ کارت **بزرگتر و کمتعدادتر**: کف ۲۹۰ → ۳۶۰px. روی ۱۶۰۰ کانتینر
یعنی چهار ستون بهجای پنج. الگوی کارتِ بدونزمینه از Sunglass Hut. */
.grid{display:grid;gap:var(--space-9) var(--space-6);
grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.card{position:relative}
.card__media{aspect-ratio:3/2;display:grid;place-items:center;overflow:hidden;position:relative;
border-radius:var(--radius-md);transition:background 300ms var(--ease)}
.card:hover .card__media{background:var(--surface-sunken)}
.card__media img{grid-area:1/1;inline-size:100%;block-size:100%;object-fit:contain;
transition:transform 560ms var(--ease),opacity 340ms var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
/* ⚠️ زاویهی دوم: هر دو عکس در یک سلول grid مینشینند تا جابهجایی بدون
پرش باشد. اگر محصول عکس دوم نداشت، هیچ اتفاقی نمیافتد. */
/* ⚠️ جابهجایی عکس روی هاور **با JS** علامت میخورد، نه با `:hover` در CSS.
دلیلش سه دور دیباگِ ناموفق بود: با `:hover` و `:has()` نتیجه در مرورگر
واقعی با آنچه میسنجیدم فرق داشت و کارت خالی میماند. حالا JS فقط وقتی
`data-hover` میگذارد که جایگزینی **واقعاً** هست — پس حالت «main محو شد
ولی alt نیامد» از نظر ساختاری ناممکن است. */
.card__alt{opacity:0}
.card[data-hover] .card__alt{opacity:1}
/* ⚠️ باگ: این قاعده بیشرط بود و روی ۱۷ کارتی که عکس دوم ندارند، هاور
محصول را **ناپدید** میکرد. حالا فقط وقتی محو میشود که جایگزینی هست. */
.card[data-hover] .card__main{opacity:0}
.card__badge{position:absolute;inset-block-start:14px;inset-inline-start:14px;background:var(--ink);
color:var(--ink-inverse);font-size:var(--text-2xs);font-weight:700;padding:6px 12px;
border-radius:var(--radius-pill);z-index:3}
.card__badge--out{background:var(--surface);color:var(--ink-muted);border:1px solid var(--line-strong)}
.card__body{padding-block-start:var(--space-5);text-align:center}
.card__row{display:flex;align-items:baseline;gap:var(--space-2);justify-content:center;margin-block-start:8px}
.card__was{font-size:var(--text-sm);color:var(--ink-muted);text-decoration:line-through}
.card__cta{display:inline-block;margin-block-start:var(--space-4);font-size:var(--text-2xs);
font-weight:700;letter-spacing:.08em;text-transform:uppercase;
border-block-end:1px solid var(--ink);padding-block-end:3px}
[lang="ar"] .card__cta{letter-spacing:0;text-transform:none;font-size:var(--text-xs)}
.card--out .card__media img{opacity:.4}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
/* ══ شبکهی برند ══
⚠️ عمداً **کپی dubaioptical نیست** — آنها کارت گردِ پراکنده دارند.
الگوی Sunglass Hut سلولهای چسبیده با فاصلهی مویی و یک سلول «همه» با
تأکید است. اینجا همان منطق، با معکوسشدن لوگو روی hover که مالِ خودمان است. */
/* ۲۰ لوگو + سلول «همه» = ۲۱ ⇒ ۷ ستون × ۳ ردیف، بدون ردیف ناقص */
.brandgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.brandcell{display:grid;place-items:center;aspect-ratio:16/7;background:var(--surface-sunken);
border-radius:var(--radius-sm);overflow:hidden;transition:background 240ms var(--ease)}
.brandcell img{inline-size:78%;block-size:78%;object-fit:contain;opacity:.8;
transition:opacity 240ms var(--ease),transform 320ms var(--ease),filter 240ms var(--ease)}
.brandcell:hover{background:var(--ink)}
.brandcell:hover img{opacity:1;filter:invert(1);transform:scale(1.06)}
.brandcell--all{background:var(--accent);color:var(--accent-ink);font-weight:700;
font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase}
[lang="ar"] .brandcell--all{letter-spacing:0;text-transform:none}
.brandcell--all:hover{background:var(--ink);color:var(--ink-inverse)}
@media(max-width:1100px){.brandgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.brandgrid{grid-template-columns:repeat(2,1fr)}}
/* ══ کاروسل ══ اسکرول افقی با snap + فلش */
.carousel{position:relative}
/* ⚠️ کارت کاروسل هماندازهی شبکه شد (۳۴۰px) — «کاروسلها کارتهاش
بزرگتر بشه». و شمارهی ترتیبی درشتِ کمرنگ پشت هر کارت، امضای بصری
کاروسل است و در شبکه نیست. */
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(340px,1fr);
gap:var(--space-6);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
padding-block-end:var(--space-4);scroll-behavior:smooth}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>*{scroll-snap-align:start}
.carousel__nav{display:flex;gap:var(--space-2);margin-inline-start:auto}
.carousel__nav button{inline-size:38px;block-size:38px;border:1px solid var(--line-strong);
border-radius:99px;display:grid;place-items:center;transition:all var(--dur) var(--ease)}
.carousel__nav button:hover{background:var(--ink);color:var(--ink-inverse);border-color:var(--ink)}
/* چورانِ «قبلی» همیشه برعکسِ «بعدی» است؛ در RTL هر دو یک بار دیگر برمیگردند */
.carousel__nav [data-car="prev"] svg{transform:scaleX(-1)}
[dir="rtl"] .carousel__nav svg{transform:scaleX(-1)}
[dir="rtl"] .carousel__nav [data-car="prev"] svg{transform:none}
.carousel__bar{block-size:2px;background:var(--line);position:relative;margin-block-start:var(--space-4)}
.carousel__bar i{position:absolute;inset-block:0;inset-inline-start:0;inline-size:28%;
background:var(--ink);display:block;transition:inline-size var(--dur) var(--ease)}
@media(min-width:1100px){.carousel__track{grid-auto-columns:minmax(378px,1fr)}}
/* ══ کشوها ══ جستجو، سبد، ناوبری موبایل، فیلتر — یک الگو برای هر چهار */
.scrim{position:fixed;inset:0;background:rgb(10 10 11/.5);z-index:50;opacity:0;
pointer-events:none;transition:opacity var(--dur) var(--ease)}
.scrim[data-open]{opacity:1;pointer-events:auto}
.drawer{position:fixed;inset-block:0;background:var(--surface);z-index:60;overflow-y:auto;
box-shadow:var(--shadow-md);display:flex;flex-direction:column;
transition:transform 300ms var(--ease)}
/* ⚠️ باگی که حسابرسی گرفت: در RTL کشوی منو **روی صفحه باز میماند**.
علت: هم inset را برعکس کرده بودم هم transform را. `inset-inline-start`
خودش در RTL به راست نگاشت میشود، پس نباید دست بخورد؛ فقط جهت
translateX است که باید برگردد — چون محور X در transform همیشه
چپبهراست است و با dir برنمیگردد. */
.drawer--start{inset-inline-start:0;inline-size:min(380px,88vw);transform:translateX(-102%)}
[dir="rtl"] .drawer--start{transform:translateX(102%)}
.drawer--end{inset-inline-end:0;inline-size:min(420px,92vw);transform:translateX(102%)}
[dir="rtl"] .drawer--end{transform:translateX(-102%)}
.drawer--top{inset-block-end:auto;inset-inline:0;inline-size:auto;transform:translateY(-102%);
box-shadow:0 12px 40px rgb(10 10 11/.16)}
.drawer[data-open]{transform:none}
.drawer__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);
border-block-end:1px solid var(--line);position:sticky;inset-block-start:0;background:var(--surface);z-index:2}
.drawer__head h2{margin:0;font-size:var(--text-md);font-weight:600}
.drawer__x{margin-inline-start:auto;font-size:24px;line-height:1;inline-size:34px;block-size:34px}
.drawer__body{padding:0 var(--space-5) var(--space-6);flex:1}
.drawer__foot{padding:var(--space-5);border-block-start:1px solid var(--line);
position:sticky;inset-block-end:0;background:var(--surface)}
/* جستجو */
.searchbar{display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--line-strong);
border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.searchbar input{flex:1;min-inline-size:0;border:0;background:none;font:inherit;
font-size:var(--text-md);outline:none}
.sugg{list-style:none;margin:var(--space-5) 0 0;padding:0}
.sugg li{margin-block-end:var(--space-2)}
.sugg a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);
border-radius:var(--radius-md);transition:background var(--dur) var(--ease)}
.sugg a:hover{background:var(--surface-sunken)}
.sugg img{inline-size:52px;block-size:52px;object-fit:contain;background:var(--surface-sunken);
border-radius:var(--radius-md)}
/* سبد کشویی */
.mini{display:grid;grid-template-columns:74px 1fr auto;gap:var(--space-3);
padding-block:var(--space-4);border-block-end:1px solid var(--line);align-items:center}
.mini img{aspect-ratio:1;object-fit:contain;background:var(--surface-sunken);border-radius:var(--radius-md)}
/* ناوبری موبایل — همان مگامنو، ولی آکاردئونی */
.mnav{list-style:none;margin:0;padding:0}
.mnav>li{border-block-end:1px solid var(--line)}
.mnav summary{padding-block:var(--space-4);font-size:var(--text-md);font-weight:500;
cursor:pointer;list-style:none;display:flex;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"";inline-size:8px;block-size:8px;margin-inline-start:auto;
border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;
transform:rotate(45deg);opacity:.5}
.mnav details[open] summary::after{transform:rotate(-135deg)}
.mnav ul{list-style:none;margin:0;padding:0 0 var(--space-4)}
.mnav ul li{padding-block:6px}
.mnav ul a{color:var(--ink-muted);font-size:var(--text-sm)}
.mnav>li>a{display:block;padding-block:var(--space-4);font-size:var(--text-md);font-weight:500}
/* فیلتر */
/* ── فیلتر ──
⚠️ سه بازنگری روی هم:
۱. فهرست چکباکس ساده بود ⇒ شد تراشهی انتخابی.
۲. ولی تراشه برای گروهِ دهتایی (برند) هم بد است — میپیچد و خوانده
نمیشود. حالا **قاعدهی آستانه**: تا ۵ آیتم تراشه، بیشتر از ۵
چکباکسِ ستونی با نوار جستجو.
۳. هر گروه **جمعشده** باز میشود و با انیمیشن ارتفاع باز و بسته میشود.
⚠️ انیمیشن روی `grid-template-rows: 0fr → 1fr` است، نه max-height:
عدد جادویی ندارد و با هر تعداد آیتم درست کار میکند. */
.fgroup{border-block-end:1px solid var(--line)}
.fgroup:last-child{border-block-end:0}
.fgroup__h{inline-size:100%;display:flex;align-items:center;gap:var(--space-3);
padding-block:var(--space-5);font-size:var(--text-sm);font-weight:600;text-align:start;
cursor:pointer}
.fgroup__h .count{margin-inline-start:auto;font-size:var(--text-2xs);font-weight:600;
color:var(--ink-muted);background:var(--surface-sunken);padding:3px 10px;
border-radius:var(--radius-pill);transition:all 200ms var(--ease)}
.fgroup__h .count[data-n]{background:var(--ink);color:var(--ink-inverse)}
.fgroup__h .car{opacity:.5;transition:transform 260ms var(--ease)}
.fgroup[data-open] .fgroup__h .car{transform:rotate(-135deg) translate(-1px,-2px)}
.fgroup__b{display:grid;grid-template-rows:0fr;
transition:grid-template-rows 300ms var(--ease),opacity 220ms var(--ease);opacity:0}
.fgroup[data-open] .fgroup__b{grid-template-rows:1fr;opacity:1}
.fgroup__in{overflow:hidden;min-block-size:0}
.fgroup__pad{padding-block-end:var(--space-5)}
/* تا ۵ آیتم: تراشه */
.fchips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.fchip{position:relative;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px var(--space-4);
font-size:var(--text-sm);
transition:border-color 200ms var(--ease),background 200ms var(--ease),color 200ms var(--ease)}
.fchip input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.fchip .n{color:var(--ink-muted);font-size:var(--text-2xs);transition:color 200ms var(--ease)}
.fchip .tick{inline-size:0;block-size:12px;overflow:hidden;transition:inline-size 220ms var(--ease)}
.fchip .tick svg{inline-size:12px;block-size:12px;display:block}
.fchip:hover{border-color:var(--line-strong)}
.fchip:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--ink-inverse)}
.fchip:has(input:checked) .n{color:var(--ink-inverse);opacity:.6}
.fchip:has(input:checked) .tick{inline-size:16px}
.fchip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* بیشتر از ۵ آیتم: چکباکسِ ستونی + جستجوی درونگروهی */
.fsearch{display:flex;align-items:center;gap:var(--space-2);border:1px solid var(--line);
border-radius:var(--radius-pill);padding:8px var(--space-4);margin-block-end:var(--space-3)}
.fsearch input{flex:1;min-inline-size:0;border:0;background:none;font:inherit;
font-size:var(--text-sm);outline:none}
.fsearch svg{inline-size:14px;block-size:14px;color:var(--ink-muted);flex:0 0 auto}
.flist{display:grid;gap:2px;max-block-size:230px;overflow-y:auto;scrollbar-width:thin}
.fbox{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;
padding:9px var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);
transition:background 180ms var(--ease)}
.fbox:hover{background:var(--surface-sunken)}
.fbox input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.fbox .mark{inline-size:19px;block-size:19px;border:1.5px solid var(--line-strong);
border-radius:var(--radius-xs);display:grid;place-items:center;flex:0 0 auto;
transition:background 180ms var(--ease),border-color 180ms var(--ease)}
.fbox .mark svg{inline-size:12px;block-size:12px;color:var(--ink-inverse);
opacity:0;transform:scale(.5);transition:opacity 180ms var(--ease),transform 180ms var(--ease)}
.fbox:has(input:checked) .mark{background:var(--ink);border-color:var(--ink)}
.fbox:has(input:checked) .mark svg{opacity:1;transform:none}
.fbox:has(input:focus-visible) .mark{outline:2px solid var(--accent);outline-offset:2px}
.fbox .n{margin-inline-start:auto;color:var(--ink-muted);font-size:var(--text-2xs)}
/* رنگ */
.swatchrow{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.fswatch{position:relative;inline-size:38px;block-size:38px;cursor:pointer;border-radius:99px;
display:grid;place-items:center;box-shadow:0 0 0 1px var(--line-strong) inset;
transition:box-shadow 200ms var(--ease)}
.fswatch input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.fswatch svg{inline-size:16px;block-size:16px;color:#fff;opacity:0;transform:scale(.6);
transition:opacity 200ms var(--ease),transform 200ms var(--ease);
filter:drop-shadow(0 0 2px rgb(0 0 0/.5))}
.fswatch:has(input:checked){box-shadow:0 0 0 2px var(--surface) inset,0 0 0 4px var(--ink)}
.fswatch:has(input:checked) svg{opacity:1;transform:none}
.fswatch:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
/* بازهی قیمت */
.range{padding-block-start:var(--space-2)}
.range__bar{block-size:3px;background:var(--line);border-radius:99px;position:relative;
margin-block:var(--space-5) var(--space-3)}
.range__fill{position:absolute;inset-block:0;inset-inline-start:18%;inline-size:54%;
background:var(--ink);border-radius:99px}
.range__k{position:absolute;inset-block-start:50%;inline-size:18px;block-size:18px;
background:var(--surface);border:2px solid var(--ink);border-radius:99px;translate:-50% -50%;cursor:grab}
[dir="rtl"] .range__k{translate:50% -50%}
.range__v{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--ink-muted)}
@media(prefers-reduced-motion:reduce){.fgroup__b{transition:none}}
/* ══ نوار ابزار و تراشه ══ */
.toolbar{display:flex;align-items:center;gap:var(--space-4);padding-block:var(--space-4);
border-block:1px solid var(--line);margin-block-end:var(--space-6)}
.toolbar .sortby{margin-inline-start:auto;font-size:var(--text-sm)}
.chips{display:flex;gap:var(--space-2);overflow-x:auto;padding-block:var(--space-5);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px var(--space-4);
font-size:var(--text-sm);white-space:nowrap;transition:all var(--dur) var(--ease)}
.chip:hover,.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--ink-inverse)}
/* ══ سربرگ دسته ══ */
.cathead{display:grid;grid-template-columns:400px 1fr;gap:var(--space-7);align-items:center;
padding-block:var(--space-7)}
.cathead__art{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-xl)}
.cathead__art img{inline-size:100%;block-size:100%;object-fit:cover}
.cathead p{margin:var(--space-4) 0 0;color:var(--ink-muted);max-inline-size:60ch}
@media(max-width:860px){.cathead{grid-template-columns:1fr}}
/* ══ فوتر ══ */
.footer{background:var(--surface-inverse);color:var(--ink-inverse);margin-block-start:var(--space-9);
padding-block:var(--space-8) var(--space-5)}
.footer a{opacity:.6}.footer a:hover{opacity:1;color:var(--accent)}
.footer__cols{display:grid;gap:var(--space-6);grid-template-columns:1.6fr repeat(3,1fr)}
.footer h3{font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;
color:var(--accent);margin-block:0 var(--space-3);font-weight:700}
[lang="ar"] .footer h3{letter-spacing:0;text-transform:none;font-size:var(--text-sm)}
.footer ul{list-style:none;margin:0;padding:0;font-size:var(--text-sm);line-height:2.1}
.footer__social{display:flex;gap:var(--space-3);margin-block-start:var(--space-4)}
.footer__social a{inline-size:36px;block-size:36px;border:1px solid rgb(255 255 255/.2);
border-radius:99px;display:grid;place-items:center;opacity:.7}
.footer__social a:hover{opacity:1;border-color:var(--accent)}
.footer__base{margin-block-start:var(--space-7);padding-block-start:var(--space-4);
border-block-start:1px solid rgb(255 255 255/.1);font-size:var(--text-xs);opacity:.5;
display:flex;flex-wrap:wrap;gap:var(--space-4)}
@media(max-width:860px){.footer__cols{grid-template-columns:1fr 1fr}}
@media(max-width:1050px){
.nav{display:none}
.burger{display:flex}
}
/* ⚠️ روی موبایل، نوار ابزار سرریز میکرد و آیکونهای جستجو و سبد از کادر
بیرون میافتادند. ارز و حساب کاربری حذف میشوند — جستجو و سبد نه. */
@media(max-width:600px){
.header__in{gap:var(--space-3)}
.brandmark img{block-size:26px}
.tools .t-meta,.tools .iconbtn[aria-label="Account"]{display:none}
.chipbtn{padding:4px var(--space-2)}
.topbar{font-size:10px;padding-block:6px}
.assure__in{grid-template-columns:1fr 1fr;text-align:start}
.assure svg{margin-inline:0}
.pitch__in{gap:var(--space-4)}
}
/* ══ صفحهی محصول ══
⚠️ بازنگری: گالری **دو ستونه** شد (نه یک عکس بزرگ + نوار بندانگشتی)،
و بلوک توضیحات از پنل خرید به **زیر گالری** منتقل شد — آنجا عرض دارد
و جدول مشخصات واقعاً خوانده میشود.
⚠️ هر عکس زمینهی **خودش** را میگیرد: عکسهای یک محصول در مبدأ روی
زمینههای متفاوتاند (روشن، تیره، خاکستری) و زمینهی ثابت یعنی درزِ
دیدهشدنی. رنگ از خودِ گوشهی عکس خوانده شده. */
.pdp{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--space-9);align-items:start;
padding-block:var(--space-6)}
.pdp__gal{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.pdp__shot{aspect-ratio:3/2;display:grid;place-items:center;overflow:hidden;
border-radius:var(--radius-md);cursor:zoom-in;position:relative;
background:var(--surface-sunken)}
.pdp__shot img{inline-size:100%;block-size:100%;object-fit:contain;
transition:transform 600ms var(--ease)}
.pdp__shot:hover img{transform:scale(1.05)}
.pdp__shot--lead{grid-column:1/-1;aspect-ratio:2/1}
.pdp__shot[aria-current]{outline:2px solid var(--ink);outline-offset:-2px}
.buy{position:sticky;inset-block-start:calc(var(--header-h) + var(--space-4))}
.buy h1{font-size:var(--text-2xl);font-weight:400;margin:var(--space-2) 0 var(--space-1);line-height:1.3}
.buy__code{font-size:var(--text-xs);color:var(--ink-muted)}
.buy__pricerow{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;
margin-block:var(--space-5)}
.buy__price{font-size:var(--text-3xl);font-weight:700;font-variant-numeric:tabular-nums;
direction:ltr;unicode-bidi:isolate}
.buy__was{font-size:var(--text-md);color:var(--ink-muted);text-decoration:line-through}
.pill{font-size:var(--text-2xs);font-weight:700;padding:5px 11px;border-radius:var(--radius-pill)}
.pill--save{background:var(--ink);color:var(--ink-inverse)}
.pill--stock{background:var(--accent-quiet);color:var(--ink)}
.bnpl{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);
color:var(--ink-muted);margin-block-end:var(--space-5);flex-wrap:wrap}
.bnpl b{color:var(--ink)}
.bnpl .logo{border:1px solid var(--line);border-radius:var(--radius-xs);padding:3px 8px;
font-weight:700;font-size:10px;color:var(--ink)}
.axis{padding-block:var(--space-5);border-block-start:1px solid var(--line)}
.axis__head{display:flex;align-items:baseline;gap:var(--space-2);margin-block-end:var(--space-4);
font-size:var(--text-sm)}
.axis__head h2{margin:0;font-size:var(--text-sm);font-weight:600}
.axis__head .pick{color:var(--ink-muted);font-size:var(--text-xs)}
.colors{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.colors button{inline-size:72px;block-size:52px;border:1px solid var(--line);
border-radius:var(--radius-sm);display:grid;place-items:center;overflow:hidden;
transition:all 200ms var(--ease)}
.colors button img{inline-size:100%;block-size:100%;object-fit:contain}
.colors button:hover{border-color:var(--line-strong)}
.colors button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.sizes{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sizes button{min-inline-size:82px;padding:12px var(--space-4);font-size:var(--text-sm);
font-weight:600;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
transition:all 200ms var(--ease)}
.sizes button[aria-pressed="true"]{background:var(--ink);color:var(--ink-inverse);border-color:var(--ink)}
.sizes button[disabled]{color:var(--ink-muted);opacity:.4;cursor:not-allowed;text-decoration:line-through}
/* افزودن عدسی طبی — الگوی Sunglass Hut، جای دکمهی «پرو مجازی» */
.lensrow{display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--line);
border-radius:var(--radius-md);padding:var(--space-4);margin-block-start:var(--space-3);
transition:border-color 200ms var(--ease)}
.lensrow:hover{border-color:var(--line-strong)}
.lensrow svg{inline-size:22px;block-size:22px;color:var(--accent);flex:0 0 auto}
.lensrow b{display:block;font-size:var(--text-sm)}
.lensrow span{font-size:var(--text-xs);color:var(--ink-muted)}
.lensrow .go{margin-inline-start:auto;font-size:var(--text-xs);font-weight:700;
border-block-end:1px solid var(--ink);padding-block-end:2px;white-space:nowrap}
.trustrow{display:flex;gap:var(--space-4);background:var(--surface-sunken);
border-radius:var(--radius-md);padding:var(--space-4);margin-block-start:var(--space-5);
font-size:var(--text-xs);justify-content:space-between;flex-wrap:wrap}
.trustrow span{display:flex;align-items:center;gap:6px}
.tagchips{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-block-start:var(--space-4)}
.tagchips span{border:1px solid var(--line);border-radius:var(--radius-pill);
padding:6px var(--space-4);font-size:var(--text-xs);color:var(--ink-muted)}
/* بلوک جزئیات — زیر گالری، تمامعرضِ ستون چپ */
.details{margin-block-start:var(--space-8)}
.details__tabs{display:flex;gap:var(--space-6);border-block-end:1px solid var(--line);
overflow-x:auto;scrollbar-width:none}
.details__tabs::-webkit-scrollbar{display:none}
.details__tabs button{padding-block:var(--space-4);font-size:var(--text-sm);font-weight:600;
color:var(--ink-muted);position:relative;white-space:nowrap;transition:color 200ms var(--ease)}
.details__tabs button::after{content:"";position:absolute;inset-block-end:-1px;inset-inline:0;
block-size:2px;background:var(--ink);transform:scaleX(0);transition:transform 240ms var(--ease)}
.details__tabs button[aria-selected="true"]{color:var(--ink)}
.details__tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.details__panel{padding-block-start:var(--space-6);font-size:var(--text-sm);line-height:1.8;
color:var(--ink-muted)}
.details__panel[hidden]{display:none}
.details__panel p{margin:0 0 var(--space-4);max-inline-size:70ch}
.spectable{inline-size:100%;border-collapse:collapse;font-size:var(--text-sm)}
.spectable tr{border-block-end:1px solid var(--line)}
.spectable tr:last-child{border-block-end:0}
.spectable th{text-align:start;padding:var(--space-3) 0;font-weight:400;color:var(--ink-muted);
inline-size:38%}
.spectable td{padding:var(--space-3) 0;color:var(--ink)}
.speccols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-8)}
@media(max-width:760px){.speccols{grid-template-columns:1fr}}
@media(max-width:980px){.pdp{grid-template-columns:1fr}.buy{position:static}}
/* ══ سبد ══ */
.cartgrid{display:grid;grid-template-columns:1fr 360px;gap:var(--space-8);align-items:start;
padding-block:var(--space-6)}
.line{display:grid;grid-template-columns:130px 1fr auto;gap:var(--space-5);padding-block:var(--space-5);
border-block-end:1px solid var(--line);align-items:center}
.line__media{aspect-ratio:3/2;display:grid;place-items:center;background:var(--surface-sunken);
border-radius:var(--radius-lg)}
.line__media img{inline-size:90%;block-size:90%;object-fit:contain}
.line h2{font-size:var(--text-sm);font-weight:400;margin:4px 0}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);
border-radius:var(--radius-md);margin-block-start:var(--space-3)}
.qty button{inline-size:34px;block-size:34px}
.qty span{inline-size:34px;text-align:center;font-size:var(--text-sm)}
.line__price{text-align:end;font-weight:700;white-space:nowrap}
.remove{display:block;margin-block-start:var(--space-2);font-size:var(--text-xs);
color:var(--ink-muted);text-decoration:underline;font-weight:400}
.summary{background:var(--surface-sunken);border-radius:var(--radius-lg);padding:var(--space-6);
position:sticky;inset-block-start:calc(var(--header-h) + var(--space-4))}
.summary h2{font-size:var(--text-md);margin:0 0 var(--space-5);font-weight:600}
.srow{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-sm);
padding-block:var(--space-2)}
.srow--total{border-block-start:1px solid var(--line-strong);margin-block-start:var(--space-3);
padding-block-start:var(--space-4);font-size:var(--text-md);font-weight:700}
.promoin{display:flex;gap:var(--space-2);margin-block:var(--space-5)}
.promoin input{flex:1;min-inline-size:0;padding:12px var(--space-3);border:1px solid var(--line-strong);
border-radius:var(--radius-md);background:var(--surface);font:inherit;font-size:var(--text-sm)}
@media(max-width:900px){.cartgrid{grid-template-columns:1fr}.line{grid-template-columns:100px 1fr}
.line__price{grid-column:2;text-align:start}}
/* ══ انیمیشن اسکرول ══
⚠️ اینجا قبلاً یک قاعدهی فاجعهبار بود:
@media(prefers-reduced-motion){ [data-anim] * {opacity:1!important} }
نیتش «هیچ محتوایی پنهان نماند» بود، ولی `*` یعنی **هر نواده** — از جمله
عکس دومِ کارت که باید opacity صفر بماند. نتیجه: هر دو عکس همزمان
دیده میشدند و هاور یک شبح میساخت.
حالا لازم هم نیست: CSS دیگر هیچ چیزی را پنهان نمیکند و `animate()` در
حالت کاهشحرکت اصلاً اجرا نمیشود. */
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
/* ══ انتخابگر شکل فریم ══
⚠️ هیچکدام از مرجعها این را ندارند. خریدار عینک اول **شکل** را
انتخاب میکند نه برند، و مبدأ این را فقط به لینک متنی در مگامنو سپرده.
سیلوئتها SVG درونخطاند — بدون عکس، بدون درخواست شبکه. */
/* هشت شکل در چهار ستون ⇒ دو ردیف کامل، بدون یتیم */
.shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.shape{display:grid;place-items:center;gap:var(--space-3);padding:var(--space-7) var(--space-4);
background:var(--surface-sunken);border-radius:var(--radius-lg);text-align:center;
transition:background 260ms var(--ease),transform 260ms var(--ease)}
.shape svg{inline-size:118px;block-size:auto;color:var(--ink);
transition:transform 420ms var(--ease),color 240ms var(--ease)}
.shape:hover{background:var(--accent-quiet);transform:translateY(-3px)}
.shape:hover svg{transform:scale(1.12);color:var(--accent)}
.shape__n{font-size:var(--text-sm);font-weight:600}
.shape__c{font-size:var(--text-xs);color:var(--ink-muted)}
@media(max-width:900px){.shapes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.shapes{grid-template-columns:repeat(2,1fr)}}
/* ══ نوار برند بیپایان ══
⚠️ دو نسخهی پشتسرهم از همان فهرست، و انیمیشن دقیقاً ۵۰٪ جابهجا
میشود — این تنها راهی است که حلقه بدون پرش بسته میشود. */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:var(--space-4);
-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;inline-size:max-content;animation:marq 48s linear infinite}
.marquee .logobox{inline-size:150px;flex:0 0 auto;background:none;padding:var(--space-2)}
.marquee .logobox img{opacity:.5}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .marquee__track{animation-direction:reverse}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}
/* ══ اسلایدر هیرو ══ چرخش با محوشدن، نه لغزش */
.hero__slide{position:relative;aspect-ratio:2.8/1;overflow:hidden;
background:var(--surface-sunken)}
.hero__slide>[data-slide]{position:absolute;inset:0;opacity:0;
transition:opacity 700ms var(--ease)}
.hero__slide>[data-slide][data-on]{opacity:1}
.hero__slide img{inline-size:100%;block-size:100%;object-fit:cover}
.hero__dots i{cursor:pointer}
.hero__dots i:hover{opacity:.8}
/* فلشهای اسلایدر اصلی — روی خودِ تصویر، دو طرف */
.hero__arw{position:absolute;inset-block-start:50%;translate:0 -50%;z-index:3;
inline-size:46px;block-size:46px;border-radius:99px;display:grid;place-items:center;
background:rgb(255 255 255/.86);color:var(--ink);
box-shadow:0 4px 18px rgb(16 16 18/.18);
transition:background 200ms var(--ease),transform 200ms var(--ease)}
.hero__arw:hover{background:var(--surface);transform:translateY(0) scale(1.06)}
.hero__arw--prev{inset-inline-start:var(--space-5)}
.hero__arw--next{inset-inline-end:var(--space-5)}
.hero__arw svg{inline-size:20px;block-size:20px}
.hero__arw--prev svg{transform:scaleX(-1)}
[dir="rtl"] .hero__arw svg{transform:scaleX(-1)}
[dir="rtl"] .hero__arw--prev svg{transform:none}
@media(max-width:640px){.hero__arw{inline-size:38px;block-size:38px}}
@media(prefers-reduced-motion:reduce){.hero__slide>[data-slide]{transition:none}}
/* ⚠️ اینجا یک بلوک جامانده از نسخهی قدیمی بود:
.card:hover .card__media img:not([data-alt-img]){opacity:0}
هیچ عکسی دیگر `data-alt-img` ندارد، پس `:not()` **هر دو** عکس را
میگرفت و روی هاور صفرشان میکرد — و ویژگیاش (۰,۴,۱) از قاعدهی
درست (۰,۳,۰) بالاتر بود، پس همیشه برنده میشد. نتیجه: کارتِ خالی با
زمینهی کرم. سه دور دیباگ خرجش شد چون در CSS بود نه در منطق.
درس: هر بار که الگویی عوض میشود، قاعدهی قدیمی باید **همان لحظه**
حذف شود؛ قاعدهی مرده در CSS بیصدا نمیماند. */
/* ══ جفت ادیتوریال ══
الگوی Sunglass Hut: دو تصویر بزرگ کنار هم، عنوان و لینک **زیر** تصویر
نه رویش. متن روی عکس همیشه با سوژه میجنگد؛ زیرش نمیجنگد. */
.edit{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.edit__fig{margin:0}
.edit__img{aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-lg);
background:var(--surface-sunken)}
.edit__img img{inline-size:100%;block-size:100%;object-fit:cover;
transition:transform 700ms var(--ease)}
.edit__fig:hover .edit__img img{transform:scale(1.04)}
.edit__cap{padding-block-start:var(--space-4)}
.edit__cap h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);
margin:0 0 var(--space-2)}
.edit__cap p{margin:0 0 var(--space-3);color:var(--ink-muted);max-inline-size:52ch}
@media(max-width:820px){.edit{grid-template-columns:1fr}}
/* ══ نوار بیانیه ══
تیره، تایپ بسیار بزرگ، و یک ردیف تراشهی موضوعی بالایش. */
.statement{background:var(--surface-inverse);color:var(--ink-inverse);
padding-block:var(--space-9);position:relative;overflow:hidden}
.statement__tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;
margin-block-end:var(--space-7);opacity:.75}
.statement__tabs span{border:1px solid rgb(255 255 255/.24);border-radius:var(--radius-pill);
padding:7px var(--space-4);font-size:var(--text-xs)}
.statement__tabs span:first-child{background:var(--ink-inverse);color:var(--ink);
border-color:var(--ink-inverse);font-weight:600}
.statement h2{font-family:var(--font-display);font-weight:200;
font-size:clamp(30px,4.6vw,68px);line-height:1.06;letter-spacing:-.02em;
margin:0 0 var(--space-5);max-inline-size:18ch}
[lang="ar"] .statement h2{letter-spacing:0;font-weight:300;line-height:1.3}
.statement p{margin:0 0 var(--space-6);opacity:.6;max-inline-size:52ch;font-size:var(--text-md)}
/* سیلوئت بزرگِ کمرنگ در پسزمینه — امضای بصری، نه تزئین اضافه */
.statement__ghost{position:absolute;inset-block-end:-8%;inset-inline-end:-4%;
inline-size:min(46%,620px);opacity:.055;color:var(--ink-inverse);pointer-events:none}
/* ══ نوار متن متحرک با محصول ══
⚠️ الهام از نوار «Women · Men» ی Sunglass Hut، ولی محتوایش مالِ ماست:
واژهی دوزبانه و cutoutهای خودمان که از نوار بیرون میزنند. */
.wordbar{position:relative;background:var(--surface-inverse-sunken);color:var(--ink-inverse);
overflow:hidden;padding-block:var(--space-6);isolation:isolate}
.wordbar+.wordbar{border-block-start:1px solid rgb(255 255 255/.08)}
.wordbar__track{display:flex;align-items:center;gap:var(--space-7);inline-size:max-content;
animation:wordmarq 40s linear infinite}
.wordbar--rev .wordbar__track{animation-direction:reverse}
.wordbar__w{font-family:var(--font-display);font-weight:200;font-size:clamp(30px,4vw,58px);
line-height:1;white-space:nowrap;opacity:.92}
.wordbar__dot{opacity:.35}
.wordbar__p{inline-size:clamp(120px,11vw,180px);block-size:auto;flex:0 0 auto;
filter:drop-shadow(0 12px 24px rgb(0 0 0/.5))}
@keyframes wordmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .wordbar__track{animation-direction:reverse}
[dir="rtl"] .wordbar--rev .wordbar__track{animation-direction:normal}
.wordbar:hover .wordbar__track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.wordbar__track{animation:none}}
/* ══ ردیف خدمات ══ */
.services{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-5)}
.service svg{inline-size:26px;block-size:26px;color:var(--accent);margin-block-end:var(--space-3)}
.service h3{font-size:var(--text-sm);font-weight:600;margin:0 0 6px}
.service p{margin:0 0 var(--space-3);font-size:var(--text-xs);color:var(--ink-muted);line-height:1.6}
.service a{font-size:var(--text-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
border-block-end:1px solid var(--ink);padding-block-end:2px}
[lang="ar"] .service a{letter-spacing:0;text-transform:none;font-size:var(--text-xs)}
@media(max-width:1000px){.services{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}}
/* ══ نوار خبرنامه ══ */
.news{background:var(--accent-quiet);border-radius:var(--radius-xl);
padding:var(--space-8) var(--space-7);text-align:center}
.news h2{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,3vw,var(--text-4xl));
margin:0 0 var(--space-3)}
.news p{margin:0 auto var(--space-6);color:var(--ink-muted);max-inline-size:56ch}
.news__form{display:flex;gap:var(--space-2);max-inline-size:460px;margin-inline:auto}
.news__form input{flex:1;min-inline-size:0;padding:15px var(--space-5);border:1px solid var(--line-strong);
border-radius:var(--radius-pill);background:var(--surface);font:inherit;font-size:var(--text-sm)}
.news__form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.news__form .btn{border-radius:var(--radius-pill)}
/* ══ ۱ · نقطههای رنگ روی کارت ══
⚠️ این تنها جایی است که **گروهبندی مدل** در ویترین دیده میشود — همان
کاری که ۱۴٬۰۵۰ محصول مبدأ را به ۵٬۷۱۲ مدل فشرد. بدون این، آن کار
کاملاً پنهان میماند.
رنگ هر نقطه از خودِ عکسِ همان رنگ استخراج شده، نه از جدول دستی: کد
«۹۰۲/۵۷» به هیچ نامی نگاشت نمیشود، ولی خودِ فریم میداند چه رنگی است. */
.ways{display:flex;align-items:center;gap:7px;justify-content:center;
margin-block-start:var(--space-3);min-block-size:20px}
.ways button{inline-size:14px;block-size:14px;border-radius:99px;flex:0 0 auto;
box-shadow:0 0 0 1px var(--line-strong) inset;
transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
.ways button:hover{transform:scale(1.25)}
.ways button[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--surface) inset,0 0 0 2px var(--ink)}
.ways .more{font-size:var(--text-2xs);color:var(--ink-muted);margin-inline-start:2px}
/* ══ ۴ · یابندهی سایز از عرض صورت ══
⚠️ بهجای «پرو مجازی» که دوربین و مدل سهبعدی میخواهد و در اتود دروغ
است. این با دادهی واقعی کار میکند: عرض عدسه روی هر فریم حک شده و
توزیعش را از ۹٬۰۴۸ محصول مبدأ داریم. */
.fitter{background:var(--surface-inverse);color:var(--ink-inverse);border-radius:var(--radius-xl);
padding:var(--space-8) var(--space-7);display:grid;grid-template-columns:1fr 1fr;
gap:var(--space-8);align-items:center}
.fitter h2{font-family:var(--font-display);font-weight:300;
font-size:clamp(24px,2.6vw,var(--text-4xl));margin:0 0 var(--space-3);line-height:1.15}
.fitter p{margin:0;opacity:.6;font-size:var(--text-sm);max-inline-size:46ch}
.fitter__ctl{display:grid;gap:var(--space-5)}
.fitter__val{display:flex;align-items:baseline;gap:var(--space-3)}
.fitter__val b{font-family:var(--font-display);font-weight:200;font-size:52px;line-height:1;
color:var(--accent);font-variant-numeric:tabular-nums}
.fitter__val span{font-size:var(--text-sm);opacity:.6}
.fitter input[type=range]{inline-size:100%;accent-color:var(--accent);block-size:22px;cursor:grab}
.fitter__scale{display:flex;justify-content:space-between;font-size:var(--text-2xs);opacity:.45}
.fitter__out{border-block-start:1px solid rgb(255 255 255/.14);padding-block-start:var(--space-5);
display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.fitter__pick{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-pill);
padding:9px var(--space-5);font-weight:700;font-size:var(--text-md);
font-variant-numeric:tabular-nums}
.fitter__note{font-size:var(--text-xs);opacity:.6;flex:1;min-inline-size:180px}
/* هیستوگرام واقعی — از ۹٬۰۴۸ محصول */
.fitter__hist{display:flex;align-items:flex-end;gap:3px;block-size:56px;margin-block-start:var(--space-4)}
.fitter__hist i{flex:1;background:rgb(255 255 255/.18);border-radius:2px 2px 0 0;display:block;
transition:background 200ms var(--ease)}
.fitter__hist i[data-on]{background:var(--accent)}
@media(max-width:860px){.fitter{grid-template-columns:1fr;gap:var(--space-6)}}
/* ══ ۸ · موزائیک ادیتوریال ══
⚠️ باگ نسخهی قبل: ردیف دوم ۲+۲+۳ میشد — ۷ ستون در شبکهی ۶ ستونه —
پس آخرین کاشی میپرید و حفرهی دوستونه میماند. کلاسها حالا صریح
عرض میگویند (w2/w3/w4) تا جمعِ هر ردیف با یک نگاه چکشدنی باشد:
۴+۲ · ۲+۲+۲ · ۳+۳
بلوک متنی همارزِ عکس است — همان چیزی که این را از کاتالوگ به مجله
تبدیل میکند. */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3)}
.mo{position:relative;overflow:hidden;border-radius:var(--radius-lg);
background:var(--surface-sunken);display:flex}
.mo img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.mo--img:hover img{transform:scale(1.05)}
.mo--w2{grid-column:span 2}
.mo--w3{grid-column:span 3}
.mo--w4{grid-column:span 4}
.mo--img.mo--w4{aspect-ratio:2/1}
.mo--img.mo--w3{aspect-ratio:3/2}
.mo--img.mo--w2{aspect-ratio:1/1}
.mo--text{background:var(--surface);border:1px solid var(--line);
flex-direction:column;justify-content:center;padding:var(--space-6);gap:var(--space-3)}
.mo--text.mo--ink{background:var(--surface-inverse);color:var(--ink-inverse);border-color:transparent}
.mo--text h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);margin:0;
line-height:1.1}
.mo--text p{margin:0;font-size:var(--text-sm);color:var(--ink-muted);line-height:1.7}
.mo--ink p{color:var(--ink-inverse);opacity:.6}
.mo--text a{font-size:var(--text-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
border-block-end:1px solid currentColor;padding-block-end:2px;align-self:flex-start}
[lang="ar"] .mo--text a{letter-spacing:0;text-transform:none;font-size:var(--text-xs)}
.mo__cap{position:absolute;inset-block-end:0;inset-inline:0;
padding:var(--space-7) var(--space-4) var(--space-4);
color:var(--ink-inverse);font-weight:600;font-size:var(--text-md);
background:linear-gradient(to top,rgb(0 0 0/.66),transparent)}
@media(max-width:900px){
.mosaic{grid-template-columns:repeat(2,1fr)}
.mo--w2,.mo--w3,.mo--w4{grid-column:span 2}
.mo--img.mo--w4,.mo--img.mo--w3,.mo--img.mo--w2{aspect-ratio:16/9}
.mo--text{aspect-ratio:auto}
}
/* ══ ۱۱ · نوار جایگاه قیمت ══
کاتالوگ از ۷۰ تا ۶۵٬۷۲۰ درهم است — ۹۴۳ برابر. بدون یک مرجع بصری،
عددِ تنها معنی ندارد. */
.pband{margin-block-start:var(--space-5)}
.pband__t{display:flex;align-items:baseline;gap:var(--space-2);font-size:var(--text-xs);
color:var(--ink-muted);margin-block-end:var(--space-3)}
.pband__bar{block-size:6px;border-radius:99px;position:relative;
background:linear-gradient(to right,var(--surface-sunken),var(--line-strong))}
[dir="rtl"] .pband__bar{background:linear-gradient(to left,var(--surface-sunken),var(--line-strong))}
.pband__k{position:absolute;inset-block-start:50%;translate:-50% -50%;inline-size:16px;
block-size:16px;border-radius:99px;background:var(--accent);
box-shadow:0 0 0 3px var(--surface),0 2px 8px rgb(16 16 18/.25)}
[dir="rtl"] .pband__k{translate:50% -50%}
.pband__s{display:flex;justify-content:space-between;font-size:var(--text-2xs);
color:var(--ink-muted);margin-block-start:var(--space-3)}
/* ══ آکاردئون (FAQ) ══
⚠️ این استایل موقع تبدیل آکاردئونِ PDP به تب حذف شده بود و FAQ صفحهی
اصلی بیاستایل مانده بود. حالا برگشته — ولی با **همان الگوی کلپسیبلِ
فیلترها**، نه یک الگوی دوم: باز و بسته شدن روی
`grid-template-rows: 0fr → 1fr` است، پس عدد جادویی ندارد و با هر
طول متنی درست کار میکند. یک آکاردئون در کل اتود، نه دو تا. */
.acc{border-block-start:1px solid var(--line)}
.accq{border-block-end:1px solid var(--line)}
.accq__h{inline-size:100%;display:flex;align-items:center;gap:var(--space-4);
padding-block:var(--space-5);text-align:start;cursor:pointer;
font-size:var(--text-lg);font-weight:500;font-family:var(--font-display);
transition:color 200ms var(--ease)}
.accq__h:hover{color:var(--accent)}
.accq__h .car{margin-inline-start:auto;flex:0 0 auto;opacity:.5;
transition:transform 280ms var(--ease)}
.accq[data-open] .accq__h .car{transform:rotate(-135deg) translate(-1px,-2px)}
.accq__b{display:grid;grid-template-rows:0fr;opacity:0;
transition:grid-template-rows 300ms var(--ease),opacity 220ms var(--ease)}
.accq[data-open] .accq__b{grid-template-rows:1fr;opacity:1}
.accq__in{overflow:hidden;min-block-size:0}
.accq__p{padding-block-end:var(--space-5);font-size:var(--text-sm);line-height:1.85;
color:var(--ink-muted);max-inline-size:82ch}
@media(prefers-reduced-motion:reduce){.accq__b{transition:none}}
/* لایهی اپ — بعد از توکنها و CSSِ اتود. فقط آنچه اتود (HTML ایستا) لازم نداشت. */
/* فونتها: next/font خودمیزبان است (بدونِ CDN در زمانِ اجرا) و متغیرِ CSS میدهد؛ توکنهای
اتود فقط نامِ خانواده را میشناسند، پس همانها را اینجا به فونتِ بارگذاریشده وصل میکنیم. */
:root {
--font-ui: var(--ff-inter), Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: var(--ff-newsreader), Newsreader, Georgia, "Times New Roman", serif;
}
:root:lang(ar), [lang="ar"] {
--font-ui: var(--ff-cairo), Cairo, "Noto Sans Arabic", system-ui, sans-serif;
--font-display: var(--ff-cairo), Cairo, "Noto Sans Arabic", system-ui, sans-serif;
}
/* پرشِ دسترسپذیر به محتوا — فقط با فوکسِ کیبورد دیده میشود. */
.skip {
position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 99;
background: var(--surface-inverse); color: var(--ink-inverse);
padding: 8px 14px; border-radius: var(--radius-md); font-size: var(--text-sm);
transform: translateY(-300%);
}
.skip:focus { transform: none; }
/* `inert` پسزمینهی کشو را از فوکس و کلیک میاندازد؛ اتود این حالت را نداشت. */
#page[inert] { user-select: none; }
/* دکمهی زبان: `lang` روی خودِ لینک است و `[lang="ar"]` متغیرِ `--font-ui` را همانجا عوض میکند،
ولی `font-family` از والد (Inter) ارث رسیده؛ بدونِ این، «العربية» مربع میشود و هدرِ موبایل
را ۱۳px پهنتر از صفحه میکند. */
.chipbtn[lang] { font-family: var(--font-ui); }
/* هدرِ موبایل: اتود در ≤۳۹۰px از صفحه بیرون میزد (بایگانیِ برسی: «header 403 در قابِ ۳۹۰»). burger + لوگو + چیپِ
زبان + جستجو + سبد در ۳۲۰px جا نمیشود، پس زیرِ ۴۰۰px فاصلهها و لوگو فشرده میشوند. */
/* لوگوی تازه عمودی است (چشمِ OV + «OPTI VIEW» زیرش)، پس بلندتر از لوگوی افقیِ قبلی (۳۴px) */
.brandmark img { block-size: 52px; }
@media (max-width: 478px) { .brandmark img { block-size: 42px; } }
@media (max-width: 400px) {
.header__in { gap: var(--space-2); }
.tools { gap: var(--space-1); }
.brandmark img { block-size: 38px; }
.brandmark--ar { font-size: var(--text-xl); }
.chipbtn { padding-inline: var(--space-2); }
}
@media (max-width: 340px) {
.header__in { padding-inline: var(--space-3); }
.brandmark img { block-size: 34px; }
}
/* «Brands» در ناوبریِ موبایل لینکِ ساده است، نه آکاردئون؛ همان ریتمِ `summary` */
.mnav > li > a { display: block; padding-block: var(--space-4); font-size: var(--text-md); font-weight: 500; }
/* باگِ خودِ اتود: `.edit__img` یک ِ inline است و `aspect-ratio:16/10` + `overflow:hidden`ِ همان قاعده
روی عنصرِ inline اثر ندارد؛ عکسِ پرتره با ارتفاعِ طبیعی (۹۵۵px) میآمد و کپشن از بخش بیرون میزد.
`block` همان مقصودِ CSSِ اتود را برآورده میکند: قابِ ۱۶:۱۰ و کپشنِ داخلِ بخش. */
.edit__img { display: block; }
/* ستونِ شکلها به تعدادِ شکلها (کمتر از ۴ ← کارتها نیمهی صفحه را خالی نگذارند). با `@media` تا قاعدهی
ریسپانسیوِ اتود (۲ ستون زیرِ ۹۰۰px) نپوشانده شود — سبکِ inline آن را میپوشاند و سرریز میداد. */
@media (min-width: 901px) { .shapes { grid-template-columns: repeat(var(--cols, 4), 1fr); } }
/* باگِ خودِ اتود: کارتِ شکل (سیلوئتِ ۱۱۸px + پدینگ) دو ستون را در ≤۳۶۰px از صفحه بیرون میبرد
(در جاروی ۲۲عرضیِ اتود هم ثبت شده بود). */
@media (max-width: 380px) {
.shapes { gap: var(--space-2); }
.shape { min-inline-size: 0; padding-inline: var(--space-2); }
.shape svg { inline-size: min(118px, 100%); }
}
/* سربرگِ کاروسل با «View all» + دو فلش در موبایل جا نمیشود؛ بشکند. */
@media (max-width: 480px) {
.sechead { flex-wrap: wrap; }
}
/* ── فهرست: فیلتر، مرتبسازی، صفحهبندی ───────────────────────────────── */
.fprice { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); align-items: center; }
.fprice .fsearch { margin-block-end: 0; }
.fprice input::-webkit-outer-spin-button, .fprice input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fprice input[type="number"] { -moz-appearance: textfield; appearance: textfield; min-inline-size: 0; }
/* مرتبسازیِ واقعی با ظاهرِ همان متنِ اتود («Sort by: …⌄») */
.sortby { display: inline-flex; align-items: center; gap: 6px; }
.sortby select {
appearance: none; border: 0; background: none; font: inherit; font-weight: 600; color: inherit;
padding-inline-end: 14px; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
background-position: calc(100% - 7px) 55%, calc(100% - 3px) 55%;
}
[dir="rtl"] .sortby select { background-position: 7px 55%, 3px 55%; }
/* ══ Skeleton ═══════════════════════════════════════════════════════════════
یک زبانِ بارگذاری برای هر دو پیادهسازی (Next و Blade): همین کلاسها و همین ابعاد.
۱) ناوبری به مسیرِ دیگر ← صفحهی اسکلت (`.sk-page`: Next با loading.tsx، Blade با + Turbo).
۲) تغییرِ فیلتر/ترتیب/صفحه روی همان مسیر ← `html[data-filtering]` کارتهای موجود را به اسکلت تبدیل میکند
(ابعادِ کارت ثابت میماند، پس شبکه نمیپرد). */
.sk { background: linear-gradient(100deg, var(--surface-sunken) 30%, var(--line) 50%, var(--surface-sunken) 70%); background-size: 300% 100%; animation: sk-shimmer 1.3s linear infinite; border-radius: var(--radius-sm, 4px); }
[dir="rtl"] .sk { animation-direction: reverse; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk, html[data-filtering] .grid .card__media, html[data-filtering] .grid .card__body > * { animation: none !important; } }
.sk-line { block-size: 1em; margin-block: 0.55em; }
.sk-w30 { inline-size: 30%; } .sk-w50 { inline-size: 50%; } .sk-w70 { inline-size: 70%; } .sk-w90 { inline-size: 90%; }
.sk-title { block-size: clamp(30px, 3.4vw, 48px); inline-size: min(420px, 70%); margin-block: var(--space-7) var(--space-4); }
.sk-btn { block-size: 48px; border-radius: var(--radius-md, 8px); }
.sk-chip { display: inline-block; inline-size: 96px; block-size: 34px; border-radius: 999px; }
.sk-page { min-block-size: 70vh; }
.sk-pdp { padding-block: var(--space-6); }
.sk-pdp .pdp__shot { background: none; }
.sk-card .card__media { background: none; }
.sk-card .card__media .sk { inline-size: 100%; block-size: 100%; border-radius: var(--radius-md); }
.sk-hero { block-size: min(70vh, 640px); border-radius: 0; }
.sk-row { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-5); padding-block: var(--space-5); border-block-end: 1px solid var(--line); }
.sk-row .sk:first-child { aspect-ratio: 3 / 2; }
/* فیلتر در حال بهروزرسانی: محتوای کارتها پنهان و جایش اسکلت (کلیک غیرفعال) */
.grid[aria-busy="true"], html[data-filtering] .grid { pointer-events: none; }
html[data-filtering] .grid .card__media,
html[data-filtering] .grid .card__body > * { background: linear-gradient(100deg, var(--surface-sunken) 30%, var(--line) 50%, var(--surface-sunken) 70%); background-size: 300% 100%; animation: sk-shimmer 1.3s linear infinite; border-radius: var(--radius-sm, 4px); }
html[data-filtering] .grid .card__media { border-radius: var(--radius-md); }
html[data-filtering] .grid .card__media > *, html[data-filtering] .grid .card__media img { opacity: 0 !important; } /* Blade: است و display:contents */
html[data-filtering] .grid .card__body { color: transparent; }
html[data-filtering] .grid .card__body * { color: transparent !important; border-color: transparent !important; }
html[data-filtering] .grid .card__body svg, html[data-filtering] .grid .card__body .ways, html[data-filtering] .grid .card__cta { visibility: hidden; }
html[data-filtering] .grid .card__body > .t-brand { inline-size: 30%; }
html[data-filtering] .grid .card__body > .t-title { inline-size: 75%; margin-block: 0.5em; }
html[data-filtering] .grid .card__body > .card__row { inline-size: 50%; }
/* اسکلتِ ناوبری روی صفحه است ← محتوای واقعیِ صفحهی قبل پنهان (Next: NavSkeleton، Blade: theme.js) */
html[data-sk] #main:not(.sk-page) { display: none; }
/* بعد از کلیک در منوی بزرگ، تا حرکتِ بعدیِ ماوس بسته میماند (صفحه ریلود نمیشود که خودش ببندد) */
html[data-nav-hold] .mega { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.turbo-progress-bar { display: none; }
.pager { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; padding-block: var(--space-8) var(--space-6); }
.empty { text-align: center; padding-block: var(--space-9); }
.empty p { margin: 0 0 var(--space-4); color: var(--ink-muted); }
.toolbar .chipbtn{white-space:nowrap;flex:none}
.toolbar .t-meta{white-space:nowrap}
/* PDP: ستونهای grid با min-content (عکسِ ۱۲۰۰پیکسلی) از عرضِ صفحه بیرون نزنند */
.pdp{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.pdp>*,.pdp__gal,.pdp__shot{min-inline-size:0}
.pdp__gal button.pdp__shot{border:0;padding:0;cursor:pointer;font:inherit;color:inherit;background:var(--surface-sunken)}
@media(max-width:980px){.pdp{grid-template-columns:minmax(0,1fr)}}
.buy__code{direction:inherit}
/* موبایل: گالری ← خرید ← جزئیات (قیمت و «افزودن» زیرِ تبها گم نشود) */
@media(max-width:980px){
.pdp{gap:var(--space-6)}
.pdp__main{display:contents}
.pdp__gal{order:1}
.buy{order:2}
.details{order:3;margin-block-start:0}
}
/* ── ویزاردِ عدسی ── */
.lw-scrim{position:fixed;inset:0;background:rgb(10 10 11/.55);z-index:70}
.lw-modal{position:fixed;z-index:71;inset-block:0;inset-inline:0;margin:auto;display:flex;flex-direction:column;background:var(--surface);
inline-size:min(760px,100%);block-size:min(860px,100dvh);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}
.lw-modal__x{position:absolute;inset-block-start:var(--space-3);inset-inline-end:var(--space-3);z-index:2;inline-size:40px;block-size:40px;border-radius:50%;
border:1px solid var(--line);background:var(--surface);font-size:22px;line-height:1;cursor:pointer}
.lw-modal .lw-wrap{display:flex;flex-direction:column;min-block-size:0;flex:1}
.lw-wrap .lw{display:flex;flex-direction:column;min-block-size:0;flex:1}
@media(max-width:640px){.lw-modal{block-size:100dvh;border-radius:0;inline-size:100%}}
.lw-product{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);padding-inline-end:calc(var(--space-6) + 48px);border-block-end:1px solid var(--line);font-size:var(--text-sm)}
.lw-product img{inline-size:80px;block-size:56px;object-fit:contain;flex:none}
.lw__head{padding:var(--space-5) var(--space-6) var(--space-3)}
.lw__head h2{margin:var(--space-3) 0 0;font-size:var(--text-xl);font-weight:500;outline:none}
.lw__steps{display:flex;gap:var(--space-4);list-style:none;margin:0;padding:0;font-size:var(--text-xs);color:var(--ink-muted);overflow-x:auto;scrollbar-width:none}
.lw__steps li{white-space:nowrap;padding-block-end:6px;border-block-end:2px solid transparent}
.lw__steps li[data-done]{color:var(--ink)}
.lw__steps li[aria-current]{color:var(--ink);font-weight:700;border-color:var(--ink)}
.lw__body{flex:1;min-block-size:0;overflow-y:auto;padding:var(--space-3) var(--space-6) var(--space-6)}
.lw__opts{display:grid;gap:var(--space-3)}
.lw__opt{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);text-align:start;inline-size:100%;padding:var(--space-4) var(--space-5);
border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.lw__opt:hover{border-color:var(--line-strong)}
.lw__opt[aria-pressed="true"],.lw__opt[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.lw__opt-main{display:grid;gap:4px;min-inline-size:0}
.lw__opt-main b{font-size:var(--text-sm)}
.lw__opt-main>span{font-size:var(--text-xs);color:var(--ink-muted)}
.lw__opt-price{text-align:end;white-space:nowrap;font-size:var(--text-sm);font-weight:600;flex:none}
.lw__opt-price small{color:var(--ink-muted);font-weight:400}
.lw__opt-price s{display:block;font-weight:400;color:var(--ink-muted);font-size:var(--text-xs)}
.lw__badges{display:flex;gap:6px;flex-wrap:wrap}
.lw__groups{display:grid;gap:var(--space-6)}
.lw__fs{border:0;padding:0;margin:0;min-inline-size:0}
.lw__fs legend{font-size:var(--text-sm);font-weight:600;padding:0;margin-block-end:var(--space-2)}
.lw__fs p{margin:0 0 var(--space-3);font-size:var(--text-xs);color:var(--ink-muted)}
.lw__chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-block-end:var(--space-2)}
.lw__chips button{padding:9px var(--space-4);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:inherit;font:inherit;font-size:var(--text-sm);cursor:pointer}
.lw__chips button[aria-pressed="true"]{background:var(--ink);color:var(--ink-inverse);border-color:var(--ink)}
.lw__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:var(--space-3)}
.lw__field{display:grid;gap:4px;align-content:start}
.lw__field label{font-size:var(--text-xs);color:var(--ink-muted)}
.lw__field input{inline-size:100%;padding:11px var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font:inherit;font-size:var(--text-sm);text-align:start}
.lw__field input[aria-invalid="true"]{border-color:#B3261E}
.lw__field small{font-size:var(--text-2xs);color:var(--ink-muted)}
.lw__field input[aria-invalid="true"]+small{color:#B3261E}
.lw__field--pd{max-inline-size:240px;margin-block-start:var(--space-4)}
.lw__rx{display:grid;gap:var(--space-4)}
.lw__upload{display:grid;gap:var(--space-3);justify-items:start}
.lw__file{display:flex;gap:var(--space-3);align-items:center;margin:0;font-size:var(--text-sm)}
.lw__link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.lw__msg{margin:0;color:#B3261E;font-size:var(--text-sm)}
.lw__foot{border-block-start:1px solid var(--line);padding:var(--space-4) var(--space-6);display:grid;gap:var(--space-3);background:var(--surface)}
.lw__total{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3)}
.lw__total b{font-size:var(--text-xl);font-variant-numeric:tabular-nums}
.lw__total-label{font-size:var(--text-sm);color:var(--ink-muted)}
.lw__saved{font-size:var(--text-xs);font-weight:700;background:var(--accent-quiet);padding:4px 10px;border-radius:var(--radius-pill)}
.lw__total details{inline-size:100%;font-size:var(--text-xs)}
.lw__total summary{cursor:pointer;color:var(--ink-muted)}
.lw__total ul{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;gap:4px}
.lw__total li{display:flex;justify-content:space-between;gap:var(--space-4)}
.lw__nav{display:flex;gap:var(--space-3);justify-content:flex-end}
.lw__nav .btn{min-inline-size:132px}
@media(max-width:640px){.lw__head,.lw__body,.lw__foot,.lw-product{padding-inline:var(--space-4)}.lw-product{padding-inline-end:calc(var(--space-4) + 48px)}.lw__nav .btn{flex:1}}
/* هدفِ لمسی ≥ ۴۰px در موبایل (چکِ جاروی ریسپانسیو؛ اتود ۳۶–۳۸ بود): اندازهی دیدنی همان است، فقط جعبه بزرگتر */
@media(max-width:820px){
.burger,.iconbtn{inline-size:40px;block-size:40px}
.chipbtn{min-block-size:40px;display:inline-flex;align-items:center}
.brandmark{min-block-size:40px}
.tools{gap:var(--space-1)}
}
/* نوارِ ابزارِ PLP در عرضهای کم بشکند، نه سرریز (جاروی ۳۲۰/۳۶۰) */
.toolbar{flex-wrap:wrap;row-gap:var(--space-2)}
/* هدفِ لمسی ≥ ۴۰px برای بقیهی کنترلهای موبایل (نتیجهی جاروی ریسپانسیو) */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-2);padding-block-start:var(--space-2)}
@media(max-width:820px){
.hero__arw,.carousel__nav button{inline-size:40px;block-size:40px}
.more,.mo a,a.card__cta,.crumbs a{display:inline-flex;align-items:center;min-block-size:40px}
.drawer__x{inline-size:40px;block-size:40px}
/* نقطهی رنگِ کارت: همان ۱۴px دیدنی (با ::before)، جعبهی لمس ۴۰px */
.ways{gap:0}
.ways button{inline-size:40px;block-size:40px;position:relative;background:none!important;box-shadow:none!important;border-radius:0}
.ways button::before{content:"";position:absolute;inset:13px;border-radius:99px;background:var(--dot);box-shadow:0 0 0 1px var(--line-strong) inset}
.ways button[aria-pressed="true"]::before{box-shadow:0 0 0 1.5px var(--surface) inset,0 0 0 2px var(--ink)}
}
/* تراشهی برند لینک است، نه دکمه: `aria-current` (نه `aria-pressed`که برای لینک مجاز نیست) */
.chip[aria-current="true"]{border-color:var(--ink);background:var(--ink);color:var(--ink-inverse)}
/* نوار اعلان */
.announce{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-2) var(--space-6);background:var(--accent);color:var(--ink);font-size:var(--text-xs);font-weight:600;position:relative}
.announce a{text-decoration:underline}
.announce button{position:absolute;inset-inline-end:var(--space-3);inset-block:0;margin-block:auto;inline-size:32px;block-size:32px;font-size:20px;line-height:1;cursor:pointer;color:inherit}
@media(max-width:820px){.announce button{inline-size:40px;block-size:40px}.announce{padding-inline:var(--space-8);padding-block:0}.announce a{min-block-size:40px;display:inline-flex;align-items:center}} /* هدفِ لمسی ≥۴۰px: جاروی ریسپانسیو بعد از CR1 این را گرفت */
/* سبدِ دارای ردیف: هدفِ لمسی ≥ ۴۰px (جاروی Blade با سبدِ پر گرفت؛ جاروی قبلیِ Next سبدِ خالی را میسنجید و اینها را ندید) */
@media(max-width:820px){
.qty button{inline-size:40px;block-size:40px}
.qty span{inline-size:40px}
.remove{min-block-size:40px;display:inline-flex;align-items:center}
.line h2 a{display:inline-flex;align-items:center;min-block-size:40px}
}
/* ═══ فقط ویترین Blade ═══ (بعد از CSS ی Next در بسته میآید؛ چیزی از آن را بازنویسی نمیکند، فقط مارکآپِ Blade را میپوشاند)
ویزارد: گزینهها `