/*
Theme Name: Catalog Store
Description: قالب كتالوج للشموع والبوسترات والاستيكرات بنفس شكل قالب YourColor. الطلب بيتم عن طريق واتساب.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: catalog-store
*/
@font-face{font-family:'Font';src:url('assets/fonts/droid-arabic-kufi.ttf') format('truetype');font-display:swap}
@font-face{font-family:'FontAwesome';src:url('assets/fonts/fontawesome-webfont.woff2') format('woff2'),url('assets/fonts/fontawesome-webfont.woff') format('woff'),url('assets/fonts/fontawesome-webfont.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box;outline:0}
body{font-family:Font,Arial,Tahoma,sans-serif;background-color:#3a5ab0;background-image:linear-gradient(90deg,#422788fc,#0488ceeb);background-attachment:fixed;
	direction:rtl;font-size:.9em;color:#222;margin:auto;min-height:100vh}
a{color:#fffef9;text-decoration:none;cursor:pointer}
img{max-width:100%;height:auto}
ul{list-style:none}
:focus-visible{outline:2px solid #ffb935;outline-offset:2px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:absolute;right:10px;top:-60px;background:#000;color:#fff;padding:8px 14px;z-index:9999999}
.skip:focus{top:10px}
.clearfix:after{content:'';display:block;clear:both}
.container{margin:auto;width:1200px}

/* ===== Top bar ===== */
#head{position:fixed;left:0;top:0;width:100%;height:60px;z-index:999;
	background:linear-gradient(45deg,#1f1f1f,#131313);box-shadow:0 3px 10px #1f1e1ea6}
#head .brand{float:right;line-height:60px;padding:0 15px;font-size:1.5em;font-weight:700;color:#ffb935}
#head .brand img{max-height:44px;width:auto;vertical-align:middle}
#head .right{float:right}
#head .right a{float:right;display:inline-block;line-height:60px;padding:0 12px;border-left:1px solid #00000021;transition:.35s ease}
#head .right a:hover,#head .right a.active{color:#ffb935}
#head .right a i{margin-left:5px}
div.buttons{float:left;margin-top:13px;width:auto;margin-right:10px}
div.buttons a{display:inline-block;border-radius:4px;font-size:11pt;line-height:24px;padding:6px 14px;font-weight:500;color:#fff!important;
	text-shadow:0 -1px 1px rgba(19,28,0,.35);background:#10bf46;border:1px solid #10bf46;text-align:center}
div.buttons a i{margin-left:8px}

/* ===== Search banner ===== */
.banner{padding:100px 10px 10px;text-align:center}
.banner h1{color:#fff;font-size:1.7em;margin-bottom:8px;text-shadow:0 2px 6px #0006}
.banner p{color:#ffffffd9;margin-bottom:18px}
.search{position:relative;height:50px;margin:auto;width:690px;max-width:100%}
.search input{width:100%;padding:5px 16px 5px 50px;border-radius:15px;line-height:35px;font-family:Font,Arial;border:0;color:#793b75;background:#f5f5f5;font-weight:700;height:50px;font-size:15px}
.search input::placeholder{color:#403d3d;font-size:16px;font-weight:700}
.search button{position:absolute;top:3px;left:3px;line-height:24px;padding:8px 12px;font-size:20px;color:#38393a;background:none;border:0;cursor:pointer}
.searchbar{padding-top:80px}

/* ===== Layout: fixed right menu + content ===== */
section.content{margin:auto;width:1200px;padding-top:20px}
section.content .right{width:170px;position:fixed;top:70px;margin-bottom:10px;box-shadow:0 0 16px #00000082;
	background:linear-gradient(45deg,#292828,#272727);border-radius:4px}
section.content.has-banner .right{top:70px}
#menu a{position:relative;display:block;padding:8px 6px;font-size:1em;border-bottom:1px solid #2d2d2dbd}
#menu a i{margin-left:10px;margin-right:5px;font-size:14px;width:16px;text-align:center}
#menu a:hover{color:#ffb935}
#menu a.active,#menu a:first-child{color:#e4e4e4;font-weight:700}
#menu a.active{color:#ffb935}
section.content .center{position:relative;display:block;margin:0 180px 10px 0}

/* ===== Section headings ===== */
.sliders{position:relative;margin-bottom:25px;border-radius:4px;width:100%}
.sliders>h2,.page-title{padding:8px 19px;font-size:23px;font-weight:700;overflow:hidden;
	background:linear-gradient(to right,#0000,#00000042,#0000);margin-bottom:20px;color:#fff;text-align:center}
.sliders>h2 a{color:#f5f5f5;font-size:16px;margin-right:10px;opacity:.85}
.sliders>h2 a:hover{color:#ffb935}
.lead{color:#fff;text-align:center;margin:-8px auto 18px;max-width:700px}

/* ===== Product cards (poster style) ===== */
.blocks{text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:15px}
.block{width:175px;margin-bottom:15px;border:2px solid #ffffff30;position:relative;transition:.35s ease;text-align:center}
.block div.image{height:260px;position:relative;overflow:hidden;background:#00000040}
.block div.image img{width:100%;height:100%;object-fit:cover;display:block}
.noimg{display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,#ffffff10,#ffffff10 12px,#ffffff1c 12px,#ffffff1c 24px)}
.block h3{display:block;line-height:20px;padding:6px 5px 2px;min-height:42px;color:#fff;font-size:1em;font-weight:700;overflow:hidden;transition:.35s}
.block:hover h3{color:#f9ce29}
.block .price{display:block;padding:2px 5px 8px;color:#ffb935;font-weight:700}
.ribbon{position:absolute;left:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px}
.ribbon span{color:#fff;text-align:center;transform:rotate(-45deg);width:100px;display:block;background:linear-gradient(#F70505 0%,#ff4136 100%);
	box-shadow:0 3px 10px -5px #000;position:absolute;top:19px;left:-21px;font-weight:700;line-height:20px;font-size:.85em}
.block.is-sold div.image img{filter:grayscale(.8);opacity:.75}
.empty{color:#fff;text-align:center;padding:30px;background:#0000004d;border-radius:15px}
.empty a{color:#ffb935;text-decoration:underline}

/* ===== Single product (poster panel) ===== */
.poster.clearfix{overflow:hidden;width:100%;background:#15151538;position:relative;margin-top:10px;border-radius:20px;box-shadow:0 0 15px #00000099}
.poster .image{width:300px;margin:20px;float:right;position:relative}
.poster .image img{width:100%;height:auto;border-radius:10px;box-shadow:0 0 10px #000;border:2px solid #ffffff45;display:block}
.poster .info{width:calc(100% - 360px);margin-right:10px;float:right;padding:10px 0}
.poster .info h1{color:#fff;font-size:20px;padding:10px;border-bottom:1px solid #dddddd14}
.poster .info li{line-height:35px;border-bottom:1px solid #dddddd1a;overflow:hidden;color:#ffc107;font-size:14px;padding:0 10px}
.poster .info li span{display:inline-block;color:#fff;width:96px;text-align:right}
.poster .info li a{color:#ffc107}
.poster .info select{font-family:Font,Arial;border:0;border-radius:6px;padding:4px 10px;background:#f5f5f5;color:#793b75;font-weight:700;max-width:100%}
.poster .info .order{padding:18px 10px}
.btn-wa{display:inline-block;border-radius:4px;font-size:13pt;line-height:24px;padding:10px 26px;font-weight:700;color:#fff!important;
	background:linear-gradient(#17d256,#10bf46);border:1px solid #10bf46;text-shadow:0 -1px 1px rgba(19,28,0,.35);box-shadow:0 0 10px #0006}
.btn-wa i{margin-left:10px}
.btn-wa:hover{background:linear-gradient(#10bf46,#0c9a38)}
.story{position:relative;display:block;margin-top:16px;background:#0000004d;overflow:hidden;border-radius:15px}
.story h2{background:#00000059;border-bottom:1px solid #000;font-size:17px;padding:8px 20px;color:#fff}
.story .entry{padding:12px 20px;color:#fff;line-height:2}
.story .entry p{margin-bottom:10px}
.story .entry a{color:#ffb935;text-decoration:underline}
.page-body{background:#0000004d;border-radius:15px;padding:20px;color:#fff;line-height:2;margin-top:10px}
.page-body h1{font-size:22px;margin-bottom:10px;color:#fff}
.page-body .search{margin:15px 0}

/* ===== Pagination ===== */
.pagination{margin:10px 0 25px}
.nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.page-numbers{display:inline-block;border-radius:34px;background:#131313cc;color:#fff;padding:6px 14px;font-weight:700}
.page-numbers.current,.page-numbers:hover{background:linear-gradient(45deg,#ffb935,#dc9715);color:#101010}

/* ===== Footer ===== */
footer{text-align:center;padding:10px 15px;margin-top:30px;background:linear-gradient(45deg,#1f1f1f,#131313);overflow:hidden;color:#fff;box-shadow:0 -5px 5px #00000061}
footer p{float:right;line-height:34px}
footer .wa{float:left}

/* ===== Responsive ===== */
@media (max-width:1199px){
	.container,section.content{width:100%}
	section.content{padding:20px 8px 0}
	section.content .center{margin:0}
	section.content .right{position:static;width:100%;margin-bottom:15px;overflow-x:auto;white-space:nowrap;border-radius:8px}
	#menu a{display:inline-block;padding:10px 12px;border-bottom:0;border-left:1px solid #2d2d2dbd}
	#head .container{width:100%;padding:0 5px}
	.banner{padding-top:90px}
}
@media (max-width:1023px){
	#head .right a:not(.keep){display:none}
	.poster .image{float:none;margin:20px auto 0;width:min(300px,80%)}
	.poster .info{float:none;width:100%;margin:0;padding:10px}
}
@media (max-width:767px){
	.block{width:calc(50% - 8px)}
	.block div.image{height:auto;aspect-ratio:2/3}
	div.buttons a span{display:none}
	div.buttons a i{margin:0}
	.banner h1{font-size:1.3em}
	footer p,footer .wa{float:none;display:block}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
#head .right li{float:right}
#head .right li a{border-left:1px solid #00000021}
.banner.compact{padding:80px 10px 0}