/* ========================================================================== AGK Publish - Unified Theme Colors: navy #053E68 | teal #015C74 | aqua #54B0B0 | orange #FDB039 | pink #FDEFEF Sections: 1) Header 2) Mobile drawer 3) Footer 4) Profile shell + sidebar 5) Shared components 6) Page-specific 7) Responsive ========================================================================== */ /* ============================== 1) HEADER ============================== */ #agkHeader{--navy:#053E68;--teal:#015C74;--aqua:#54B0B0;--orange:#FDB039;--pink:#FDEFEF; position:sticky;top:0;z-index:999;background:#fff;direction:rtl;text-align:right; font-family:inherit;line-height:1.5;box-shadow:0 2px 14px rgba(5,62,104,.10); transition:box-shadow .3s;margin:0;padding:0;border:0;width:100%} #agkHeader.is-stuck{box-shadow:0 4px 22px rgba(5,62,104,.22)} #agkHeader *,#agkHeader *::before,#agkHeader *::after{box-sizing:border-box} #agkHeader ul{list-style:none;margin:0;padding:0;float:none;background:none;box-shadow:none;border:0;position:static;width:auto} #agkHeader li{margin:0;padding:0;float:none;display:block;width:auto;border:0;background:none;position:static} #agkHeader a{text-decoration:none;background:none;box-shadow:none;transition:color .2s,background .2s,padding .2s} #agkHeader a::before,#agkHeader a::after{content:none} #agkHeader button{font-family:inherit;margin:0;box-shadow:none;outline:0;appearance:none;-webkit-appearance:none} #agkHeader h4{margin:0;padding:0} #agkHeader img{max-width:100%;height:auto;border:0} #agkHeader .agk-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px;float:none} /* row 1 */ #agkHeader .agk-topbar{background:var(--navy);color:#fff;font-size:13px;overflow:hidden;max-height:42px; transition:max-height .3s ease,opacity .3s ease} #agkHeader .agk-topbar .agk-wrap{display:flex;align-items:center;justify-content:space-between;height:42px} #agkHeader .agk-topbar a{color:#fff;display:inline-flex;align-items:center;gap:8px} #agkHeader .agk-topbar a.agk-bale{background:var(--orange);color:var(--navy);font-weight:700;padding:4px 14px; border-radius:50px;font-size:12.5px} #agkHeader .agk-topbar a.agk-bale:hover{background:#fff;color:var(--navy)} #agkHeader.is-stuck .agk-topbar{max-height:0;opacity:0} /* row 2 */ #agkHeader .agk-main .agk-wrap{display:flex;align-items:center;gap:28px;padding-top:16px;padding-bottom:16px;transition:padding .3s} #agkHeader.is-stuck .agk-main .agk-wrap{padding-top:8px;padding-bottom:8px} #agkHeader .agk-logo{flex:0 0 auto;font-weight:800;font-size:26px;color:var(--navy);line-height:1;transition:font-size .3s} #agkHeader .agk-logo span{color:var(--orange)} #agkHeader .agk-logo img{height:52px;width:auto;display:block;transition:height .3s} #agkHeader.is-stuck .agk-logo{font-size:21px} #agkHeader.is-stuck .agk-logo img{height:38px} #agkHeader .agk-search{flex:1 1 auto;position:relative;max-width:640px;margin:0 auto} #agkHeader .agk-search form{display:flex;align-items:center;background:var(--pink);border:2px solid transparent; border-radius:50px;padding:0 6px;margin:0;transition:.2s;width:100%} #agkHeader .agk-search form:focus-within{border-color:var(--aqua);background:#fff;box-shadow:0 0 0 4px rgba(84,176,176,.18)} #agkHeader .agk-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;box-shadow:none;height:46px; padding:0 18px;margin:0;font-size:14px;text-align:right;color:var(--navy);border-radius:0} #agkHeader .agk-search input::placeholder{color:#8a97a3} #agkHeader .agk-search .agk-search-btn{border:0;background:var(--orange);color:var(--navy);width:38px;height:38px; padding:0;border-radius:50%;cursor:pointer;flex:0 0 auto;transition:.2s} #agkHeader .agk-search .agk-search-btn:hover{background:var(--navy);color:#fff} #agkHeader.is-stuck .agk-search input{height:40px} #agkHeader #search-results{position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:20;display:none; background:#fff;border-radius:16px;padding:10px 16px;box-shadow:0 10px 30px rgba(5,62,104,.18); max-height:340px;overflow:auto} #agkHeader .agk-actions{flex:0 0 auto;display:flex;align-items:center;gap:10px} #agkHeader .agk-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px; height:44px;min-width:44px;padding:0 12px;border:0;border-radius:50px;cursor:pointer; background:var(--pink);color:var(--navy);font-size:18px;transition:.2s} #agkHeader .agk-btn:hover,#agkHeader .agk-dd.open>.agk-btn{background:var(--navy);color:#fff} #agkHeader .agk-cart-sum{font-size:13px;font-weight:700} #agkHeader .agk-cart-sum small{font-weight:400} #agkHeader .agk-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;line-height:20px; border-radius:50%;background:var(--orange);color:var(--navy);font-size:11px;font-weight:800;text-align:center} /* dropdowns */ #agkHeader .agk-dd{position:relative} #agkHeader .agk-dd-panel{position:absolute;top:calc(100% + 12px);left:0;z-index:60;background:#fff; border-radius:16px;box-shadow:0 14px 40px rgba(5,62,104,.22);border-top:3px solid var(--aqua); display:none;min-width:200px} #agkHeader .agk-dd.open>.agk-dd-panel{display:block;animation:agkFade .2s ease} @keyframes agkFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #agkHeader .agk-user-panel{padding:8px;min-width:190px} #agkHeader .agk-user-panel a{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px; color:var(--navy);font-weight:600;font-size:14px} #agkHeader .agk-user-panel a:hover{background:var(--pink);color:var(--teal)} #agkHeader .agk-user-panel hr{border:0;border-top:1px solid #eef2f5;margin:4px 8px} /* cart panel */ #agkHeader .agk-cart-panel{width:360px;max-width:92vw;padding:16px} #agkHeader .agk-cart-head{display:flex;justify-content:space-between;align-items:center; padding-bottom:10px;margin-bottom:10px;border-bottom:2px solid var(--pink)} #agkHeader .agk-cart-head h4{font-size:16px;font-weight:800;color:var(--navy)} #agkHeader .agk-dd-close{border:0;background:none;color:#8a97a3;cursor:pointer;font-size:14px} #agkHeader .agk-dd-close:hover{color:var(--navy)} #agkHeader .agk-cart-empty{text-align:center;color:#6b7b8a;margin:18px 0;font-size:14px} #agkHeader .agk-cart-list{max-height:280px;overflow:auto} #agkHeader .agk-cart-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f1f4f6} #agkHeader .agk-cart-img{flex:0 0 58px;width:58px;height:58px;border-radius:10px;overflow:hidden;background:var(--pink)} #agkHeader .agk-cart-img img{width:100%;height:100%;object-fit:cover;display:block} #agkHeader .agk-cart-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} #agkHeader .agk-cart-name{color:var(--navy);font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #agkHeader .agk-cart-name:hover{color:var(--teal)} #agkHeader .agk-cart-qty{font-size:12.5px;color:#6b7b8a} #agkHeader .agk-cart-sale{font-size:12px;color:#e0453a} #agkHeader .agk-cart-del{color:#b0bac3;font-size:14px;padding:6px} #agkHeader .agk-cart-del:hover{color:#e0453a} #agkHeader .agk-cart-foot{padding-top:12px} #agkHeader .agk-cart-totalrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; color:var(--navy);font-size:14px} #agkHeader .agk-cart-totalrow strong{color:var(--teal);font-size:15px} #agkHeader .agk-cart-actions{display:flex;gap:8px} #agkHeader .agk-cbtn{flex:1;text-align:center;padding:10px 12px;border-radius:50px;font-weight:700;font-size:13.5px; background:var(--pink);color:var(--navy)} #agkHeader .agk-cbtn:hover{background:var(--navy);color:#fff} #agkHeader .agk-cbtn-primary{background:var(--orange);color:var(--navy)} #agkHeader .agk-cbtn-primary:hover{background:var(--teal);color:#fff} /* row 3 */ #agkHeader .agk-nav{background:#fff;border-top:1px solid #eef2f5;position:relative} #agkHeader .agk-menu{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap} #agkHeader .agk-menu>li{display:block;position:static} #agkHeader .agk-menu>li>a{display:block;padding:14px 18px;color:var(--navy);font-weight:700;font-size:14.5px; position:relative;cursor:pointer} #agkHeader .agk-menu>li>a::after{content:"";position:absolute;right:18px;left:18px;bottom:6px;height:3px; border-radius:3px;background:var(--orange);transform:scaleX(0);transition:transform .25s} #agkHeader .agk-menu>li:hover>a{color:var(--teal)} #agkHeader .agk-menu>li:hover>a::after{transform:scaleX(1)} #agkHeader .agk-menu>li>a i{font-size:9px;margin-right:6px} #agkHeader .agk-mega{position:absolute;right:0;left:0;top:100%;background:#fff;border-top:3px solid var(--aqua); box-shadow:0 18px 40px rgba(5,62,104,.18);border-radius:0 0 18px 18px;padding:24px 28px;display:none; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;max-height:70vh;overflow:auto;z-index:50} #agkHeader .agk-menu>li:hover>.agk-mega{display:grid;animation:agkFade .2s ease} #agkHeader .agk-mega-title{display:block;font-weight:800;color:var(--teal);padding-bottom:8px;margin-bottom:8px; border-bottom:2px solid var(--pink)} #agkHeader .agk-mega a{display:block;padding:5px 0;color:#37495a;font-size:13.5px} #agkHeader .agk-mega a:hover{color:var(--teal);padding-right:6px} #agkHeader .agk-mega a.agk-collapsible{display:flex;justify-content:space-between;align-items:center;cursor:pointer; font-weight:600;color:var(--navy)} #agkHeader .agk-mega a.agk-collapsible::after{content:"+";position:static;color:var(--orange);font-weight:800} #agkHeader .agk-mega a.agk-collapsible.open::after{content:"\2212"} #agkHeader .agk-mega .agk-sub{display:none;padding-right:12px;border-right:2px solid var(--aqua);margin:2px 0 6px} #agkHeader .agk-mega .agk-sub.open{display:block} /* mobile bar */ #agkHeader .agk-mobile{display:none;position:relative} #agkHeader .agk-mobile .agk-wrap{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px} #agkHeader .agk-mobile .agk-logo{font-size:20px} #agkHeader .agk-mobile .agk-actions{gap:8px} #agkHeader .agk-mobile .mobile-aside-button{width:44px;height:44px;border-radius:50%;background:var(--pink);color:var(--navy); font-size:20px;align-items:center;justify-content:center;display:inline-flex} #agkHeader .agk-mobile .mobile-aside-button:hover{background:var(--navy);color:#fff} #agkHeader .agk-mobile .agk-dd{position:static} #agkHeader .agk-mobile .agk-dd-panel{top:100%;left:10px;right:10px;width:auto;max-width:none;border-radius:0 0 16px 16px} #agkHeader .agk-msearch{display:none;padding:0 20px 12px} #agkHeader .agk-mobile.search-open .agk-msearch{display:block;animation:agkFade .2s ease} #agkHeader .agk-msearch form{display:flex;align-items:center;background:var(--pink);border:2px solid transparent; border-radius:50px;padding:0 6px;margin:0} #agkHeader .agk-msearch form:focus-within{border-color:var(--aqua);background:#fff} #agkHeader .agk-msearch input{flex:1;min-width:0;border:0;background:transparent;outline:0;box-shadow:none;height:42px; padding:0 14px;margin:0;font-size:14px;text-align:right;color:var(--navy)} #agkHeader .agk-msearch button{border:0;background:var(--orange);color:var(--navy);width:36px;height:36px;border-radius:50%; padding:0;cursor:pointer} /* ============================ 2) MOBILE DRAWER ============================ */ #agkHeader .agk-overlay{position:fixed;inset:0;background:rgba(5,62,104,.55);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:1000} #agkHeader .agk-overlay.open{opacity:1;visibility:visible} #agkHeader .agk-drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(86vw,360px);z-index:1001; display:flex;flex-direction:column;color:#fff; background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%); transform:translateX(100%);transition:transform .35s cubic-bezier(.22,.8,.3,1); box-shadow:-12px 0 40px rgba(0,0,0,.25);border-radius:24px 0 0 24px} #agkHeader .agk-drawer.open{transform:none} #agkHeader .agk-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.12)} #agkHeader .agk-drawer-head .agk-logo{color:#fff;font-size:22px} #agkHeader .agk-drawer-close{width:40px;height:40px;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.12);color:#fff;font-size:15px;transition:.2s} #agkHeader .agk-drawer-close:hover{background:var(--orange);color:var(--navy);transform:rotate(90deg)} #agkHeader .agk-drawer-body{flex:1;overflow-y:auto;padding:10px 14px;-webkit-overflow-scrolling:touch} #agkHeader .agk-drawer-body::-webkit-scrollbar{width:4px} #agkHeader .agk-drawer-body::-webkit-scrollbar-thumb{background:var(--aqua);border-radius:4px} #agkHeader .agk-dmenu>li{opacity:0;transform:translateX(18px)} #agkHeader .agk-drawer.open .agk-dmenu>li{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease} #agkHeader .agk-drawer.open .agk-dmenu>li:nth-child(1){transition-delay:.10s} #agkHeader .agk-drawer.open .agk-dmenu>li:nth-child(2){transition-delay:.16s} #agkHeader .agk-drawer.open .agk-dmenu>li:nth-child(3){transition-delay:.22s} #agkHeader .agk-drawer.open .agk-dmenu>li:nth-child(4){transition-delay:.28s} #agkHeader .agk-dlink,#agkHeader .agk-acc{display:flex;align-items:center;justify-content:space-between;width:100%; padding:13px 14px;margin:2px 0;border:0;border-radius:12px;background:none;color:#fff; font-size:15px;font-weight:700;text-align:right;cursor:pointer} #agkHeader .agk-dlink:hover,#agkHeader .agk-acc:hover{background:rgba(255,255,255,.10);color:#fff} #agkHeader .agk-acc i{font-size:10px;color:var(--orange);transition:transform .25s} #agkHeader .agk-has-sub.open>.agk-acc{background:rgba(255,255,255,.12);color:var(--orange)} #agkHeader .agk-has-sub.open>.agk-acc i{transform:rotate(180deg)} #agkHeader .agk-sub-m{display:none;margin:2px 14px 6px 0;padding-right:10px;border-right:2px solid var(--aqua)} #agkHeader .agk-has-sub.open>.agk-sub-m{display:block;animation:agkFade .25s ease} #agkHeader .agk-sub-m .agk-dlink,#agkHeader .agk-sub-m .agk-acc{font-size:13.5px;font-weight:600; padding:10px 12px;color:rgba(255,255,255,.88)} #agkHeader .agk-sub-m .agk-dlink:hover{color:var(--orange)} #agkHeader .agk-drawer-foot{padding:16px 20px 22px;border-top:1px solid rgba(255,255,255,.12); display:flex;flex-direction:column;gap:10px} #agkHeader .agk-drawer-foot .agk-bale{justify-content:center;padding:10px 14px;font-size:13px} #agkHeader .agk-drawer-foot .agk-cbtn{flex:none} #agkHeader .agk-drawer-auth{display:flex;gap:8px} #agkHeader .agk-drawer-auth .agk-cbtn{flex:1} /* bale button inside drawer (outside topbar scope) */ #agkHeader .agk-drawer-foot a.agk-bale{display:inline-flex;align-items:center;gap:8px;background:var(--orange); color:var(--navy);font-weight:700;border-radius:50px} #agkHeader .agk-drawer-foot a.agk-bale:hover{background:#fff;color:var(--navy)} html.agk-lock{overflow:hidden} /* ================================ 3) FOOTER ================================ */ #agkFooter{--navy:#053E68;--teal:#015C74;--aqua:#54B0B0;--orange:#FDB039;--pink:#FDEFEF; direction:rtl;text-align:right;color:rgba(255,255,255,.85);font-family:inherit;line-height:1.8; background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%);position:relative;margin-top:60px; border-radius:32px 32px 0 0} #agkFooter *,#agkFooter *::before,#agkFooter *::after{box-sizing:border-box} #agkFooter a{text-decoration:none;color:inherit;background:none;transition:color .2s,transform .2s,padding .2s} #agkFooter p,#agkFooter h6,#agkFooter ul{margin:0;padding:0} #agkFooter ul{list-style:none} #agkFooter .agk-f-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px} #agkFooter .agk-f-social{display:flex;justify-content:center;gap:14px;padding:26px 0; border-bottom:1px solid rgba(255,255,255,.12)} #agkFooter .agk-f-social a{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;color:#fff;font-size:20px;box-shadow:0 6px 16px rgba(0,0,0,.25)} #agkFooter .agk-f-social a:hover{transform:translateY(-5px) scale(1.08);color:#fff} #agkFooter .agk-f-tg{background:#55acee} #agkFooter .agk-f-ap{background:#fff;border:2px solid #E91E63} #agkFooter .agk-f-ig{background:linear-gradient(45deg,#405DE6,#5851DB,#833AB4,#C13584,#E1306C,#FD1D1D)} #agkFooter .agk-f-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr auto;gap:40px;padding:44px 0 34px} #agkFooter .agk-f-title{color:#fff;font-size:16px;font-weight:800;margin-bottom:18px;padding-bottom:10px;position:relative} #agkFooter .agk-f-title::after{content:"";position:absolute;right:0;bottom:0;width:38px;height:3px; border-radius:3px;background:var(--orange)} #agkFooter .agk-f-title i{color:var(--orange);margin-left:8px} #agkFooter .agk-f-text{font-size:14px;margin-bottom:6px} #agkFooter .agk-f-text strong{color:#fff} #agkFooter .agk-f-links li{margin-bottom:8px} #agkFooter .agk-f-links a{font-size:14px;display:inline-block} #agkFooter .agk-f-links a::before{content:"\2039";color:var(--orange);margin-left:8px;font-weight:800} #agkFooter .agk-f-links a:hover{color:var(--orange);padding-right:6px} #agkFooter .agk-f-contact li{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:14px} #agkFooter .agk-f-contact i{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;background:rgba(255,255,255,.10);color:var(--orange);font-size:14px} #agkFooter .agk-f-contact a:hover{color:var(--orange)} #agkFooter .agk-f-ltr{direction:ltr;unicode-bidi:embed} #agkFooter .agk-f-enamad{display:inline-block;background:var(--pink);border-radius:16px;padding:12px; box-shadow:0 6px 18px rgba(0,0,0,.2)} #agkFooter .agk-f-enamad img{display:block;max-width:100px;height:auto} #agkFooter .agk-f-copy{background:rgba(0,0,0,.18);text-align:center;padding:16px 20px;font-size:13.5px;color:#fff} #agkFooter .agk-f-copy a{color:var(--orange);font-weight:800} #agkFooter .agk-f-copy a:hover{color:#fff} /* ===================== 4) PROFILE SHELL + SIDEBAR NAV ===================== */ #agkProfile{--navy:#053E68;--teal:#015C74;--aqua:#54B0B0;--orange:#FDB039;--pink:#FDEFEF; direction:rtl;text-align:right;font-family:inherit;padding:30px 0 60px} #agkProfile *,#agkProfile *::before,#agkProfile *::after{box-sizing:border-box} #agkProfile .agk-p-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px; display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start} #agkProfile .agk-p-side{background:#fff;border-radius:24px;padding:18px; box-shadow:0 8px 30px rgba(5,62,104,.10);border-top:4px solid var(--aqua)} #agkProfile .agk-p-main{display:flex;flex-direction:column;gap:24px} #agkProfile .agk-p-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 8px 30px rgba(5,62,104,.10)} #agkProfile .agk-p-head{background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%); color:#fff;padding:26px 32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} #agkProfile .agk-p-icon,#agkProfile .agk-p-avatar{width:56px;height:56px;border-radius:50%;background:var(--orange); color:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 56px} #agkProfile .agk-p-avatar{font-weight:800} #agkProfile .agk-p-title{flex:1;min-width:150px} #agkProfile .agk-p-head h3{margin:0;font-size:20px;font-weight:800;color:#fff} #agkProfile .agk-p-head small{display:block;color:rgba(255,255,255,.75);font-size:13px;margin-top:2px} #agkProfile .agk-p-body{padding:28px 32px} /* sidebar nav */ #agkProfile .agk-snav{display:flex;flex-direction:column;gap:6px} #agkProfile .agk-snav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px; background:none;color:var(--navy);font-size:14.5px;font-weight:700;text-decoration:none; border:0;box-shadow:none;transition:background .2s,color .2s,transform .2s} #agkProfile .agk-snav a i{width:34px;height:34px;flex:0 0 34px;border-radius:50%;margin:0; display:inline-flex;align-items:center;justify-content:center;font-size:14px; background:var(--pink);color:var(--teal);transition:background .2s,color .2s} #agkProfile .agk-snav a:hover{background:var(--pink);color:var(--teal);transform:translateX(-4px)} #agkProfile .agk-snav a.active{background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%); color:#fff;box-shadow:0 8px 20px rgba(5,62,104,.25)} #agkProfile .agk-snav a.active i{background:var(--orange);color:var(--navy)} #agkProfile .agk-snav-sep{height:1px;background:#eef2f5;margin:8px 6px} #agkProfile .agk-snav a.is-logout{color:#e0453a} #agkProfile .agk-snav a.is-logout i{background:#fdecea;color:#e0453a} #agkProfile .agk-snav a.is-logout:hover{background:#e0453a;color:#fff} #agkProfile .agk-snav a.is-logout:hover i{background:rgba(255,255,255,.2);color:#fff} /* ========================== 5) SHARED COMPONENTS ========================== */ @keyframes agkPFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* buttons */ #agkProfile .agk-btn-p{border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:13px; padding:9px 20px;border-radius:50px;background:var(--orange);color:var(--navy);transition:.2s; display:inline-flex;align-items:center;gap:6px;text-decoration:none} #agkProfile .agk-btn-p:hover{background:var(--navy);color:#fff;transform:translateY(-2px)} #agkProfile .agk-btn-o{border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px;padding:11px 26px; border-radius:50px;background:#fff;color:var(--navy);transition:.2s;display:inline-flex;align-items:center;gap:8px} #agkProfile .agk-btn-o:hover{background:var(--navy);color:#fff} #agkProfile .agk-btn-w{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:50px; background:rgba(255,255,255,.14);color:#fff;font-weight:800;font-size:13.5px;text-decoration:none; border:1px solid rgba(255,255,255,.3);transition:.2s} #agkProfile .agk-btn-w:hover{background:var(--orange);color:var(--navy);border-color:var(--orange)} #agkProfile .agk-p-btn{border:0;cursor:pointer;background:var(--orange);color:var(--navy);font-family:inherit; font-weight:800;font-size:15px;padding:14px 40px;border-radius:50px; box-shadow:0 8px 20px rgba(253,176,57,.35);transition:.2s} #agkProfile .agk-p-btn:hover:not(:disabled){background:var(--navy);color:#fff;transform:translateY(-2px); box-shadow:0 10px 24px rgba(5,62,104,.3)} #agkProfile .agk-p-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} #agkProfile .agk-p-actions{margin-top:26px;padding-top:22px;border-top:1px solid #eef2f5;display:flex;justify-content:flex-start} /* forms */ #agkProfile .agk-p-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} #agkProfile .agk-p-field{display:flex;flex-direction:column;gap:8px} #agkProfile .agk-p-field.full{grid-column:1/-1} #agkProfile label{font-size:14px;font-weight:700;color:var(--navy);margin:0} #agkProfile label.required::after{content:" *";color:#e0453a} #agkProfile .agk-p-input{width:100%;height:50px;padding:0 18px;border:2px solid transparent;border-radius:14px; background:var(--pink);color:var(--navy);font-size:14.5px;font-family:inherit;outline:0;box-shadow:none; transition:border-color .2s,background .2s,box-shadow .2s} #agkProfile textarea.agk-p-input{height:auto;min-height:130px;padding:14px 18px;resize:vertical;line-height:1.9} #agkProfile .agk-p-input::placeholder{color:#9aa6b2} #agkProfile .agk-p-input:focus{background:#fff;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(84,176,176,.18)} #agkProfile .agk-p-input[disabled]{background:#eef2f5;color:#6b7b8a;cursor:not-allowed} #agkProfile .agk-p-input.ltr{direction:ltr;text-align:right} #agkProfile select.agk-p-input{appearance:none;-webkit-appearance:none;cursor:pointer;padding-left:38px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:left 14px center} #agkProfile .agk-p-error{margin:0;font-size:12.5px;color:#e0453a;font-weight:700} #agkProfile .agk-p-hint{margin:0;font-size:12px;color:#8a97a3} /* empty state */ #agkProfile .agk-empty{text-align:center;padding:50px 20px;border-radius:18px;background:var(--pink);border:2px dashed var(--aqua)} #agkProfile .agk-empty i{font-size:42px;color:var(--aqua);display:block;margin-bottom:14px} #agkProfile .agk-empty p{margin:0;color:var(--navy);font-weight:700;font-size:15px} /* chips + badges + codes */ #agkProfile .agk-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:50px; background:#fff;color:var(--navy);font-size:13px;font-weight:700;text-decoration:none} #agkProfile .agk-chip i{color:var(--orange)} #agkProfile a.agk-chip:hover{background:var(--navy);color:#fff} #agkProfile .agk-chip.date{font-weight:600;color:#6b7b8a} #agkProfile .agk-badge-s{display:inline-block;padding:4px 14px;border-radius:50px;background:#fff; color:var(--teal);font-size:12.5px;font-weight:800;border:1px solid var(--aqua)} #agkProfile .agk-o-code,#agkProfile .agk-r-code{direction:ltr;unicode-bidi:embed;font-weight:800} #agkProfile .agk-code{display:inline-block;direction:ltr;unicode-bidi:embed;padding:4px 14px;border-radius:50px; background:#fff;color:var(--teal);font-weight:800;border:1px dashed var(--aqua)} /* stats */ #agkProfile .agk-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px} #agkProfile .agk-stat{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px; background:var(--pink);border-right:4px solid var(--orange)} #agkProfile .agk-stat i{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;background:#fff;color:var(--teal);font-size:18px} #agkProfile .agk-stat span{display:block;color:#6b7b8a;font-size:13px;font-weight:700} #agkProfile .agk-stat strong{display:block;color:var(--navy);font-size:20px;font-weight:800} /* tables (orders, affiliate, refund list) */ #agkProfile .agk-o-table,#agkProfile .agk-r-table{width:100%;border-collapse:separate;border-spacing:0 10px} #agkProfile .agk-o-table th,#agkProfile .agk-r-table th{padding:6px 14px;color:#6b7b8a;font-size:13px;font-weight:700; text-align:right;border:0;background:none} #agkProfile .agk-o-table td,#agkProfile .agk-r-table td{padding:16px 14px;background:var(--pink);color:var(--navy); font-size:14px;font-weight:600;border:0;vertical-align:middle} #agkProfile .agk-o-table td:first-child,#agkProfile .agk-r-table td:first-child{border-radius:0 14px 14px 0} #agkProfile .agk-o-table td:last-child,#agkProfile .agk-r-table td:last-child{border-radius:14px 0 0 14px} #agkProfile .agk-o-table tbody tr{transition:transform .2s,box-shadow .2s} #agkProfile .agk-o-table tbody tr:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(5,62,104,.10)} #agkProfile .agk-o-price small{color:#6b7b8a;font-weight:600} /* pagination */ #agkProfile .agk-pager{display:flex;justify-content:center;margin-top:24px} #agkProfile .agk-pager nav{max-width:100%;overflow-x:auto} #agkProfile .agk-pager .pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none} #agkProfile .agk-pager .page-item{margin:0;list-style:none} #agkProfile .agk-pager .page-link,#agkProfile .agk-pager .pagination li>a,#agkProfile .agk-pager .pagination li>span{ display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px; border-radius:12px;border:0;background:var(--pink);color:var(--navy);font-weight:700;font-size:14px; text-decoration:none;transition:.2s} #agkProfile .agk-pager .page-link:hover,#agkProfile .agk-pager .pagination li>a:hover{background:var(--navy);color:#fff} #agkProfile .agk-pager .page-item.active .page-link,#agkProfile .agk-pager .pagination li.active>span{background:var(--orange);color:var(--navy)} #agkProfile .agk-pager .page-item.disabled .page-link,#agkProfile .agk-pager .pagination li.disabled>span{opacity:.45;cursor:not-allowed} /* modal (orders, affiliate) */ #agkProfile .agk-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center; padding:20px;background:rgba(5,62,104,.55);backdrop-filter:blur(3px);direction:rtl} #agkProfile .agk-modal.open{display:flex;animation:agkPFade .25s ease} #agkProfile .agk-modal-box{width:100%;max-width:760px;max-height:88vh;display:flex;flex-direction:column; background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)} #agkProfile .agk-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px; background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%);color:#fff} #agkProfile .agk-modal-head h4{margin:0;font-size:16px;font-weight:800;color:#fff} #agkProfile .agk-modal-close{width:38px;height:38px;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.14);color:#fff;font-size:14px;transition:.2s} #agkProfile .agk-modal-close:hover{background:var(--orange);color:var(--navy);transform:rotate(90deg)} #agkProfile .agk-modal-body{padding:20px 24px;overflow:auto} #agkProfile .agk-i-row{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;background:var(--pink);margin-bottom:10px} #agkProfile .agk-i-img{flex:0 0 64px;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#fff} #agkProfile .agk-i-img img{width:100%;height:100%;object-fit:cover;display:block} #agkProfile .agk-i-main{flex:1;min-width:0} #agkProfile .agk-i-name{display:block;color:var(--navy);font-weight:800;font-size:14px;text-decoration:none;margin-bottom:4px} #agkProfile .agk-i-name:hover{color:var(--teal)} #agkProfile .agk-i-meta{font-size:12.5px;color:#6b7b8a} #agkProfile .agk-i-total{font-weight:800;color:var(--teal);font-size:14px;white-space:nowrap} /* =========================== 6) PAGE-SPECIFIC =========================== */ /* --- comments --- */ #agkProfile .agk-c-list{display:flex;flex-direction:column;gap:18px} #agkProfile .agk-c-item{display:flex;gap:16px;padding:20px;border-radius:18px;background:var(--pink); border-right:4px solid var(--orange);transition:transform .2s,box-shadow .2s} #agkProfile .agk-c-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(5,62,104,.12)} #agkProfile .agk-c-avatar{flex:0 0 56px;width:56px;height:56px;border-radius:50%;overflow:hidden; border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.12);background:#fff} #agkProfile .agk-c-avatar img{width:100%;height:100%;object-fit:cover;display:block} #agkProfile .agk-c-main{flex:1;min-width:0} #agkProfile .agk-c-text{margin:0 0 14px;color:#2b3b4a;font-size:14.5px;line-height:1.9;word-break:break-word} #agkProfile .agk-c-meta{display:flex;flex-wrap:wrap;gap:10px} /* --- addresses --- */ #agkProfile .agk-a-list{display:flex;flex-direction:column;gap:20px} #agkProfile .agk-a-item{border-radius:18px;background:var(--pink);border-right:4px solid var(--orange);padding:22px} #agkProfile .agk-a-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px} #agkProfile .agk-a-name{font-weight:800;color:var(--navy);font-size:15.5px} #agkProfile .agk-a-top .agk-chip{color:var(--teal);font-size:12.5px;padding:5px 14px} #agkProfile .agk-a-lines{display:flex;flex-direction:column;gap:8px;color:#2b3b4a;font-size:14px;line-height:1.9} #agkProfile .agk-a-lines div{display:flex;gap:10px;align-items:flex-start} #agkProfile .agk-a-lines i{color:var(--teal);margin-top:6px;flex:0 0 auto} #agkProfile .agk-a-lines b{color:var(--navy)} #agkProfile .agk-a-actions{margin-top:16px} #agkProfile .agk-a-panel{display:none;margin-top:18px;padding-top:18px;border-top:1px dashed var(--aqua)} #agkProfile .agk-a-panel.open{display:block;animation:agkPFade .25s ease} #agkProfile .agk-a-item .agk-p-input{background:#fff} #agkProfile .agk-a-submit{margin-top:20px} #agkProfile .agk-a-submit .agk-btn-p{font-size:14px;padding:11px 26px} #agkProfile .agk-a-empty{text-align:center;color:#6b7b8a;font-size:14px;margin:0 0 6px} #agkProfile .agk-create{margin-top:26px;padding:22px;border-radius:18px;border:2px dashed var(--aqua)} #agkProfile .agk-create>.agk-btn-p{font-size:14px;padding:11px 26px} #agkProfile .agk-create .agk-p-input{background:var(--pink)} #agkProfile .agk-create .agk-p-input:focus{background:#fff} /* --- wishlist --- */ #agkProfile .agk-w-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px} #agkProfile .agk-w-item{position:relative;background:var(--pink);border-radius:20px;overflow:hidden; display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;border-bottom:4px solid var(--orange)} #agkProfile .agk-w-item:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(5,62,104,.18)} #agkProfile .agk-w-img{display:block;aspect-ratio:1/1;background:#fff;overflow:hidden} #agkProfile .agk-w-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} #agkProfile .agk-w-item:hover .agk-w-img img{transform:scale(1.06)} #agkProfile .agk-w-info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;flex:1} #agkProfile .agk-w-name{color:var(--navy);font-weight:800;font-size:14px;line-height:1.7;text-decoration:none; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #agkProfile .agk-w-name:hover{color:var(--teal)} #agkProfile .agk-w-view{margin-top:auto;text-align:center;padding:9px 14px;border-radius:50px;background:#fff; color:var(--navy);font-weight:800;font-size:13px;text-decoration:none;transition:.2s} #agkProfile .agk-w-view:hover{background:var(--navy);color:#fff} #agkProfile .agk-w-del{position:absolute;top:10px;left:10px;width:38px;height:38px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#e0453a; font-size:15px;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:.2s} #agkProfile .agk-w-del:hover{background:#e0453a;color:#fff;transform:scale(1.1)} /* --- refund --- */ #agkProfile .agk-sheba{display:flex;align-items:center;direction:ltr;background:var(--pink);border-radius:14px; border:2px solid transparent;transition:.2s} #agkProfile .agk-sheba:focus-within{background:#fff;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(84,176,176,.18)} #agkProfile .agk-sheba span{padding:0 16px;font-weight:800;color:var(--teal);height:46px;display:inline-flex; align-items:center;order:-1;border-left:2px solid #fff} #agkProfile .agk-sheba input{flex:1;min-width:0;height:46px;border:0;background:transparent;outline:0; padding:0 14px;color:var(--navy);font-size:14.5px;font-family:inherit;direction:ltr;text-align:left} #agkProfile .agk-oi{padding:18px;border-radius:18px;background:var(--pink);border-right:4px solid var(--orange)} #agkProfile .agk-modes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px} #agkProfile .agk-choice{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:50px; background:#fff;color:var(--navy);font-size:13.5px;font-weight:700;cursor:pointer;margin:0;transition:.2s} #agkProfile .agk-choice:hover{background:var(--navy);color:#fff} #agkProfile .agk-choice input,#agkProfile .agk-item input{width:18px!important;height:18px!important;margin:0; accent-color:var(--teal);cursor:pointer} #agkProfile .agk-item{display:flex;align-items:center;gap:12px;padding:11px 14px;margin:0 0 8px;border-radius:12px; background:#fff;color:var(--navy);font-size:14px;font-weight:600;cursor:pointer} #agkProfile .agk-item:last-child{margin-bottom:0} #agkProfile .agk-item input:disabled{cursor:not-allowed} #agkProfile .agk-item:has(input:disabled){opacity:.55;cursor:not-allowed} #agkProfile .agk-item:has(input:checked){outline:2px solid var(--orange)} /* ============================== 7) RESPONSIVE ============================== */ @media(max-width:991.98px){ /* header */ #agkHeader .agk-main,#agkHeader .agk-nav,#agkHeader .agk-hide-sm{display:none} #agkHeader .agk-mobile{display:block} #agkHeader .agk-topbar .agk-wrap{justify-content:center} /* footer */ #agkFooter{border-radius:24px 24px 0 0} #agkFooter .agk-f-grid{grid-template-columns:1fr 1fr;gap:30px} /* profile */ #agkProfile .agk-p-wrap{grid-template-columns:1fr} } @media(min-width:992px){ #agkHeader .agk-drawer,#agkHeader .agk-overlay{display:none} } @media(max-width:767.98px){ #agkProfile .agk-o-table thead{display:none} #agkProfile .agk-o-table,#agkProfile .agk-o-table tbody,#agkProfile .agk-o-table tr, #agkProfile .agk-o-table td{display:block;width:100%} #agkProfile .agk-o-table tr{background:var(--pink);border-radius:16px;padding:8px 6px;margin-bottom:14px; border-right:4px solid var(--orange)} #agkProfile .agk-o-table td{background:none;border-radius:0!important;display:flex;justify-content:space-between; align-items:center;padding:8px 12px} #agkProfile .agk-o-table td::before{content:attr(data-label);color:#6b7b8a;font-size:12.5px;font-weight:700} } @media(max-width:575.98px){ #agkFooter .agk-f-grid{grid-template-columns:1fr;gap:26px;padding-top:30px} #agkProfile .agk-p-body{padding:20px 16px} #agkProfile .agk-p-head{padding:20px 18px} #agkProfile .agk-p-grid{grid-template-columns:1fr} #agkProfile .agk-p-btn{width:100%} #agkProfile .agk-stats{grid-template-columns:1fr} #agkProfile .agk-i-row{flex-wrap:wrap} #agkProfile .agk-c-item{flex-direction:column;align-items:flex-start;padding:16px} #agkProfile .agk-a-item{padding:16px} #agkProfile .agk-a-actions .agk-btn-o,#agkProfile .agk-a-submit .agk-btn-p,#agkProfile .agk-create>.agk-btn-p{ width:100%;justify-content:center} #agkProfile .agk-w-grid{grid-template-columns:repeat(2,1fr);gap:12px} } /* ============================== 8) CART PAGE ============================== */ #agkProfile .agk-cart-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px;display:grid; grid-template-columns:1fr 380px;gap:28px;align-items:start} #agkProfile .agk-cart-wrap.single{grid-template-columns:1fr;max-width:720px} #agkProfile .agk-cart-side{display:flex;flex-direction:column;gap:24px} #agkProfile .agk-sum{position:sticky;top:150px} /* سبد خرید: کارت خلاصه چسبان نباشد تا روی کارت کد تخفیف نیفتد */ #agkProfile .agk-cart-side .agk-sum{position:static} #agkProfile .agk-bc{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:#6b7b8a} #agkProfile .agk-bc a{color:var(--teal);text-decoration:none} #agkProfile .agk-bc a:hover{color:var(--orange)} #agkProfile .agk-bc .sep{color:var(--aqua)} #agkProfile .agk-bc .cur{color:var(--navy)} #agkProfile a.agk-p-btn{display:inline-block;text-align:center;text-decoration:none} #agkProfile .agk-btn-s,#agkProfile .agk-btn-d{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer; font-family:inherit;font-weight:800;font-size:13.5px;padding:11px 22px;border-radius:50px;text-decoration:none;transition:.2s} #agkProfile .agk-btn-s{background:var(--pink);color:var(--navy)} #agkProfile .agk-btn-s:hover{background:var(--navy);color:#fff} #agkProfile .agk-btn-d{background:#fdecea;color:#e0453a} #agkProfile .agk-btn-d:hover{background:#e0453a;color:#fff} #agkProfile .agk-chip.sale{color:#e0453a;font-size:12px;padding:3px 10px} #agkProfile .agk-cart-actions-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px; margin-top:22px;padding-top:20px;border-top:1px solid #eef2f5} #agkProfile .agk-cart-actions-row .grp{display:flex;flex-wrap:wrap;gap:10px} /* item row */ #agkProfile .agk-ci{display:grid;grid-template-columns:96px 1fr auto auto 40px; grid-template-areas:"img main qty sub del";gap:16px;align-items:center;padding:16px;background:var(--pink); border-radius:18px;margin-bottom:14px;border-right:4px solid var(--orange)} #agkProfile .agk-ci-img{grid-area:img;width:96px;height:96px;border-radius:14px;overflow:hidden;background:#fff;display:block} #agkProfile .agk-ci-img img{width:100%;height:100%;object-fit:cover;display:block} #agkProfile .agk-ci-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:6px} #agkProfile .agk-ci-attr{font-size:12.5px;color:var(--teal);font-weight:700} #agkProfile .agk-ci-price{font-size:13px;color:#6b7b8a;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:8px} #agkProfile .agk-ci-qty{grid-area:qty} #agkProfile .agk-ci-sub{grid-area:sub;font-weight:800;color:var(--navy);font-size:15px;white-space:nowrap;text-align:left} #agkProfile .agk-ci-sub small{display:block;color:#6b7b8a;font-weight:600;font-size:11.5px} #agkProfile .agk-ci-del{grid-area:del;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;background:#fff;color:#e0453a;text-decoration:none;transition:.2s} #agkProfile .agk-ci-del:hover{background:#e0453a;color:#fff} /* quantity stepper */ #agkProfile .agk-qty{display:inline-flex;align-items:center;background:#fff;border-radius:50px;padding:4px} #agkProfile .agk-qty button{width:34px;height:34px;border:0;border-radius:50%;background:var(--pink);color:var(--teal); font-size:18px;font-weight:800;cursor:pointer;line-height:1;transition:.2s} #agkProfile .agk-qty button:hover{background:var(--navy);color:#fff} #agkProfile .agk-qty input{width:46px;height:34px;border:0;outline:0;background:transparent;text-align:center; color:var(--navy);font-weight:800;font-size:15px;font-family:inherit;padding:0} #agkProfile .agk-qty.fixed{padding:6px 18px;font-weight:800;color:var(--navy)} /* summary */ #agkProfile .agk-sum-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0; border-bottom:1px dashed #dde6ee;font-size:14px;color:#2b3b4a;font-weight:700} #agkProfile .agk-sum-row .red{color:#e0453a} #agkProfile .agk-sum-total{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:16px 18px; border-radius:16px;background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%);color:#fff;font-weight:800} #agkProfile .agk-sum-total strong{color:var(--orange);font-size:17px} #agkProfile .agk-cta{width:100%;margin-top:16px} #agkProfile .agk-coupon{display:flex;gap:8px} #agkProfile .agk-coupon .agk-p-input{height:46px;flex:1;min-width:0} #agkProfile .agk-coupon-hint{margin:0 0 12px;font-size:13px;color:#6b7b8a;font-weight:600} @media(max-width:991.98px){ #agkProfile .agk-cart-wrap{grid-template-columns:1fr} #agkProfile .agk-sum{position:static} } @media(max-width:575.98px){ #agkProfile .agk-ci{grid-template-columns:80px 1fr 38px; grid-template-areas:"img main del" "qty qty sub";gap:12px} #agkProfile .agk-ci-img{width:80px;height:80px} #agkProfile .agk-ci-sub{text-align:left} #agkProfile .agk-cart-actions-row .grp,#agkProfile .agk-cart-actions-row .grp>*{width:100%;justify-content:center} } /* ============================ 9) CHECKOUT PAGE ============================ */ #agkProfile .agk-co-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:12px;font-weight:700;color:var(--navy);font-size:14.5px} #agkProfile .agk-co-full{grid-column:1/-1} #agkProfile .agk-co-item{display:flex;justify-content:space-between;align-items:flex-start;gap:14px; padding:14px 0;border-bottom:1px dashed #dde6ee} #agkProfile .agk-co-item:first-child{padding-top:0} #agkProfile .agk-co-name{display:flex;align-items:flex-start;gap:10px;color:var(--navy);font-weight:800;font-size:14px} #agkProfile .agk-co-qty{flex:0 0 auto;min-width:28px;height:28px;padding:0 8px;border-radius:50px;background:var(--orange); color:var(--navy);font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center} #agkProfile .agk-co-attr{display:block;margin-top:4px;font-size:12.5px;color:var(--teal);font-weight:700} #agkProfile .agk-co-price{text-align:left;font-weight:800;color:var(--navy);font-size:14px;white-space:nowrap} #agkProfile .agk-co-price .agk-chip{margin-top:6px} #agkProfile .agk-co-list{margin-bottom:6px} #agkProfile .agk-pay{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:18px 0 0;border-radius:16px; background:var(--pink);border:2px solid var(--aqua);cursor:pointer;transition:.2s} #agkProfile .agk-pay input{width:18px;height:18px;margin:0;accent-color:var(--teal);cursor:pointer} #agkProfile .agk-pay strong{display:block;color:var(--navy);font-size:14px} #agkProfile .agk-pay span{display:block;font-size:12.5px;color:#6b7b8a;font-weight:600;margin-top:2px} #agkProfile .agk-pay:has(input:checked){border-color:var(--orange);background:#fff} #agkProfile .agk-co-note{margin-top:18px} /* delivery method */ #agkProfile .agk-ship{margin:18px 0 6px;display:flex;flex-direction:column;gap:10px;transition:opacity .2s} #agkProfile .agk-ship.loading{opacity:.55;pointer-events:none} #agkProfile .agk-ship-title{display:flex;align-items:center;gap:8px;color:var(--navy);font-weight:800;font-size:14.5px;margin-bottom:2px} #agkProfile .agk-ship-title i{color:var(--orange)} #agkProfile .agk-ship-opt{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px; border-radius:16px;background:var(--pink);border:2px solid transparent;cursor:pointer;transition:.2s} #agkProfile .agk-ship-opt:hover{border-color:var(--aqua)} #agkProfile .agk-ship-opt input{position:absolute;opacity:0;width:0;height:0;margin:0} #agkProfile .agk-ship-ico{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--teal); display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:.2s} #agkProfile .agk-ship-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} #agkProfile .agk-ship-txt strong{color:var(--navy);font-size:14px;font-weight:800} #agkProfile .agk-ship-txt small{color:#6b7b8a;font-size:12px;font-weight:600} #agkProfile .agk-ship-price{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--teal);background:#fff; padding:4px 12px;border-radius:50px;white-space:nowrap} #agkProfile .agk-ship-opt:has(input:checked){background:#fff;border-color:var(--orange);box-shadow:0 6px 16px rgba(5,62,104,.08)} #agkProfile .agk-ship-opt:has(input:checked) .agk-ship-ico{background:var(--orange);color:var(--navy)} #agkProfile .agk-ship-opt:has(input:checked) .agk-ship-price{background:var(--pink);color:var(--navy)} #agkProfile .agk-ship-opt:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px} #agkProfile .agk-ship-opt.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.6)} #agkProfile .agk-ship-opt.disabled:hover{border-color:transparent} #agkProfile .agk-ship-note{margin:0;font-size:12px;font-weight:700;color:#e0453a;display:flex;align-items:center;gap:6px} @keyframes agkBlink{0%,100%{box-shadow:0 0 0 0 rgba(253,176,57,.75)}50%{box-shadow:0 0 0 12px rgba(253,176,57,0)}} #agkProfile .agk-blink{animation:agkBlink .9s ease-in-out infinite} @media(max-width:575.98px){ #agkProfile .agk-co-banner .agk-btn-s{width:100%;justify-content:center} } #agkProfile .agk-addr-show{display:none;margin-top:18px} #agkProfile .agk-addr-show.active{display:block;animation:agkPFade .25s ease} /* ============================ 10) PRODUCT PAGE ============================ */ #agkProfile .agk-pd-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:24px} #agkProfile .agk-pd{display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:start} #agkProfile .agk-pd-bottom{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start} #agkProfile .agk-pd-banner img{width:100%;height:auto;border-radius:20px;display:block;box-shadow:0 8px 30px rgba(5,62,104,.10)} /* gallery */ #agkProfile .agk-pd-gallery{position:relative;min-width:0} #agkProfile .agk-pd-main{background:var(--pink);border-radius:20px;padding:12px;overflow:hidden} #agkProfile .agk-pd-main img{width:100%;height:auto;display:block;border-radius:14px} #agkProfile #gallery{margin-top:14px} #agkProfile #gallery a{display:inline-block;margin:0 4px 8px;border-radius:12px;overflow:hidden; border:2px solid transparent;background:var(--pink);transition:border-color .2s} #agkProfile #gallery a:hover,#agkProfile #gallery a.active{border-color:var(--orange)} #agkProfile #gallery a img{display:block;width:90px;height:auto} /* info */ #agkProfile .agk-pd-info{min-width:0} #agkProfile .agk-pd-title{margin:0 0 12px;font-size:24px;font-weight:800;color:var(--navy);line-height:1.6} #agkProfile .agk-pd-rate{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px; color:#6b7b8a;font-size:13.5px;font-weight:700} #agkProfile .agk-alert{margin-bottom:16px;padding:14px 18px;border-radius:14px;background:#fdecea; border-right:4px solid #e0453a;color:#b3281d;font-weight:800;font-size:14px;line-height:1.9} #agkProfile .agk-promo{margin:0 0 16px;padding:12px 16px;border-radius:14px;background:#fff6e6; border-right:4px solid var(--orange);color:var(--navy);font-weight:800;font-size:13.5px} #agkProfile .agk-pd-new{display:flex;justify-content:center;margin-bottom:16px} #agkProfile .agk-pd-attrs{list-style:none;margin:0 0 18px;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px} #agkProfile .agk-pd-attrs li{padding:9px 14px;border-radius:12px;background:var(--pink);color:#2b3b4a; font-size:13.5px;font-weight:600} #agkProfile .agk-pd-attrs li b{color:var(--navy)} #agkProfile .agk-pd-detail{display:grid;gap:8px;margin-top:14px} #agkProfile .agk-pd-row{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px; background:var(--pink);font-size:13.5px;font-weight:700;color:var(--navy)} #agkProfile .agk-pd-row .val{color:var(--teal)} #agkProfile .agk-pd-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin:20px 0;padding:16px 20px; border-radius:16px;background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%);color:#fff} #agkProfile .agk-pd-price .new{font-size:24px;font-weight:800;color:var(--orange)} #agkProfile .agk-pd-price .old{font-size:15px;text-decoration:line-through;color:rgba(255,255,255,.6)} #agkProfile .agk-pd-from{font-weight:800;font-size:17px} #agkProfile .agk-nostock{margin-right:auto;background:#e0453a;color:#fff;padding:5px 18px;border-radius:50px; font-weight:800;font-size:13px} #agkProfile .agk-pd-more{display:flex;justify-content:flex-start;margin-bottom:16px} #agkProfile .agk-pd-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px} #agkProfile .agk-qty-wrap{display:inline-flex} #agkProfile .agk-buy-btn{flex:1;min-width:200px} #agkProfile .agk-buy-btn .agk-p-btn{width:100%} #agkProfile .agk-pd-icon{width:50px;height:50px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;background:var(--pink);color:var(--navy);font-size:18px;text-decoration:none;transition:.2s} #agkProfile .agk-pd-icon:hover{background:var(--navy);color:#fff} #agkProfile .agk-pd-icon.on{color:#e0453a} #agkProfile .agk-pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px; font-size:13.5px;font-weight:700;color:#6b7b8a} #agkProfile .agk-pd-meta .agk-chip{background:var(--pink);font-size:12.5px;padding:4px 12px} /* tabs */ #agkProfile .agk-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid #eef2f5} #agkProfile .agk-tab{border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px;padding:10px 22px; border-radius:50px;background:var(--pink);color:var(--navy);transition:.2s} #agkProfile .agk-tab:hover{background:#fbdcdc} #agkProfile .agk-tab.active{background:var(--navy);color:#fff} #agkProfile .agk-tab-pane{display:none} #agkProfile .agk-tab-pane.active{display:block;animation:agkPFade .25s ease} #agkProfile .agk-desc{color:#2b3b4a;line-height:2;font-size:14.5px;text-align:justify;overflow-wrap:anywhere} #agkProfile .agk-desc img,#agkProfile .agk-desc video,#agkProfile .agk-desc iframe{max-width:100%;height:auto;border-radius:12px} #agkProfile .agk-desc table{width:100%;border-collapse:collapse;display:block;overflow-x:auto} #agkProfile .agk-desc td,#agkProfile .agk-desc th{border:1px solid #e3eaf0;padding:8px 12px} #agkProfile .agk-cf-title{display:block;margin:26px 0 8px;font-weight:800;color:var(--navy);font-size:16px} #agkProfile .agk-cf-form{display:flex;flex-direction:column;gap:14px;margin-top:12px} @media(max-width:991.98px){ #agkProfile .agk-pd,#agkProfile .agk-pd-bottom{grid-template-columns:1fr} } @media(max-width:575.98px){ #agkProfile .agk-pd-title{font-size:20px} #agkProfile .agk-pd-price .new{font-size:21px} #agkProfile .agk-tab{padding:9px 16px;font-size:13px} #agkProfile .agk-pd-buy{gap:10px} } /* ===== Product page: compact ===== */ #agkProfile .agk-pd-wrap{max-width:1180px;gap:18px} #agkProfile .agk-pd{grid-template-columns:4fr 7fr;gap:24px} #agkProfile .agk-pd-bottom{gap:18px} #agkProfile .agk-pd-wrap .agk-p-body{padding:20px 22px} /* gallery */ #agkProfile .agk-pd-main{padding:8px;border-radius:16px} #agkProfile .agk-pd-main img{border-radius:12px} #agkProfile #gallery a{margin:0 3px 6px;border-radius:10px} #agkProfile #gallery a img{width:64px} /* info */ #agkProfile .agk-pd-title{font-size:19px;margin-bottom:8px} #agkProfile .agk-pd-rate{font-size:12.5px;gap:8px;margin-bottom:12px} #agkProfile .agk-alert,#agkProfile .agk-promo{padding:10px 14px;font-size:12.5px;margin-bottom:12px;border-radius:12px} #agkProfile .agk-pd-attrs{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-bottom:14px} #agkProfile .agk-pd-attrs li{padding:7px 12px;font-size:12.5px;border-radius:10px} #agkProfile .agk-pd-detail{gap:6px;margin-top:10px} #agkProfile .agk-pd-row{padding:8px 12px;font-size:12.5px;border-radius:10px} #agkProfile .agk-pd-wrap label{font-size:13px} #agkProfile .agk-pd-wrap .agk-p-input{height:42px;font-size:13.5px;border-radius:12px;padding:0 14px} #agkProfile .agk-pd-wrap textarea.agk-p-input{height:auto;min-height:100px;padding:10px 14px} #agkProfile .agk-pd-price{margin:14px 0;padding:12px 16px;border-radius:14px;gap:10px} #agkProfile .agk-pd-price .new{font-size:19px} #agkProfile .agk-pd-price .old{font-size:13px} #agkProfile .agk-pd-from{font-size:15px} #agkProfile .agk-nostock{padding:4px 14px;font-size:12px} /* actions */ #agkProfile .agk-pd-more{margin-bottom:12px} #agkProfile .agk-pd-wrap .agk-btn-s{padding:8px 16px;font-size:12.5px} #agkProfile .agk-pd-buy{gap:8px} #agkProfile .agk-buy-btn{min-width:170px} #agkProfile .agk-pd-wrap .agk-p-btn{padding:11px 28px;font-size:13.5px} #agkProfile .agk-pd-icon{width:42px;height:42px;font-size:16px} #agkProfile .agk-pd-wrap .agk-qty{padding:3px} #agkProfile .agk-pd-wrap .agk-qty button{width:30px;height:30px;font-size:16px} #agkProfile .agk-pd-wrap .agk-qty input{width:38px;height:30px;font-size:13.5px} #agkProfile .agk-pd-meta{font-size:12.5px;margin-top:12px;gap:6px} #agkProfile .agk-pd-meta .agk-chip{font-size:11.5px;padding:3px 10px} /* tabs + description */ #agkProfile .agk-tabs{gap:6px;margin-bottom:16px;padding-bottom:12px} #agkProfile .agk-tab{padding:8px 18px;font-size:13px} #agkProfile .agk-desc{font-size:13.5px;line-height:1.95} /* comments */ #agkProfile .agk-pd-wrap .agk-c-item{padding:14px;gap:12px;border-radius:14px} #agkProfile .agk-pd-wrap .agk-c-avatar{flex:0 0 44px;width:44px;height:44px} #agkProfile .agk-pd-wrap .agk-c-text{font-size:13.5px;margin-bottom:10px} #agkProfile .agk-cf-title{font-size:14.5px;margin:18px 0 6px} @media(max-width:575.98px){ #agkProfile .agk-pd-wrap{padding:0 12px} #agkProfile .agk-pd-wrap .agk-p-body{padding:16px} #agkProfile .agk-pd-title{font-size:17px} #agkProfile .agk-pd-price .new{font-size:17px} } @media(max-width:991.98px){ #agkProfile .agk-pd{grid-template-columns:1fr} } /* ============================== 11) SHOP PAGE ============================== */ #agkProfile .agk-shop-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px} #agkProfile .agk-shop{display:grid;grid-template-columns:270px 1fr;gap:20px;align-items:start} #agkProfile .agk-fbtn{display:none;margin-bottom:14px} /* sidebar */ #agkProfile .agk-sidebar{background:#fff;border-radius:20px;padding:16px;box-shadow:0 8px 30px rgba(5,62,104,.10); border-top:4px solid var(--aqua);position:sticky;top:140px;max-height:calc(100vh - 160px);overflow:auto} #agkProfile .agk-sb-block{margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed #dde6ee} #agkProfile .agk-sb-block:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0} #agkProfile .agk-sb-title{margin:0 0 10px;font-size:14px;font-weight:800;color:var(--navy)} #agkProfile .agk-sb-search{display:flex;align-items:center;background:var(--pink);border:2px solid transparent; border-radius:50px;padding:0 4px 0 4px;transition:.2s} #agkProfile .agk-sb-search:focus-within{background:#fff;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(84,176,176,.18)} #agkProfile .agk-sb-search input{flex:1;min-width:0;height:40px;border:0;background:transparent;outline:0; padding:0 14px;color:var(--navy);font-size:13px;font-family:inherit;text-align:right} #agkProfile .agk-sb-search button{width:34px;height:34px;border:0;border-radius:50%;background:var(--orange); color:var(--navy);cursor:pointer;transition:.2s} #agkProfile .agk-sb-search button:hover{background:var(--navy);color:#fff} #agkProfile .agk-sb-current{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#6b7b8a} #agkProfile .agk-sb-current .agk-chip{background:var(--pink);color:var(--navy);font-size:12px;padding:3px 10px} /* category tree */ #agkProfile .agk-ct,#agkProfile .agk-ct ul{list-style:none;margin:0;padding:0} #agkProfile .agk-ct-sub{display:none;margin:2px 10px 4px 0;padding-right:8px;border-right:2px solid var(--aqua)} #agkProfile .agk-ct-item.open>.agk-ct-sub{display:block;animation:agkPFade .2s ease} #agkProfile .agk-ct-link,#agkProfile .agk-ct-toggle{display:flex;align-items:center;justify-content:space-between; width:100%;padding:7px 10px;border:0;background:none;border-radius:10px;color:var(--navy);font-size:13px; font-weight:700;text-align:right;cursor:pointer;text-decoration:none;font-family:inherit;transition:.2s} #agkProfile .agk-ct-link:hover,#agkProfile .agk-ct-toggle:hover{background:var(--pink);color:var(--teal)} #agkProfile .agk-ct-link.active{background:var(--navy);color:#fff} #agkProfile .agk-ct-toggle::after{content:"+";color:var(--orange);font-weight:800;font-size:15px} #agkProfile .agk-ct-item.open>.agk-ct-toggle::after{content:"\2212"} /* filter lists */ #agkProfile .agk-fl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;max-height:210px;overflow:auto} #agkProfile .agk-chk{display:flex;align-items:center;gap:10px;margin:0;padding:6px 8px;border-radius:10px; cursor:pointer;font-size:13px;font-weight:600;color:#2b3b4a} #agkProfile .agk-chk:hover{background:var(--pink)} #agkProfile .agk-chk input{width:16px;height:16px;margin:0;accent-color:var(--teal);cursor:pointer} #agkProfile .agk-chk:has(input:checked){background:var(--pink);color:var(--navy);font-weight:800} /* toolbar */ #agkProfile .agk-shop-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; margin-bottom:16px;padding:10px 14px;background:#fff;border-radius:16px;box-shadow:0 6px 22px rgba(5,62,104,.08)} #agkProfile .agk-shop-count{font-size:13px;font-weight:700;color:#6b7b8a} #agkProfile .agk-shop-top select.agk-p-input{width:auto;min-width:190px;height:40px;font-size:13px} /* product cards */ #agkProfile .agk-sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px} #agkProfile .agk-sc{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:18px; overflow:hidden;box-shadow:0 6px 22px rgba(5,62,104,.09);border-bottom:3px solid var(--orange); transition:transform .25s,box-shadow .25s} #agkProfile .agk-sc:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(5,62,104,.18)} #agkProfile .agk-sc-img{display:block;aspect-ratio:1/1;background:var(--pink);overflow:hidden} #agkProfile .agk-sc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} #agkProfile .agk-sc:hover .agk-sc-img img{transform:scale(1.06)} #agkProfile .agk-sc-actions{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px; opacity:0;transform:translateX(-8px);transition:.25s} #agkProfile .agk-sc:hover .agk-sc-actions{opacity:1;transform:none} #agkProfile .agk-sc-actions a,#agkProfile .agk-sc-actions button{width:34px;height:34px;border-radius:50%;border:0; background:#fff;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-size:14px; text-decoration:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:.2s} #agkProfile .agk-sc-actions a:hover,#agkProfile .agk-sc-actions button:hover{background:var(--navy);color:#fff} #agkProfile .agk-sc-actions .on{color:#e0453a} @media(hover:none){#agkProfile .agk-sc-actions{opacity:1;transform:none}} #agkProfile .agk-sc-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1} #agkProfile .agk-sc-title{margin:0;font-size:13.5px;line-height:1.8;font-weight:800;min-height:48px} #agkProfile .agk-sc-title a{color:var(--navy);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} #agkProfile .agk-sc-title a:hover{color:var(--teal)} #agkProfile .agk-sc-price{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} #agkProfile .agk-sc-price .new{font-size:15px;font-weight:800;color:var(--teal)} #agkProfile .agk-sc-price .old{font-size:12px;color:#9aa6b2;text-decoration:line-through} #agkProfile .agk-sc-price .agk-nostock{margin-right:0} /* quick view */ #agkProfile .agk-modal-box.wide{max-width:900px} #agkProfile .agk-qv{display:grid;grid-template-columns:5fr 6fr;gap:22px} #agkProfile .agk-qv-img{background:var(--pink);border-radius:16px;padding:8px} #agkProfile .agk-qv-img img{width:100%;height:auto;display:block;border-radius:12px} #agkProfile .agk-qv-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} #agkProfile .agk-qv-thumbs a{width:54px;border-radius:10px;overflow:hidden;border:2px solid transparent; background:var(--pink);cursor:pointer;display:block} #agkProfile .agk-qv-thumbs a.active{border-color:var(--orange)} #agkProfile .agk-qv-thumbs img{width:100%;display:block} #agkProfile .agk-qv-title{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--navy);line-height:1.7} #agkProfile .agk-qv-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:10px 0;padding:10px 14px; border-radius:12px;background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%);color:#fff} #agkProfile .agk-qv-price .new{font-size:17px;font-weight:800;color:var(--orange)} #agkProfile .agk-qv-price .old{font-size:12px;text-decoration:line-through;color:rgba(255,255,255,.6)} #agkProfile .agk-qv-desc{max-height:120px;overflow:auto;margin:10px 0;padding:10px 12px;border-radius:12px; background:var(--pink);font-size:13px} #agkProfile .agk-qv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px} #agkProfile .agk-qv-actions .agk-p-btn{padding:10px 22px;font-size:13px} @media(max-width:991.98px){ #agkProfile .agk-shop{grid-template-columns:1fr} #agkProfile .agk-fbtn{display:inline-flex} #agkProfile .agk-sidebar{display:none;position:static;max-height:none;margin-bottom:16px} #agkProfile .agk-sidebar.open{display:block} #agkProfile .agk-qv{grid-template-columns:1fr} } @media(max-width:575.98px){ #agkProfile .agk-shop-wrap{padding:0 12px} #agkProfile .agk-sgrid{grid-template-columns:repeat(2,1fr);gap:10px} #agkProfile .agk-sc-body{padding:10px} #agkProfile .agk-sc-title{font-size:12.5px;min-height:44px} #agkProfile .agk-sc-price .new{font-size:13.5px} #agkProfile .agk-shop-top select.agk-p-input{min-width:0;flex:1} } /* ============== 12) OVERFLOW FIX (grid min-width) ============== */ #agkProfile .agk-p-wrap>*,#agkProfile .agk-cart-wrap>*,#agkProfile .agk-pd>*, #agkProfile .agk-pd-bottom>*,#agkProfile .agk-shop>*,#agkProfile .agk-p-grid>*, #agkProfile .agk-stats>*,#agkProfile .agk-sgrid>*,#agkProfile .agk-w-grid>*{min-width:0} #agkProfile .agk-p-side{min-width:0;overflow:hidden} #agkProfile .agk-snav{max-width:100%} /* desktop */ #agkProfile .agk-p-wrap{grid-template-columns:300px minmax(0,1fr)} #agkProfile .agk-cart-wrap{grid-template-columns:minmax(0,1fr) 380px} #agkProfile .agk-cart-wrap.single{grid-template-columns:minmax(0,1fr)} #agkProfile .agk-shop{grid-template-columns:270px minmax(0,1fr)} #agkProfile .agk-pd{grid-template-columns:minmax(0,4fr) minmax(0,7fr)} #agkProfile .agk-pd-bottom{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} /* tablet + mobile */ @media(max-width:991.98px){ #agkProfile .agk-p-wrap,#agkProfile .agk-cart-wrap,#agkProfile .agk-shop, #agkProfile .agk-pd,#agkProfile .agk-pd-bottom{grid-template-columns:minmax(0,1fr)} } @media(max-width:575.98px){ #agkProfile .agk-p-grid,#agkProfile .agk-stats{grid-template-columns:minmax(0,1fr)} #agkProfile .agk-sgrid,#agkProfile .agk-w-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ===== Profile sidebar: vertical list on mobile ===== */ @media(max-width:991.98px){ #agkProfile .agk-snav{flex-direction:column;overflow:visible;gap:6px;padding-bottom:0} #agkProfile .agk-snav a{flex:none;white-space:normal;padding:10px 12px;background:none} #agkProfile .agk-snav a:hover{background:var(--pink);transform:translateX(-4px)} #agkProfile .agk-snav-sep{display:block} #agkProfile .agk-p-side{padding:12px} } /* ===== Profile sidebar: collapsible on mobile ===== */ #agkProfile .agk-snav-toggle{display:none} @media(max-width:991.98px){ #agkProfile .agk-snav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%; padding:12px 16px;border:0;border-radius:14px;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px; color:#fff;background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%)} #agkProfile .agk-snav-toggle .agk-snav-arrow{color:var(--orange);font-size:11px;transition:transform .25s} #agkProfile .agk-snav-toggle.open .agk-snav-arrow{transform:rotate(180deg)} #agkProfile .agk-snav{display:none;margin-top:10px} #agkProfile .agk-snav.open{display:flex;animation:agkPFade .2s ease} } /* ============================ 13) CONTACT PAGE ============================ */ #agkProfile .agk-cu-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:18px} #agkProfile .agk-cu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} #agkProfile .agk-cu-box{min-width:0;padding:18px;border-radius:18px;background:var(--pink); border-right:4px solid var(--orange);display:flex;flex-direction:column;gap:10px} #agkProfile .agk-cu-ico{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--teal); display:inline-flex;align-items:center;justify-content:center;font-size:17px} #agkProfile .agk-cu-box h4{margin:0;font-size:14.5px;font-weight:800;color:var(--navy)} #agkProfile .agk-cu-box p{margin:0;font-size:13.5px;line-height:1.9;color:#2b3b4a;font-weight:600} #agkProfile .agk-cu-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px; border-radius:12px;background:#fff;font-size:13px;font-weight:700;color:var(--navy)} #agkProfile .agk-cu-row a{color:var(--teal);text-decoration:none;font-weight:800} #agkProfile .agk-cu-row a:hover{color:var(--orange)} #agkProfile .agk-cu-ltr{direction:ltr;unicode-bidi:embed} #agkProfile .agk-cu-box .agk-btn-p{align-self:flex-start} #agkProfile .agk-cu-title{display:block;margin:22px 0 12px;font-size:15px;font-weight:800;color:var(--navy)} #agkProfile .agk-cu-soc{display:flex;flex-wrap:wrap;gap:18px} #agkProfile .agk-cu-soc a{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:64px; color:var(--navy);font-weight:800;font-size:12.5px;text-decoration:none} #agkProfile .agk-cu-soc a:hover{color:var(--teal)} #agkProfile .agk-cu-b{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;overflow:hidden;color:#fff;font-size:22px;font-weight:800; box-shadow:0 6px 16px rgba(0,0,0,.2);transition:transform .2s} #agkProfile .agk-cu-soc a:hover .agk-cu-b{transform:translateY(-5px) scale(1.08)} #agkProfile .agk-cu-b img{width:100%;height:100%;object-fit:cover;display:block} #agkProfile .agk-cu-b.tg{background:#55acee} #agkProfile .agk-cu-b.ig{background:linear-gradient(45deg,#405DE6,#5851DB,#833AB4,#C13584,#E1306C,#FD1D1D)} #agkProfile .agk-cu-b.rb{background:#7b3fe4} #agkProfile .agk-cu-b.ei{background:#f28c28} #agkProfile .agk-cu-b.bl{background:#1fb58f} /* لوگوهای شبکه‌های اجتماعی — مشابه فوتر */ #agkProfile .agk-f-social{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:6px 0 4px} #agkProfile .agk-f-social a{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;background:#fff;overflow:hidden;border:1px solid rgba(5,62,104,.08); box-shadow:0 6px 16px rgba(5,62,104,.18);text-decoration:none;transition:transform .2s,box-shadow .2s} #agkProfile .agk-f-social a:hover{transform:translateY(-5px) scale(1.08);box-shadow:0 10px 24px rgba(5,62,104,.28)} #agkProfile .agk-f-social a img{width:30px;height:30px;object-fit:contain;display:block} #agkProfile .agk-f-social a svg{width:24px;height:24px;display:block} #agkProfile .agk-f-social a i{font-size:20px;color:#E1306C} #agkProfile .agk-cu-map{border-radius:18px;overflow:hidden;border:3px solid var(--pink);line-height:0} #agkProfile .agk-cu-map iframe{width:100%;height:340px;border:0;display:block} #agkProfile .agk-cu-mapbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} #agkProfile .agk-cu-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px; padding:20px 24px;border-radius:20px;color:#fff; background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%);box-shadow:0 8px 30px rgba(5,62,104,.18)} #agkProfile .agk-cu-cta h4{margin:0 0 4px;font-size:16px;font-weight:800;color:#fff} #agkProfile .agk-cu-cta p{margin:0;font-size:13px;color:rgba(255,255,255,.8)} @media(max-width:991.98px){ #agkProfile .agk-cu-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:575.98px){ #agkProfile .agk-cu-wrap{padding:0 12px} #agkProfile .agk-cu-grid{grid-template-columns:minmax(0,1fr)} #agkProfile .agk-cu-map iframe{height:260px} #agkProfile .agk-cu-cta{padding:18px} #agkProfile .agk-cu-cta .agk-btn-p,#agkProfile .agk-cu-mapbar .agk-btn-p,#agkProfile .agk-cu-mapbar .agk-btn-s{ width:100%;justify-content:center} } /* ======================== 14) SHOP PAGINATION ======================== */ #agkProfile .agk-pager{margin-top:32px} #agkProfile .agk-pager>ul{display:inline-flex !important;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px; margin:0 auto;padding:8px;list-style:none;background:#fff;border-radius:50px; box-shadow:0 6px 24px rgba(5,62,104,.10);border:1px solid #eef2f5} #agkProfile .agk-pager>ul>li{margin:0;padding:0;list-style:none;float:none;display:block;border:0;background:none} #agkProfile .agk-pager>ul>li>a{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px; padding:0 10px;margin:0;border-radius:50px;border:0;background:var(--pink);color:var(--navy); font-weight:700;font-size:14px;line-height:1;text-decoration:none;cursor:pointer;box-shadow:none; transition:background .2s,color .2s,transform .2s,box-shadow .2s} #agkProfile .agk-pager>ul>li>a::before,#agkProfile .agk-pager>ul>li>a::after{content:none} #agkProfile .agk-pager>ul>li>a[href]:hover{background:var(--navy);color:#fff;transform:translateY(-2px); box-shadow:0 6px 14px rgba(5,62,104,.22)} #agkProfile .agk-pager>ul>li>a.active{background:var(--orange);color:var(--navy);cursor:default; box-shadow:0 6px 16px rgba(253,176,57,.45);transform:scale(1.06)} #agkProfile .agk-pager>ul>li>a.prev,#agkProfile .agk-pager>ul>li>a.next{background:var(--navy);color:#fff;font-size:13px} #agkProfile .agk-pager>ul>li>a.prev[href]:hover,#agkProfile .agk-pager>ul>li>a.next[href]:hover{background:var(--aqua);color:#fff} /* RTL: قبلی سمت راست است، پس فلش‌ها برعکس شوند */ #agkProfile .agk-pager>ul>li>a.prev i,#agkProfile .agk-pager>ul>li>a.next i{display:inline-block;transform:scaleX(-1)} #agkProfile .agk-pager>ul>li[aria-disabled]>a.prev,#agkProfile .agk-pager>ul>li[aria-disabled]>a.next{ background:#eef2f5;color:#a9b4bf;cursor:not-allowed} #agkProfile .agk-pager>ul>li[aria-disabled]>a:not(.prev):not(.next){background:transparent;color:#8a97a3; min-width:24px;padding:0 2px;cursor:default;letter-spacing:2px} @media (max-width:575px){ #agkProfile .agk-pager>ul{gap:4px;padding:6px;border-radius:24px} #agkProfile .agk-pager>ul>li>a{min-width:34px;height:34px;font-size:13px;padding:0 6px} } /* ===================== 15) SHOP CARD DISCOUNT BADGE ===================== */ #agkProfile .agk-sc-img{position:relative} #agkProfile .agk-sc-off{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center; height:24px;padding:0 9px;border-radius:50px;background:#e0453a;color:#fff;font-size:12px;font-weight:800; line-height:1;box-shadow:0 4px 10px rgba(224,69,58,.35);pointer-events:none} @media (max-width:575px){#agkProfile .agk-sc-off{top:8px;right:8px;height:22px;font-size:11px;padding:0 7px}} /* ============================ 16) NEWS PAGES ============================ */ #agkProfile .agk-nw-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px;display:grid; grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:start} #agkProfile .agk-nw-wrap>*{min-width:0} #agkProfile .agk-nw-main{display:flex;flex-direction:column;gap:24px} /* sidebar */ #agkProfile .agk-nw-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:140px} #agkProfile .agk-nw-box{background:#fff;border-radius:20px;padding:16px;box-shadow:0 8px 30px rgba(5,62,104,.10); border-top:4px solid var(--aqua)} #agkProfile .agk-nw-box .agk-sb-title{display:flex;align-items:center;gap:8px} #agkProfile .agk-nw-box .agk-sb-title i{color:var(--orange)} #agkProfile .agk-nw-cat{margin-bottom:14px} #agkProfile .agk-nw-cat:last-child{margin-bottom:0} #agkProfile .agk-nw-cat-name{display:block;padding:8px 12px;border-radius:12px;margin-bottom:6px;font-size:13.5px; font-weight:800;color:#fff;background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%)} #agkProfile .agk-nw-cat ul{list-style:none;margin:0;padding:0 8px 0 0;border-right:2px solid var(--aqua)} #agkProfile .agk-nw-cat li{margin:0;list-style:none} #agkProfile .agk-nw-cat a{display:block;padding:7px 10px;border-radius:10px;color:var(--navy);font-size:13px; font-weight:700;text-decoration:none;transition:.2s} #agkProfile .agk-nw-cat a:hover{background:var(--pink);color:var(--teal)} #agkProfile .agk-nw-cat a.active{background:var(--orange);color:var(--navy)} #agkProfile .agk-nw-toggle{display:none} /* section head */ #agkProfile .agk-nw-sec{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 8px 30px rgba(5,62,104,.10)} #agkProfile .agk-nw-sec .agk-p-head{padding:20px 26px} #agkProfile .agk-nw-sec .agk-p-icon{width:48px;height:48px;flex:0 0 48px;font-size:20px} #agkProfile .agk-nw-sec .agk-p-body{padding:22px 24px} #agkProfile .agk-nw-count{margin-right:auto;display:inline-flex;align-items:center;padding:4px 14px;border-radius:50px; background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:800} /* featured (first item) */ #agkProfile .agk-nw-feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:center; padding:14px;margin-bottom:20px;border-radius:20px;background:var(--pink);text-decoration:none; border-right:4px solid var(--orange);transition:box-shadow .25s,transform .25s} #agkProfile .agk-nw-feat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(5,62,104,.14)} #agkProfile .agk-nw-feat-img{aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#fff} #agkProfile .agk-nw-feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} #agkProfile .agk-nw-feat:hover .agk-nw-feat-img img{transform:scale(1.05)} #agkProfile .agk-nw-feat h3{margin:8px 0 10px;font-size:19px;line-height:1.8;font-weight:800;color:var(--navy)} #agkProfile .agk-nw-feat p{margin:0 0 14px;font-size:13.5px;line-height:1.95;color:#2b3b4a; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} #agkProfile .agk-nw-more{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:800;font-size:13px} #agkProfile .agk-nw-feat .agk-nw-more{margin-top:12px} #agkProfile .agk-nw-feat:hover .agk-nw-more{color:var(--orange)} /* cards */ #agkProfile .agk-nw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} #agkProfile .agk-nw-card{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden; text-decoration:none;box-shadow:0 6px 22px rgba(5,62,104,.09);border-bottom:3px solid var(--orange); transition:transform .25s,box-shadow .25s} #agkProfile .agk-nw-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(5,62,104,.18)} #agkProfile .agk-nw-card-img{display:block;aspect-ratio:16/10;background:var(--pink);overflow:hidden} #agkProfile .agk-nw-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} #agkProfile .agk-nw-card:hover .agk-nw-card-img img{transform:scale(1.06)} #agkProfile .agk-nw-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1} #agkProfile .agk-nw-card h4{margin:0;font-size:14px;line-height:1.85;font-weight:800;color:var(--navy); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:52px} #agkProfile .agk-nw-card:hover h4{color:var(--teal)} #agkProfile .agk-nw-card p{margin:0;font-size:12.5px;line-height:1.9;color:#6b7b8a; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #agkProfile .agk-nw-meta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px; font-size:12px;font-weight:700;color:#8a97a3} #agkProfile .agk-nw-meta i{color:var(--aqua);margin-left:4px} #agkProfile .agk-nw-tag{display:inline-flex;align-items:center;padding:3px 12px;border-radius:50px;background:#fff; color:var(--teal);font-size:12px;font-weight:800;border:1px solid var(--aqua)} #agkProfile .agk-nw-rest{display:none;margin-top:16px} #agkProfile .agk-nw-rest.open{display:grid;animation:agkPFade .25s ease} #agkProfile .agk-nw-actions{display:flex;justify-content:center;margin-top:20px} /* article page */ #agkProfile .agk-nw-art{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 8px 30px rgba(5,62,104,.10)} #agkProfile .agk-nw-art-head{display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;align-items:center; padding:26px 30px;color:#fff;background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%)} #agkProfile .agk-nw-art-cover{aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.25);border:4px solid rgba(255,255,255,.15)} #agkProfile .agk-nw-art-cover img{width:100%;height:100%;object-fit:cover;display:block} #agkProfile .agk-nw-art-head h1{margin:0 0 14px;font-size:26px;line-height:1.7;font-weight:800;color:#fff} #agkProfile .agk-nw-art-head .agk-chip{margin:0 0 6px 6px} #agkProfile .agk-nw-art-head .agk-chip.date{color:#6b7b8a} #agkProfile .agk-nw-lead{margin:12px 0 0;font-size:14px;line-height:2;color:rgba(255,255,255,.82)} #agkProfile .agk-nw-art-body{padding:28px 32px} #agkProfile .agk-nw-media{margin-bottom:24px;border-radius:18px;overflow:hidden;background:var(--pink);line-height:0} #agkProfile .agk-nw-media img,#agkProfile .agk-nw-media video{width:100%;height:auto;display:block} #agkProfile .agk-nw-art-body .agk-desc{font-size:15px;line-height:2.1} #agkProfile .agk-nw-art-body .agk-desc p{margin:0 0 14px} #agkProfile .agk-nw-art-body .agk-desc a{color:var(--teal);font-weight:700} #agkProfile .agk-nw-art-body .agk-desc h2,#agkProfile .agk-nw-art-body .agk-desc h3, #agkProfile .agk-nw-art-body .agk-desc h4{color:var(--navy);font-weight:800;line-height:1.8;margin:22px 0 10px} #agkProfile .agk-nw-art-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; padding:18px 32px;border-top:1px solid #eef2f5} /* sidebar: latest list */ #agkProfile .agk-nw-list{display:flex;flex-direction:column;gap:8px} #agkProfile .agk-nw-li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;text-decoration:none;transition:.2s} #agkProfile .agk-nw-li:hover{background:var(--pink)} #agkProfile .agk-nw-li img{width:58px;height:58px;flex:0 0 58px;border-radius:12px;object-fit:cover;background:var(--pink)} #agkProfile .agk-nw-li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:12.5px;line-height:1.8;font-weight:800;color:var(--navy)} #agkProfile .agk-nw-li small{display:block;font-size:11.5px;color:#8a97a3;font-weight:600} @media(max-width:1199.98px){ #agkProfile .agk-nw-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:991.98px){ #agkProfile .agk-nw-wrap{grid-template-columns:minmax(0,1fr)} #agkProfile .agk-nw-side{position:static;order:2} #agkProfile .agk-nw-side.top{order:0} #agkProfile .agk-nw-toggle{display:flex;align-items:center;justify-content:space-between;width:100%; padding:12px 16px;border:0;border-radius:14px;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px; color:#fff;background:linear-gradient(165deg,var(--navy) 0%,var(--teal) 100%)} #agkProfile .agk-nw-toggle .agk-snav-arrow{color:var(--orange);font-size:11px;transition:transform .25s} #agkProfile .agk-nw-toggle.open .agk-snav-arrow{transform:rotate(180deg)} #agkProfile .agk-nw-cats{display:none;margin-top:12px} #agkProfile .agk-nw-cats.open{display:block;animation:agkPFade .2s ease} #agkProfile .agk-nw-box.cats{padding:12px} #agkProfile .agk-nw-box.cats .agk-sb-title{display:none} #agkProfile .agk-nw-art-head{grid-template-columns:200px minmax(0,1fr)} } @media(max-width:575.98px){ #agkProfile .agk-nw-wrap{padding:0 12px;gap:16px} #agkProfile .agk-nw-feat{grid-template-columns:minmax(0,1fr);gap:12px;padding:10px} #agkProfile .agk-nw-feat h3{font-size:16px} #agkProfile .agk-nw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #agkProfile .agk-nw-card-body{padding:10px} #agkProfile .agk-nw-card h4{font-size:12.5px;min-height:46px} #agkProfile .agk-nw-card p{display:none} #agkProfile .agk-nw-sec .agk-p-head{padding:16px 18px} #agkProfile .agk-nw-sec .agk-p-body{padding:16px 12px} #agkProfile .agk-nw-art-head{grid-template-columns:minmax(0,1fr);padding:20px 18px;text-align:center} #agkProfile .agk-nw-art-cover{max-width:220px;margin:0 auto} #agkProfile .agk-nw-art-head h1{font-size:20px} #agkProfile .agk-nw-art-body{padding:20px 16px} #agkProfile .agk-nw-art-foot{padding:16px} #agkProfile .agk-nw-actions .agk-btn-s{width:100%;justify-content:center} }