.float {
    position: fixed;
    /* 130px clears the theme's ".tt-back-to-top" scroll-to-top arrow
       (bottom: 50px, ~62px tall, so it occupies the 50-112px range) -
       previously 90px overlapped it once the arrow appeared on scroll. */
    bottom: 130px;
    right: 15px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
}

.my-float {
    margin-top: 16px;
}

.tt-countdown_box_02 .countdown-section {
    height: 35px !important;
    background: var(--primary-color) !important;
    padding: 5px 0 0 0 !important;
    color: #fff !important;
}

.countdown-amount,
.countdown-period {
    height: 15px !important;
    padding: 5px 0 0 0 !important;
    line-height: 10px !important;
    font-size: 14px !important;
}

.countdown-period {
    font-size: 12px !important;
}

.tt-product,
.tt-collection-item {
    border: solid 1px #ddd;
    background: #fff;
    padding: 5px;
}

.tt-stuck-nav .tt-dropdown-obj .tt-dropdown-toggle {
    color: #fff !important;
}

.tt-stuck-nav .tt-menu-toggle i {
    color: #fff !important;
}

.tt-stuck-nav .tt-cart .tt-dropdown-toggle .tt-badge-cart {
    background: #fff;
    color: #777;
}

.trackorder {
    font-size: 12px !important;
}

/* Top header note (Admin -> Settings -> Top Header Note) - admin-editable
   announcement bar, e.g. express delivery messaging. Was a flat yellow
   strip; restyled to the red-gradient banner look. Becomes a clickable
   link automatically if the admin fills in the matching "Link" field
   (top_header_note_en_link / top_header_note_ar_link) - see
   header_theme_compact.blade.php. */
.topheadernote {
    background: linear-gradient(90deg, #8a0000 0%, #d81f1f 55%, #e63946 100%);
    color: #ffffff;
    padding: 10px 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.topheadernote a {
    color: #ffffff;
    text-decoration: none;
}
.topheadernote a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* Service Note ticker (Admin -> Settings -> Service Note1-4(Home) -> Details)
   Cycles multiple admin-entered messages inside the same .topheadernote
   banner, sliding each one up from the bottom and out the top, Temu-style.
   Populated via header_theme_compact.blade.php; falls back to the single
   Top Header Note above when no Service Notes are filled in. */
.topheadernote-ticker {
    position: relative;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    max-width: 100%;
}
.topheadernote-ticker-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.9s ease, opacity 0.9s ease;
}
.topheadernote-ticker-item.active {
    transform: translateY(0);
    opacity: 1;
}
.topheadernote-ticker-item.exit {
    transform: translateY(-100%);
    opacity: 0;
}

.languageButton {
    border: 0;
    background-color: inherit;
    font-size: 18px;
    font-weight: normal;
    margin-top: 3px;
    cursor: pointer;
    height: 20px;
}

.error {
    color: #ff0000;
}

/*font color for order status*/
.pending {
    color: #f60;
}
.completed {
    color: #009900;
}
.canceled {
    color: #ff0000;
}
.returned {
    color: #03f;
}
/*alert box*/
.alert-danger {
    padding: 20px;
    background-color: #f44336; /* Red */
    color: #ffffff;
    margin-bottom: 15px;
}

.alert-success {
    padding: 20px;
    background-color: #bceeb5; /* Red */
    color: #006633;
    margin-bottom: 15px;
    font-size: 16px;
}
.textureattr {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.textureattr li {
    float: left;
    width: 35px;
    height: 35px;
}

.pad_3 {
    padding: 3% !important;
}
.font-13 {
    font-size: 13px !important;
}
.mt-10 {
    margin-top: 10px;
}
.my_border {
    border: solid 1px #e9e7e7;
    padding: 5px;
    margin: 10px 0;
}
.list_pro {
    float: left;
    width: 50%;
}
.tt-wishlist-box .tt-wishlist-list .tt-item:not(:last-child) {
    border-bottom: 1px solid #e9e7e7;
}
.tt-wishlist-box .tt-wishlist-list .tt-item:not(:last-child) {
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.tt-wishlist-box .tt-wishlist-list .tt-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: center;
}
.mb-30 {
    margin-bottom: 30px;
}
.list_pro img {
    float: left;
    width: 50px;
    height: auto;
    margin: 0 10px 10px 0;
}
.list_pro p {
    float: left;
}
.list_proall {
    width: 100%;
}
.w-160 {
    width: 180px !important;
}

@media all and (max-width: 480px) and (min-width: 320px) {
    header .tt-color-scheme-01 {
        display: none;
    }
}

/*pagination*/
.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}
.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.page-link:hover {
    z-index: 2;
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.page-item:last-child .page-link {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}
.pagination-lg .page-link {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
}
.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}
.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}
.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}
.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
}
.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.tt-stuck-nav .languageButton {
    color: #fff;
    margin-top: 3px;
}
.color-label {
    font-size: 0.7rem;
}
.search-bar-20 {
    padding: 14px 10px 12px 50px !important;
    width: 100% !important;
}
.options-color {
    border: 1px dashed gray;
}
.tt-top-row .icon-f-55 {
    position: relative !important;
}
.tt-top-row .icon-f-55:before {
    position: absolute !important;
    top: -3px !important;
    left: -20px !important;
}
.row-cols-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.row-cols-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.row-cols-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.row-cols-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.row-cols-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
.row-cols-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
@media (min-width: 576px) {
    .row-cols-sm-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row-cols-sm-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row-cols-sm-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row-cols-sm-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row-cols-sm-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .row-cols-sm-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}
@media (min-width: 768px) {
    .row-cols-md-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row-cols-md-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row-cols-md-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row-cols-md-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row-cols-md-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .row-cols-md-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .w-md-auto {
        width: auto !important;
    }

}
@media (min-width: 992px) {
    .row-cols-lg-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row-cols-lg-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row-cols-lg-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row-cols-lg-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row-cols-lg-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .row-cols-lg-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}
@media (min-width: 1200px) {
    .row-cols-xl-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row-cols-xl-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row-cols-xl-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row-cols-xl-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row-cols-xl-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .row-cols-xl-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

span.tt-img {
    display: flex;
    align-items: center;
    aspect-ratio: 1/1;
    /* height: auto; */
    /* width: 280px; */
    justify-content: center;
}
.tt-product h2.tt-title {
    /* white-space: nowrap; */
    overflow: hidden;
    width: 100%;
    padding-inline: 1rem;
    min-height: 66px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.tt-product .tt-price {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.tt-product-single-info .tt-price .old-price,
.tt-product-single-info .tt-price .old-price .money {
    text-decoration: none !important;
}
span#oldprices *,
.tt-product:not(.tt-view) .tt-description .tt-price .old-price {
    color: #191919 !important;
    text-decoration: line-through;
}
@media only screen and (max-width: 600px) {
    .my-sm-14 {
        margin-block: 1.4rem;
    }
}

.optionradio > li > label {
    font-weight: bold;
}

.zoomWindowContainer .zoomWindow {
    height: 100% !important;
}

.square {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
}

.portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 1/2;
}

.landscape {
    width: 100%;
    height: auto;
    aspect-ratio: 2/1;
}
img:is(.square, .portrait, .landscape) {
    object-fit: cover;
}

.min-h-100-1 {
    min-height: calc(100% - 1rem);
}
.min-h-100 {
    min-height: 100%;
}
.min-h-100-1_6 {
    max-height: calc(100% - 1.6rem);
}
.min-h-50-1 {
    min-height: calc(50% - 1rem);
}
.tt-desctop-menu:not(.tt-hover-02) li.dropdown > a {
    text-transform: uppercase !important;
}
.brands-dropdown {
    gap: 1rem;
}
.brands-dropdown .col-sm-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px #80808012 solid;
    border-radius: 0.5rem;
}

@media only screen and (min-width: 520px) {
    .w-md-70vw {
        width: 70vw;
    }
}
.tt-img-roll-over{
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
    height: 100% !important;
}
.offer-badge{
    border-radius: 2px !important;
    height: 1rem !important;
    margin-top: 3px !important;
     line-height: 1.7;
}
.offer-badge i{
    line-height: 1.3;
}
.gap-0 {
    gap: 0 !important;
}
.gap-1 {
    gap: 0.25rem !important;
}
.gap-2 {
    gap: 0.5rem !important;
}
.gap-3 {
    gap: 1rem !important;
}
.gap-4 {
    gap: 1.5rem !important;
}
.gap-5 {
    gap: 3rem !important;
}


.accordion button[data-toggle] {
    /* all:unset; */
    background: transparent;
}
.accordion button[data-toggle]:hover {
    /* all:unset; */
    background: transparent;
}
/* Accordion */
.accordion {
overflow-anchor: none;
}
.accordion > .card > .card-header   {
border-radius: 0;
margin-bottom: -1px;
}
.accordion > .card > .card-header  :is( h2, h2 button) {
padding: 0 !important;
margin: 0 !important;
}
.accordion > .card {
overflow: hidden;
}
.accordion > .card:not(:last-of-type) {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.accordion > .card:not(:first-of-type) .card-header {
border-bottom: 0;
}
.accordion > .card:not(:first-of-type) .card-header:first-child ,
.accordion > .card:not(:last-of-type) .card-header:last-child {
border-radius: 0;
}
.accordion > .card > .card-header {
margin-bottom: -1px;
}
.accordion > .card > .card-header > .btn {
width: 100%;
text-align: left;
padding-right: 0;
padding-left: 1.5rem;
position: relative;
}
.accordion > .card > .card-header > .btn::before {
position: absolute;
content: "";
top: 50%;
right: 0;
transform: translateY(-50%);
width: 0.75rem;
height: 0.75rem;
transition: transform 0.2s ease-out;
border: 1px solid rgba(0, 0, 0, 0.6);
border-radius: 0.25rem;
}
.accordion > .card > .card-header > .btn[aria-expanded="true"]::before {
transform: translateY(-50%) rotate(90deg);
}
.accordion > .card > div   {
transition: all 300ms ease-in-out;
}
.accordion > .card > :is(.collapsing,  .collapse)  {
height: 0;
overflow: hidden;
}

.accordion > .card > .collapse.show {
height: auto;
overflow: visible;
}

.btn-primary.disabled, .btn-primary:disabled{
    background-color: hsl(var(--primary-color-values), 60%) !important;
}


/* card */
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 1px;
padding: 1.25rem;
}
.gap-y-4{
    gap: 1.5rem 0 !important;
}

/*------------------------------- bottom bar-------------------------------- */
.mobile-bottom-nav {
	display: none;
}

/* --------------------------------- Select2 -------------------------------- */
.select2{
    display: block !important;
    width: 100% !important;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-clip: padding-box;
    border-radius: 6px !important;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.select2-selection{
    border: unset !important;
}

/*Mobile Devices.*/
@media all and (max-width: 480px) and (min-width: 320px) {
	.my_title {
		display: block;
		text-align: center;
		font-size: 18px;
		line-height: 21px;
		font-weight: normal;
		letter-spacing: normal;
		margin: 20px 0 -20px 0;
		font-family: 'acum', sans-serif;
	}

	.mobile-bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		will-change: transform;
		transform: translateZ(0);
		display: flex;
		height: 60px;
		box-shadow: -2px -2px 5px -2px #999;
		background-color: white;
		border-radius: 30px 30px 0 0;
		-webkit-border-radius: 30px 30px 0 0;
		-moz-border-radius: 30px 30px 0 0;
	}
	.mobile-bottom-nav__item {
		flex-grow: 1;
		text-align: center;
		font-size: 13px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0 8px;
		line-height: 10px;
	}

	.mobile-bottom-nav__item a {
		color: #1f2841 !important;
	}

	.mobile-bottom-nav__item--active {
		color: #fff;
		/*   background:#37B1D8;
  padding:5px;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  box-shadow: 2px -2px -5px -2px #999; */
	}

	.mobile_acive {
		color: #fff;
		background: var(--primary-color);
		padding: 5px;
		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		box-shadow: 2px -2px -5px -2px #999;
	}

	.mobile-bottom-nav__item-content {
		display: flex;
		flex-direction: column;
	}

	.home_ico ,
	.category_ico ,
	.favo_ico ,
	.check_ico ,
    .mobile-bottom-nav__item-content .ico
    {
		width: 25px;
		height: auto;
		margin: 0 auto 5px auto;
    }
	.mobile-bottom-nav__item-content:not(.mobile_acive) img.ico {
        filter: invert(100%) saturate(0%) brightness(50%);
    }
    .mobile-bottom-nav__item-content.mobile_acive img.ico {
        filter: invert(0%) saturate(0%) brightness(200%);
    }
        .slick-track>div,
        div:has(.tt-product) {
            padding: 4px;
        }
}

/* Product details: "copy link" share option (button element, since the
   theme's .tt-share-dropdown a rule only targets anchors) */
.tt-share-dropdown button.tt-copy-link-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #333;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.tt-share-dropdown button.tt-copy-link-btn:hover {
    background: #f5f5f5;
}
.tt-share-dropdown button.tt-copy-link-btn svg {
    flex-shrink: 0;
}
.tt-share-dropdown button.tt-copy-link-btn .share-label {
    font-weight: 500;
}
#quickresponse .alert-success {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #e6f4ea;
    color: #1e7e34;
    font-size: 13px;
}
#quickresponse .alert-danger {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fbe9e9;
    color: #c62828;
    font-size: 13px;
}

/* Product details: the thumbnail strip below the main image uses slick's
   gutter technique (each thumb has padding-right, the list has an equal
   negative right margin to compensate). Its wrapper never clips that
   overhang, so the strip renders ~1 gutter-width wider than the main
   image above it. Clip it so the thumbnail row's visible width always
   matches the main image's width exactly. */
.product-images-carousel {
    overflow: hidden;
}

/* Frequently bought together: compact row layout (small thumb + title/price)
   instead of full product cards, so the widget stays short. */
.tt-fbt-list {
    display: flex;
    flex-direction: column;
}
.tt-fbt-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid #ececec;
    text-decoration: none;
    color: inherit;
}
.tt-fbt-item:last-child {
    border-bottom: none;
}
.tt-fbt-item:hover {
    background: #f8f8f8;
    text-decoration: none;
    color: inherit;
}
.tt-fbt-item-img {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ececec;
    background: #fafafa;
}
.tt-fbt-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-fbt-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tt-fbt-item-title {
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tt-fbt-item-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color, #191919);
}
.tt-fbt-item-oldprice {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    margin-inline-start: 6px;
}
/* FBT row now wraps the image+text in its own link (.tt-fbt-item-link) so a
   separate small action button (Add to Cart / Details) can sit beside it
   without the whole row being one giant <a>. */
.tt-fbt-item-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.tt-fbt-item-link:hover {
    text-decoration: none;
    color: inherit;
}
.tt-fbt-item-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ececec;
    background: #fff;
    color: var(--primary-color, #191919);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tt-fbt-item-action:hover {
    background: var(--primary-color, #191919);
    border-color: var(--primary-color, #191919);
    color: #fff;
    text-decoration: none;
}
.tt-fbt-item-action svg {
    pointer-events: none;
}
/* Error text only (success shows via the global toast) - kept out of flex
   flow so it doesn't push the row's layout around when it appears. */
.tt-fbt-item-response {
    display: none;
    position: absolute;
    inset-inline-end: 4px;
    bottom: -2px;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    z-index: 1;
}
.tt-fbt-item-response:empty {
    display: none !important;
}
.tt-fbt-item-response .alert-error {
    background: #fdecea;
    color: #c0392b;
    padding: 2px 6px;
    border-radius: 4px;
}
.tt-fbt-item {
    position: relative;
}

/* Frequently bought together - CART PAGE version. Wider cards than the
   compact details-page list (there's more room here), horizontally
   scrollable, with a highlighted/badged state for items that would push
   the order over the free-delivery threshold. */
.tt-fbt-cart-widget {
    margin: 24px 0;
    padding: 18px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff8f0 0%, #fff 60%);
    border: 1px solid #f3e2c9;
}
.tt-fbt-cart-header {
    margin-bottom: 14px;
}
.tt-fbt-cart-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #191919;
}
.tt-fbt-cart-subtitle {
    font-size: 13px;
    color: #777;
    margin: 0;
}
.tt-fbt-cart-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    /* extra room above the cards so the "unlocks free delivery" badge
       (absolutely positioned at top:-10px, poking above the card) doesn't
       get clipped by this scroll container's own overflow box. */
    padding-top: 16px;
    margin-top: -16px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.tt-fbt-cart-row::-webkit-scrollbar {
    height: 6px;
}
.tt-fbt-cart-row::-webkit-scrollbar-thumb {
    background: #e0d3bd;
    border-radius: 3px;
}
.tt-fbt-cart-card {
    position: relative;
    flex: 0 0 150px;
    width: 150px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 10px;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.tt-fbt-cart-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.tt-fbt-cart-card-highlight {
    border-color: #f3a712;
    box-shadow: 0 0 0 1px #f3a712;
}
.tt-fbt-cart-badge {
    position: absolute;
    top: -10px;
    inset-inline-start: 8px;
    inset-inline-end: 8px;
    background: #f3a712;
    color: #191919;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    padding: 3px 6px;
    border-radius: 20px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.tt-fbt-cart-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1;
}
.tt-fbt-cart-card-link:hover {
    text-decoration: none;
    color: inherit;
}
.tt-fbt-cart-card-img {
    display: block;
    width: 100%;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    margin-bottom: 8px;
}
.tt-fbt-cart-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-fbt-cart-card-title {
    font-size: 12px;
    color: #333;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 31px;
    margin-bottom: 4px;
}
.tt-fbt-cart-card-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #191919);
}
.tt-fbt-cart-card-oldprice {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    margin-inline-start: 4px;
}
.tt-fbt-cart-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    background: var(--primary-color, #191919);
    color: #fff;
    border: 1px solid var(--primary-color, #191919);
    transition: opacity .15s ease;
}
.tt-fbt-cart-card-btn:hover {
    opacity: .85;
    color: #fff;
    text-decoration: none;
}
.tt-fbt-cart-card-btn-outline {
    background: #fff;
    color: var(--primary-color, #191919);
}
.tt-fbt-cart-card-btn-outline:hover {
    background: var(--primary-color, #191919);
    color: #fff;
}
.tt-fbt-cart-card-response {
    display: none;
    font-size: 10px;
    line-height: 1.3;
    margin-top: 4px;
}
.tt-fbt-cart-card-response:empty {
    display: none !important;
}
.tt-fbt-cart-card-response .alert-error {
    background: #fdecea;
    color: #c0392b;
    padding: 2px 5px;
    border-radius: 4px;
}
@media (max-width: 767px) {
    .tt-fbt-cart-card {
        flex-basis: 130px;
        width: 130px;
    }
}

/* "Wait! Add one more item" checkout upsell popup - shown when the customer
   clicks Checkout (header mini-cart dropdown or the /cart page), right
   before they'd leave for the checkout page. Same product-card visual
   language as the frequently-bought-together widget above, laid out as a
   3-up grid inside a modal instead of a horizontal scroller. */
.tt-checkout-upsell-dialog {
    max-width: 560px;
}
.tt-checkout-upsell-content {
    padding: 8px;
}
.tt-checkout-upsell-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #191919;
    text-align: center;
}
.tt-checkout-upsell-subtitle {
    font-size: 14px;
    color: #777;
    margin: 0 0 20px;
    text-align: center;
}
.tt-checkout-upsell-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.tt-checkout-upsell-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 10px;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.tt-checkout-upsell-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.tt-checkout-upsell-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1;
}
.tt-checkout-upsell-card-link:hover {
    text-decoration: none;
    color: inherit;
}
.tt-checkout-upsell-card-img {
    display: block;
    width: 100%;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    margin-bottom: 8px;
}
.tt-checkout-upsell-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-checkout-upsell-card-title {
    font-size: 12px;
    color: #333;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 31px;
    margin-bottom: 4px;
}
.tt-checkout-upsell-card-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #191919);
}
.tt-checkout-upsell-card-oldprice {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    margin-inline-start: 4px;
}
.tt-checkout-upsell-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    background: var(--primary-color, #191919);
    color: #fff;
    border: 1px solid var(--primary-color, #191919);
    transition: opacity .15s ease, background .15s ease;
}
.tt-checkout-upsell-card-btn:hover {
    opacity: .85;
    color: #fff;
    text-decoration: none;
}
.tt-checkout-upsell-card-btn-outline {
    background: #fff;
    color: var(--primary-color, #191919);
}
.tt-checkout-upsell-card-btn-outline:hover {
    background: var(--primary-color, #191919);
    color: #fff;
}
.tt-checkout-upsell-card-btn.tt-checkout-upsell-loading {
    opacity: .6;
    pointer-events: none;
}
.tt-checkout-upsell-card-btn.tt-checkout-upsell-added {
    background: #2e7d32;
    border-color: #2e7d32;
    opacity: 1;
    cursor: default;
    pointer-events: none;
}
.tt-checkout-upsell-card-response {
    display: none;
    font-size: 10px;
    line-height: 1.3;
    margin-top: 4px;
}
.tt-checkout-upsell-card-response:empty {
    display: none !important;
}
.tt-checkout-upsell-card-response .alert-error {
    background: #fdecea;
    color: #c0392b;
    padding: 2px 5px;
    border-radius: 4px;
}
.tt-checkout-upsell-nothanks-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: #6FCF57;
    border: none;
    border-radius: 30px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background .15s ease;
}
.tt-checkout-upsell-nothanks-btn:hover,
.tt-checkout-upsell-nothanks-btn:focus {
    background: #5cbf46;
    color: #fff;
}
.tt-checkout-upsell-nothanks-icon {
    flex-shrink: 0;
}
/* Product details page: qty stepper + Add to Cart + Checkout, all in one row
   (adib, 2026-08-18). Deliberately its own classes, not the theme's shared
   .tt-row-custom-01/.col-item - those carry a `.col-item:nth-child(2){flex:1
   1 auto}` rule that fought our flex-basis and made Checkout render wider
   than Add to Cart, plus a mobile `flex-direction:column` rule that would
   have stacked everything vertically on phones. See details1.blade.php. */
.tt-details-cart-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
}
.tt-details-cart-row .tt-details-qty-col {
    flex: 0 0 auto;
}
/* Add to Cart + Checkout share this wrapper so they sit close together (small
   gap of their own) and stay the same height as one another, regardless of
   the larger gap between the qty stepper and this pair. */
.tt-details-cart-row .tt-details-actions-col {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}
.tt-details-actions-col .tt-details-addcart-col {
    flex: 1.7 1 0;
    min-width: 0;
}
.tt-details-actions-col .tt-details-checkout-col {
    flex: 1 1 0;
    min-width: 0;
}
/* Add to Cart - a bit bigger than Checkout (wider flex share above, taller/larger
   text here too), scoped to this button only so the site-wide .btn.btn-lg isn't
   affected. Height (52px) matches the qty stepper's own rendered height
   (.tt-input-counter.style-01, 50px input + 1px border top/bottom) so the
   whole row - qty box, Add to Cart, Checkout - lines up at the same height. */
.tt-details-addcart-btn.btn.btn-lg {
    width: 100%;
    height: 52px;
    font-size: 13px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
/* "Checkout" button - same corner radius AND height as Add to Cart (was a 30px
   pill at a shorter 40px, which threw the row out of alignment) - now matches
   height exactly (and the qty stepper's height too), just a touch narrower/
   smaller text, so the two read as one consistent, aligned pair. */
.tt-details-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 52px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: #6FCF57;
    border: none;
    border-radius: 6px;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease;
}
.tt-details-checkout-btn:hover,
.tt-details-checkout-btn:focus {
    background: #5cbf46;
    color: #fff;
    text-decoration: none;
}
/* Quantity stepper (adib, 2026-08-18) - was a flat gray box (input background
   #eee) with no visible separation between the number and the +/- controls.
   Now: white background overall, with the +/- given their own gray chip so
   they read as clearly clickable, separate from the number in the middle. */
.tt-input-counter.style-01 {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.tt-input-counter.style-01 input {
    background: #fff !important;
    border-radius: 0 !important;
    color: #191919;
}
.tt-input-counter.style-01 span.minus-btn,
.tt-input-counter.style-01 span.plus-btn {
    background: #f0f0f0;
    color: #555;
}
.tt-input-counter.style-01 span.minus-btn:hover,
.tt-input-counter.style-01 span.plus-btn:hover {
    background: #e2e2e2;
    color: #191919;
}
@media (max-width: 480px) {
    .tt-details-cart-row .tt-input-counter.style-01 {
        max-width: 96px;
        min-width: 96px;
    }
    /* The theme's +/- spans are a fixed 49px wide each (see
       .tt-input-counter.style-01 span in theme.css) - at the 96px width above,
       two of those side by side (98px) fully covered the number in the middle,
       so the qty was invisible on phones. Narrowing them here specifically
       (only inside our details-page row) frees up room for the number again. */
    .tt-details-cart-row .tt-input-counter.style-01 span.minus-btn,
    .tt-details-cart-row .tt-input-counter.style-01 span.plus-btn {
        width: 28px;
    }
    .tt-details-addcart-btn.btn.btn-lg {
        font-size: 11px;
        padding: 0 6px;
        height: 52px;
    }
    .tt-details-checkout-btn {
        font-size: 10px;
        padding: 0 6px;
        height: 52px;
    }
}
@media (max-width: 767px) {
    .tt-checkout-upsell-row {
        gap: 8px;
    }
    .tt-checkout-upsell-card {
        padding: 8px;
    }
    .tt-checkout-upsell-card-img {
        height: 60px;
    }
    .tt-checkout-upsell-card-title {
        font-size: 11px;
        min-height: 28px;
    }
    .tt-checkout-upsell-card-btn {
        font-size: 9px;
        padding: 5px 3px;
        letter-spacing: -.2px;
    }
}

/* Express delivery checkbox label (cart page) - keep the admin-configured
   text on a single line instead of wrapping across 2+ lines. Text content
   itself is admin-configurable (settings->express_delivery_text_en/ar) and
   is not touched here, only its layout/sizing. */
.tt-express-delivery-group {
    max-width: 100%;
}
.tt-express-delivery-group label.d-flex {
    max-width: 100%;
    align-items: flex-start;
}
.tt-express-delivery-text {
    display: inline-block !important;
    max-width: 100%;
    white-space: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
    font-size: 14px !important;
}
.tt-express-delivery-text::-webkit-scrollbar {
    height: 4px;
}
.tt-express-delivery-text::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}
@media (max-width: 991px) {
    .tt-express-delivery-text {
        font-size: 12px !important;
    }
}
@media (max-width: 480px) {
    .tt-express-delivery-text {
        font-size: 10.5px !important;
    }
}

/* Social media badges (header + footer, "Marketing" homepage refresh) -
   brand-color circle badges with inline SVG glyphs, replacing the old
   icon-g-64/icon-h-58/etc classes (generic glyphs from a bundled icon
   font, no brand color). Markup lives in
   resources/views/website/includes/social_badges_items.blade.php,
   included from header_theme_1.blade.php and footer_theme1.blade.php -
   the two templates the live homepage (theme "1") actually uses. */
.tt-social-badges {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.tt-social-badges li {
    margin: 0 !important;
    padding: 0 !important;
}
.tt-social-badge {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: transform 0.15s ease, opacity 0.15s ease;
    text-decoration: none;
}
.tt-social-badge:hover {
    transform: scale(1.08);
    opacity: 0.9;
}
.tt-social-badge svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}
.tt-social-badge__text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
}
.tt-social-badge--facebook {
    background-color: #1877F2;
}
.tt-social-badge--twitter {
    background-color: #000000;
}
.tt-social-badge--instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.tt-social-badge--linkedin {
    background-color: #0A66C2;
}
.tt-social-badge--youtube {
    background-color: #FF0000;
}

/* Header top bar refresh: light-gray outline button for Track Order,
   plain white links (gray on hover) for Contact Us / phone number,
   plain colored social icons (no circle badge - the footer keeps the
   circle badges from the earlier change, this is scoped to the header's
   top bar only via .tt-top-row). Markup in header_theme_compact.blade.php
   (the file actually rendered on kash5astore.com's navbar - the site's
   navbar theme override is "compact", independent of the main theme
   number). */
.tt-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #eaeaea;
    color: #1a1a1a !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tt-topbar-btn:hover {
    background-color: #dcdcdc;
    border-color: #bbbbbb;
    color: #1a1a1a !important;
}

/* Contact Us + phone number: plain links, no button chrome */
.tt-top-row .tt-box-info ul li a {
    color: #d6d6d6 !important;
    transition: color 0.15s ease;
}
.tt-top-row .tt-box-info ul li a:hover {
    color: #999999 !important;
}
.tt-top-row .tt-box-info ul li [class^="icon-"] {
    color: #d6d6d6;
    transition: color 0.15s ease;
}
.tt-top-row .tt-box-info ul li a:hover [class^="icon-"] {
    color: #999999;
}
/* Extra breathing room between the phone number and Contact Us links */
.tt-top-row .tt-box-info ul li:nth-child(2) {
    margin-left: 30px;
}

/* Track Order button: extra breathing room before the social icons */
.tt-top-row .tt-social-icon > li:first-child {
    margin-right: 18px;
}

.tt-top-row .tt-col-left,
.tt-top-row .tt-col-right {
    align-items: center;
}
.tt-top-row .tt-box-info ul,
.tt-top-row .tt-social-icon {
    align-items: center;
}

.tt-top-row .tt-social-badge {
    background: none !important;
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 0;
}
.tt-top-row .tt-social-badge svg {
    width: 17px;
    height: 17px;
}
.tt-top-row .tt-social-badge:hover {
    opacity: 1;
    transform: scale(1.15);
}
.tt-top-row .tt-social-badge--facebook svg {
    fill: #1877F2;
}
.tt-top-row .tt-social-badge--twitter svg {
    fill: #ffffff;
}
.tt-top-row .tt-social-badge--instagram svg {
    fill: #E4405F;
}
.tt-top-row .tt-social-badge--youtube svg {
    fill: #FF0000;
}
.tt-top-row .tt-social-badge--linkedin .tt-social-badge__text {
    color: #0A66C2;
}

/* Product carousels ("Related Product" row on cart page, etc.) - slick.js's
   default ".slick-slide{height:100%}" can lock onto a stale, much-taller
   measurement (seen on the cart page under the "Complete Your Order" widget,
   leaving a large empty gap before the footer until the page is resized).
   These carousels never need equal-height slide stretching, so let each
   slide size to its own content instead - verified this collapses the row
   to its real height without affecting arrows/dots positioning. */
.tt-carousel-products.slick-slider .slick-slide {
    height: auto !important;
}

/* New search option (adib, 2026-08-19) - Add to Cart inside the header
   autocomplete dropdown (resources/views/website/includes/search-bar/
   quick_search_results.blade.php). Only ever rendered when
   config('features.smart_search_enabled') is on, so this whole block is
   inert (nothing on the page matches these selectors) when the flag is off -
   safe to ship either way.

   Layout note (adib, 2026-08-20): went through two revisions the same day -
   first a single-column row list, then a 6-column card grid matching
   sanamstore.net. adib then asked for a wider dropdown, only 4 columns
   instead of 6 (more room per card so text isn't cramped), the qty stepper
   removed entirely (single click = add 1, same as everywhere else on the
   site), only in-stock/available items shown (no out-of-stock, no
   preorder - filtered server-side in webCartController.php), and an
   explicit red/white Add to Cart button that never wraps to a second line.
   This is that version. Mobile gets its own layout further down - adib
   provided a reference screenshot of sanamstore.net's mobile results
   (stacked rows: thumbnail+title/price on top, full-width Add to Cart
   button below) to match. */
.tt-quicksearch-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid !important;
    /* adib: back to 4 items on desktop (was 5) now that the panel width
       matches the search input's own width instead of a fixed 1100px -
       see the panel-width rule below. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 16px;
}
.tt-quicksearch-list li {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}
.tt-quicksearch-list li > a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-decoration: none;
}
.tt-quicksearch-list .thumbnail {
    flex: none;
    width: 100px;
    height: 100px;
}
.tt-quicksearch-list .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tt-quicksearch-list .tt-description {
    width: 100%;
}
.tt-quicksearch-list .tt-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    font-size: 13px;
    /* adib: "keep title of item not bold" - explicit normal weight so it
       doesn't inherit any bold from elsewhere; only the price stays bold. */
    font-weight: 400;
    line-height: 1.35;
    min-height: 2.7em;
    color: #191919;
    text-align: center !important;
}
.tt-quicksearch-list .tt-price {
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
    text-align: center !important;
}
/* adib: "the search result window width keep same as width of search input
   field" - so instead of forcing a fixed px width (1100px, then 900px
   before that - both of which were really just guesses at a size that
   looked reasonable), the panel now simply follows the theme's own native
   "width: 100%" rule, which resolves to the same width as the search
   input/form it sits under. No override needed here at all - removing our
   old width:1100px !important is the fix. Paired with going back to 4
   columns above, so cards still get comfortable room at this narrower
   width. */
@media (min-width: 1025px) {
    /* adib: "increase the weight of search input field", and (established
       last round) "weight of result to be same weight of input" - bumped
       further from 600 to 700 (adib asked to increase it again) and kept
       the title matching. Scoped to desktop only, as in the previous round;
       mobile input/title weights are untouched (title stays 400 there). */
    #search_keyname.tt-search-input {
        font-weight: 700;
    }
    .tt-quicksearch-list .tt-title {
        font-weight: 700;
    }
    /* Search by image (2026-08-21): leaves room for .tt-btn-image-search,
       which now sits right after this input inside the same .tt-col.
       Desktop-scoped separately from the mobile width rule above (which
       also has to leave room for the gap toward the close button's own,
       different .tt-col) since the two viewports' layouts aren't the same
       shape. box-sizing: border-box for the same reason as the mobile
       rule - so this `width` is the actual final rendered size rather
       than content-box adding the theme's own padding/border on top.
       40px was exactly the button's own reserved footprint (34px wide +
       6px from the container's right edge, see .tt-btn-image-search's
       `right` below) with nothing left over, so the input's text and the
       button sat flush against each other with no visible gap - adib
       flagged this (2026-08-21, UI polish round), fixed by bumping to 48px
       so the input's right edge sat 8px clear of the button. Bumped again
       (twice) the same round as the button's own size changed - 64px when
       it briefly went to 50px, then settled at 56px for its final 42px
       size (42px wide + 6px offset = 48px, +8px gap = 56px). */
    #search_keyname.tt-search-input {
        box-sizing: border-box !important;
        width: calc(100% - 56px) !important;
    }
}
/* margin-top: auto pins this to the bottom of the card regardless of how
   many lines the title/price above it took - without this, a card with a
   1-line title and no discount price sits shorter than a card with a
   2-line title and an old-price line, so their Add to Cart buttons land at
   different heights across the row. adib: "keep add to cart in same line
   for all items". Needs the <li> to actually stretch to the grid row's
   full height for margin-top:auto to have room to push into - CSS Grid's
   default align-items:stretch on the row already does this, height:100%
   on the <li> above makes it explicit. */
.tt-quicksearch-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: auto;
    padding-top: 10px;
}
.tt-quicksearch-response {
    width: 100%;
    font-size: 10px;
    text-align: center;
}
/* Add to Cart / Details button. adib: explicit red background + white text,
   and the label should never wrap onto a second line ("add to cart always
   should be in same line") - white-space:nowrap plus a comfortable min-width
   keeps "ADD TO CART" on one line even in the narrower mobile/tablet
   columns below. */
a.tt-quicksearch-addtocart,
span.tt-quicksearch-addtocart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.tt-quicksearch-addtocart.addtocartsingle,
a.tt-quicksearch-addtocart.tt-btn-details {
    background: #d80e15 !important;
    color: #fff !important;
    cursor: pointer;
}
a.tt-quicksearch-addtocart.addtocartsingle:hover,
a.tt-quicksearch-addtocart.tt-btn-details:hover {
    opacity: .9;
    color: #fff;
    text-decoration: none;
}
/* "View all products" - theme-native button (#viewallsearchresult, always
   present below the results, previously unstyled plain text). adib asked
   for it to read as a full-width button under the results.
   adib (next round): "view all product button display after search result
   (auto complete) shows" - the button used to be visible as soon as the
   dropdown panel opened (on focus/first keystroke), well before any
   results existed - for a good part of a second it floated there alone
   above an empty/"Loading..." list. Hidden by default now; gulfweb.js adds
   .tt-view-all-visible only once the autocomplete response actually
   contains result items. */
.search-results .tt-view-all {
    display: none;
    width: 100%;
    padding: 12px !important;
    margin-top: 18px !important;
    border: none !important;
    border-radius: 6px;
    background: #d80e15 !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}
.search-results .tt-view-all.tt-view-all-visible {
    display: block;
}
.search-results .tt-view-all:hover {
    opacity: .9;
}
/* Fewer columns as the dropdown narrows, so cards never get squeezed back
   down to theme-original widths. */
@media (min-width: 481px) and (max-width: 1024px) {
    .tt-quicksearch-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Mobile (adib, 2026-08-20): stacked rows matching the sanamstore.net
   reference screenshot he sent - thumbnail + title/price side by side on
   top, a full-width Add to Cart button below, one result per row down the
   page (not a multi-column grid at this width). */
@media (max-width: 480px) {
    .search-results:has(.tt-quicksearch-list) {
        width: 100% !important;
    }
    .tt-quicksearch-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .tt-quicksearch-list li {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 10px;
    }
    .tt-quicksearch-list li > a {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }
    .tt-quicksearch-list .thumbnail {
        width: 64px;
        height: 64px;
    }
    .tt-quicksearch-list .tt-title,
    .tt-quicksearch-list .tt-price {
        text-align: left !important;
    }
    .tt-quicksearch-action {
        margin-top: 10px;
    }
    /* adib: "keep text add to cart in center" - the button already centers
       its own text via justify-content, but hardening this explicitly in
       case the surrounding li/a's left-alignment (used for the
       thumbnail+title row above) was leaking into it. */
    .tt-quicksearch-action .tt-quicksearch-addtocart {
        text-align: center !important;
        justify-content: center !important;
    }
    /* adib: "in mobile add round box for x button" - the theme's own clear/
       close button (#close_btn / .tt-btn-close), shown only when the mobile
       search panel is actively open (that show/hide timing is the theme's
       own and is left untouched here - only its shape/color/icon are set,
       not its `display`, so this has no effect until the theme already
       shows it).

       adib (next round): "change style of X button it does not look good,
       use new round icon for X button" - the button's icon was the theme's
       own icon-font glyph (class icon-g-80, font "wokiee", the private-use
       character U+EA0F), which rendered as a very thin, faint "x" that was
       hard to see against the gray circle. Replaced it with a crisp inline
       SVG (two rotated lines, rounded caps, dark gray #555) set as a
       background-image on the button itself, sized/centered explicitly -
       looks the same on every device regardless of whether the icon font
       has finished loading, unlike the old font-glyph approach. The
       ::before rule that drew the old glyph is neutralized with
       `content: none` rather than deleted, since `.icon-g-80::before` is a
       theme rule this project doesn't own and could change independently. */
    .tt-btn-close {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background-color: #f0f0f0 !important;
        border: 1px solid #e2e2e2 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
        padding: 0 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M1 1L13 13M13 1L1 13' stroke='%23555555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 13px 13px !important;
    }
    .tt-btn-close::before {
        content: none !important;
    }
    /* adib: "extend input search text field a little bit more, there is a
       gap between search input and X button" - measured live: the <input>
       itself had no CSS width at all (only its wrapping .tt-col div did,
       155px), so the browser fell back to its intrinsic default width
       (~115px) and left ~40px of dead space between the input's right edge
       and the close button. Filling the wrapper (minus a small, deliberate
       10px gap so the input's border doesn't touch the button) closes that
       gap down to something intentional-looking rather than accidental.

       Widened further (2026-08-21, image search) to also leave room for
       the new .tt-btn-image-search camera button, which now lives inside
       the SAME .tt-col as this input (the close button above is a
       different, second .tt-col) - box-sizing: border-box makes this
       `width` the actual final rendered size instead of content-box's
       "width plus whatever padding/border get added on top" (measured
       live on desktop: a declared width of 654.656px was actually
       rendering at 717px before this, all from the theme's own 50px+10px
       padding and 1px+1px border - border-box removes that guesswork). */
    #search_keyname.tt-search-input {
        box-sizing: border-box !important;
        width: calc(100% - 50px) !important;
    }
    /* adib: "when result window appears it should cover and be on top -
       no other elements like floating whatsapp or next/previous icon (on
       homepage slideshow) should cover this window". Checked live on a
       genuine mobile viewport (finally possible this round): the floating
       WhatsApp button (.float, position:fixed) sits at z-index:100, while
       .search-results was only z-index:9 (the theme's own value) - so on
       any page where the dropdown's rendered height reaches down to where
       that button floats, the button won and visually sat on top of the
       results (confirmed by screenshot: the WhatsApp bubble covering a
       card's Add to Cart button).
       First attempt (raising only .search-results's own z-index) turned
       out not to be enough: on the real mobile markup (which lives in
       .tt-mobile-parent-search - a container that had looked permanently
       empty in every earlier round's testing, but is actually populated on
       a genuine phone), .search-results sits inside .tt-dropdown-menu,
       which is itself `position: absolute; z-index: 3` - that makes
       .tt-dropdown-menu its own stacking context, so anything inside it
       (including .search-results at z-index 999999) only competes within
       that context, never directly against page-level elements like the
       WhatsApp button. .tt-dropdown-menu's own z-index is what actually
       needs to beat 100 at the page level. Raising both here to be safe.

       BUG (found next round): this was originally unconditional - applying
       the instant the media query matched, not only while search was
       actually open. .tt-dropdown-menu turns out to sit in the DOM (and
       overlap on screen) at all times, including before search is opened,
       so cranking its z-index unconditionally put it - invisibly, since it
       has no visible content while closed - on top of the header's own
       search-toggle icon, silently swallowing every tap on it. Scoped to
       `body.tt-open-search` (the class the theme itself adds once the
       search panel is actually opened - confirmed by inspecting the live
       DOM) so the boosted z-index only exists once search is genuinely
       active, never before the toggle has already been tapped. */
    body.tt-open-search .tt-dropdown-menu,
    body.tt-open-search .search-results {
        z-index: 999999 !important;
    }
    /* adib: "when result window appears... scroll down to see the result,
       window search is disappearing" - confirmed from a screen recording of
       the live site. Root cause: .search-results had no max-height/overflow
       of its own, so once there were more results than fit in the viewport,
       the ONLY way to see the rest was to scroll the actual page - and
       scrolling the page far enough to bring the lower results into view
       also scrolled the search input itself off-screen. On mobile Chrome,
       scrolling a focused text input out of view blurs it to reclaim the
       space taken by the keyboard, and bundle.js closes the whole dropdown
       on that same blur event (the pre-existing behavior already noted
       above, and the same one the Add to Cart button had to work around
       with preventDefault on mousedown). So "scroll to see more results"
       was blurring the input as a side effect, which closed the dropdown
       out from under the results the user was trying to scroll to.

       Fix: give the results panel its own capped height and internal
       scrollbar instead of letting it grow the page. The panel stays
       absolutely positioned right where it already was (unchanged), but
       now the user's scroll gesture is consumed by the panel itself once
       their finger is over it - the page underneath never needs to move,
       so the input never leaves the viewport and never blurs.
       overscroll-behavior: contain stops the classic "scroll chaining" bug
       where reaching the bottom of an inner scrollable box hands the rest
       of the drag off to the page - without it, this fix would only work
       until the user reached the last result, then hit the exact same
       bug again. Verified live: scrolling the panel to its own bottom no
       longer moves window.scrollY and body.tt-open-search stays on the
       whole time (see the project doc for the full interaction test). */
    body.tt-open-search .search-results {
        max-height: 65vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}
/* adib: "add a border on search box" in both desktop and mobile - the
   input had a theme-default border already (confirmed applying via
   computed style, unlike the panel-width bug above), but it was a very
   faint #e9e7e7 that's easy to miss. This makes it an explicit, consistent,
   !important-hardened border across every viewport rather than relying on
   the theme's own value. */
#search_keyname.tt-search-input {
    border: 1px solid #d0d0d0 !important;
}
/* adib: "add light gray border in search window result" - the dropdown
   panel itself (not just the input) gets the same light gray border, plus
   a small radius so it reads as one connected card under the input. */
.search-results {
    border: 1px solid #d0d0d0 !important;
    border-radius: 6px;
}
/* adib: "hide the search icon button as search is autocomplete and there
   is no need to click on search" - #search_btns is the magnifying-glass
   submit button next to the header search input. It was already hidden by
   the theme's own desktop CSS, but this makes sure it stays hidden on
   mobile too (and stays hidden even if the theme's CSS changes later).
   Pressing Enter in the input still submits the form as a fallback - only
   the visible icon button is removed, not the form's submit capability. */
#search_btns.tt-btn-search {
    display: none !important;
}

/* Search by image (2026-08-21) - App\Services\ImageSearch /
   webController::imageSearch() on the backend, .tt-btn-image-search /
   .tt-image-search-file/.tt-image-search-form in the header blade,
   gulfweb.js wires the click-to-open-file-picker + submit-on-change.

   Flows in normal document flow right after the input (both #search_keyname
   width rules above were widened to leave room for this) rather than
   trying to reproduce the theme's own #search_btns absolute-overlay
   trick - that button's position was tuned for its own now-unused glyph
   against a containing block (#topsearchform1) this project doesn't
   otherwise touch, and is `display:none` today anyway. Same custom-SVG
   pattern as .tt-btn-close (ninth round) rather than the theme's icon
   font, for the same reason: crisp regardless of whether/how that font
   has loaded. */
.tt-btn-image-search {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin-left: 6px;
    padding: 0 !important;
    border-radius: 50% !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #d0d0d0 !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 17px 17px !important;
}
.tt-btn-image-search:hover {
    background-color: #ececec !important;
}
/* Desktop compact-theme search: .tt-col is display:inline there (reset by
   the theme's own "all: unset" rule on
   .header-compact .tt-desctop-parent-search .tt-col), so an inline-flex
   button just wraps onto its own line below the full-width search input
   instead of sitting in the input's reserved 40px gap (see the
   #search_keyname width rule further down). Taking it out of flow and
   anchoring it to .container - which the theme already makes
   position:relative - puts it back inside that gap, vertically centered,
   regardless of the wrap. Scoped to the desktop widget only; the mobile
   clone's .tt-col keeps its own (non-reset) layout and doesn't need this. */
.header-compact .tt-desctop-parent-search .tt-btn-image-search {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 6px !important;
    margin: auto 0 !important;
}
/* adib: "make search icon a bit bigger (same height as of input search
   field) and make it color not gray" (2026-08-21, desktop only), then
   "looks good now just a bit smaller" once 50px (the input's full height)
   was live - settled on 42px, between the original 34px and that first
   attempt. Brand red (#d80e15, the same red used for Add to Cart/prices
   site-wide) instead of the gray fill+gray-stroke-icon combination, with
   the icon itself switched to white so it stays visible against it.
   Widened the input's own reserved-gap rule below to match this button's
   footprint - it was sized for the original 34px button. Mobile keeps the
   original 34px gray button (the base .tt-btn-image-search rule above)
   since this was scoped to desktop only. */
@media (min-width: 1025px) {
    .header-compact .tt-desctop-parent-search .tt-btn-image-search {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        background-color: #d80e15 !important;
        border-color: #d80e15 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") !important;
        background-size: 19px 19px !important;
    }
    .header-compact .tt-desctop-parent-search .tt-btn-image-search:hover {
        background-color: #b80c12 !important;
        border-color: #b80c12 !important;
    }
}
/* Hides the actual file input - opened only via .tt-btn-image-search's
   click handler in gulfweb.js (input.trigger('click')), never shown
   itself. Kept a real, focusable, in-DOM element (not display:none)
   isn't required here since JS always drives it, so plain display:none is
   fine and simplest. */
.tt-image-search-file {
    display: none !important;
}

/* Full-page loading state shown the instant a photo is picked (gulfweb.js
   adds .is-visible) - Gemini's describe-the-photo call plus the page
   navigation to /search takes a second or two, and a blank/frozen-looking
   screen for that long reads as broken. Lives once outside .tt-search (see
   the header blade comment) so bundle.js's desktop->mobile clone never
   duplicates it. */
.tt-image-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(255, 255, 255, 0.92);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.tt-image-search-overlay.is-visible {
    display: flex;
}
/* Text/spinner bumped up (2026-08-21, UI polish round) - adib flagged the
   original ("Search...", reusing the generic search_txt string, at a plain
   15px gray) as not clear enough that something is actively happening.
   Bigger, bolder, darker text plus a bigger/thicker spinner read more
   clearly as "in progress" at a glance. */
.tt-image-search-overlay p {
    margin: 0;
    color: #333;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    max-width: 80vw;
}
.tt-image-search-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 5px solid #e2e2e2;
    border-top-color: #d80e15;
    animation: tt-image-search-spin 0.8s linear infinite;
}
@keyframes tt-image-search-spin {
    to {
        transform: rotate(360deg);
    }
}