/* ============================================================
   Custom CSS - shaper_helixultimate
   (This file is loaded automatically by the template index.php)
   ============================================================ */

/* ------------------------------------------------------------
   Font: Vazirmatn (Variable, weight 100-900)
   File: templates/shaper_helixultimate/fonts/Vazirmatn-VariableFont_wght.ttf
   ------------------------------------------------------------ */
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-VariableFont_wght.ttf') format('truetype-variations'),
	     url('../fonts/Vazirmatn-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Apply site-wide (body) */
body {
	font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
}
#sp-main-body{
    padding: 25px 0 100px 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
}



 .tab-pane h4{
      font-size: 0.85rem;

    margin-top: 15px;
 }
 .tab-pane h4 a{
 color: #303030;
 }
 .tab-pane .ph-item-content .img-thumbnail{
      width: 100%;
    height: 300px;
    object-fit: cover;
 }

.ph-spec-group-title{
      font-size: 1rem;
}

.tab-content{
     padding: 50px 35px;
}

.phImageFullHref .img-thumbnail.ph-image-full{
     padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}
.ph-item-add-to-cart-box .ph-input-quantity{
    padding: .375rem 1.7rem 0.375rem 0;
    max-width: 3.5em;
}
/* ------------------------------------------------------------
   Header: logo / search box spacing + search icon inside box
   ------------------------------------------------------------ */

/* Bigger gap between logo and search box */
#sp-header.hu-two-rows-header .header-search-wrap {
	margin-inline-start: 45px;
}

/* Logo height (must win over template.css "height:auto" rule;
   keep this value in sync with the logo height in template settings) */
#sp-header.hu-two-rows-header #sp-logo .logo-image {
	height: 40px;
	width: auto;
}

/* Search box with inner icon (RTL: icon sits at the right edge) */
#sp-header.hu-two-rows-header .header-search-box {
	position: relative;
	display: inline-flex;
	align-items: center;
}

#sp-header.hu-two-rows-header .header-search-box .sp-module,
#sp-header.hu-two-rows-header .header-search-box form {
	margin: 0;
}

#sp-header.hu-two-rows-header .header-search-box .form-control {
	min-width: 450px;
	padding-inline-start: 46px;
	padding-inline-end: 15px;
	border-radius: 50rem;
	background-color: #f5f5f5;
}

/* The magnifier icon, positioned on the right (inline-start in RTL) */
#sp-header.hu-two-rows-header .header-search-icon {
	position: absolute;
	inset-inline-start: 15px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 17px;
	height: 17px;
	color: #8a8f98;
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#sp-header.hu-two-rows-header .header-search-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ------------------------------------------------------------
   Header: Sign-in button (guest) - icon + spacing + border
   ------------------------------------------------------------ */
#sp-header.hu-two-rows-header .header-mods .sp-module > .sp-sign-in {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px;
	border: 1px solid #d9dce1;
	border-radius: 50rem;
	background-color: #fff;
	color: #000;
	transition: background-color .2s ease, border-color .2s ease;
}

#sp-header.hu-two-rows-header .header-mods .sp-module > .sp-sign-in:hover,
#sp-header.hu-two-rows-header .header-mods .sp-module > .sp-sign-in:focus {
	border-color: #b6bcc4;
	background-color: #f8f9fa;
	color: #000;
	text-decoration: none;
}

#sp-header.hu-two-rows-header .header-mods .sp-sign-in-icon {
	display: inline-flex;
	align-items: center;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

#sp-header.hu-two-rows-header .header-mods .sp-sign-in-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Thicker icon lines: stroke outline in the same color */
#sp-header.hu-two-rows-header .header-mods .sp-sign-in-icon svg path {
	stroke: currentColor;
	stroke-width: 7;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* ------------------------------------------------------------
   Main menu: hide the dropdown arrow icon on items with children
   (covers both LTR :after and RTL :before variants)
   ------------------------------------------------------------ */
.sp-megamenu-parent > li.sp-has-child > a:before,
.sp-megamenu-parent > li.sp-has-child > a:after,
.sp-megamenu-parent > li.sp-has-child > span:before,
.sp-megamenu-parent > li.sp-has-child > span:after,
.sp-dropdown .sp-dropdown-items .sp-has-child > a:before,
.sp-dropdown .sp-dropdown-items .sp-has-child > a:after {
	content: none !important;
	display: none !important;
}

/* Main menu: bolder first item */
.sp-megamenu-parent > li:first-child > a,
.sp-megamenu-parent > li:first-child > span {
	font-weight: 700;
}

/* ------------------------------------------------------------
   Phoca Cart module - Cart icon button with dropdown items list
   ------------------------------------------------------------ */

/* Icon button */
.ph-cart-dropdown-box .ph-cart-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 10px;
	border: none;
	background-color: transparent;
	color: #333;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.ph-cart-dropdown-box .ph-cart-button:hover,
.ph-cart-dropdown-box .ph-cart-button:focus,
.ph-cart-dropdown-box .ph-cart-button.show {
	background-color: #f2f3f5;
	box-shadow: none;
	outline: none;
}

.ph-cart-dropdown-box .ph-cart-icon {
	display: inline-flex;
	align-items: center;
	font-size: 19px;
	line-height: 1;
}

.ph-cart-dropdown-box .ph-cart-icon svg {
	width: 26px;
	height: auto;
	display: block;
}

/* Items count badge */
.ph-cart-dropdown-box .ph-cart-badge {
	position: absolute;
	top: -5px;
	inset-inline-end: 2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 50rem;
	background-color: #dc3545;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

/* Hide badge when cart is empty (set by js/custom.js) */
.ph-cart-dropdown-box .ph-cart-badge.ph-cart-badge-empty {
	display: none;
}

/* Dropdown panel */
.ph-cart-dropdown-box .ph-cart-dropdown-menu {
	min-width: 460px;
	max-width: 92vw;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .14);
	overflow: hidden;
}

.ph-cart-dropdown-box .ph-cart-dropdown-inner {
	padding: 15px;
	max-height: 60vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Inner cart content (rendered by Phoca) */
.ph-cart-dropdown-box .phItemCartBox .sp-module,
.ph-cart-dropdown-box .phItemCartBox table {
	margin-bottom: 0;
}

.ph-cart-dropdown-box .phItemCartBox .btn {
	font-size: 14px;
}

/* Small screens */
@media (max-width: 575px) {
	.ph-cart-dropdown-box .ph-cart-dropdown-menu {
		position: fixed;
		inset-inline-start: 0;
		min-width: 100vw;
		max-width: 100vw;
		border-radius: 0;
	}
}







.sppb-addon-sp-slider{
  border-radius: 15px;
}

/* ------------------------------------------------------------
   Smart sticky header (two-rows header):
   - position: sticky pins the header smoothly (no jump at all,
     unlike position:fixed which snaps)
   - js/custom.js collapses/expands row 2 by scroll direction:
       scrolling down  -> row 2 collapses (only row 1 visible)
       scrolling up    -> row 2 expands back below row 1
   - .sticky-header-spacer (rendered after the header) compensates
     the collapsed height so the page content never jumps
   ------------------------------------------------------------ */
#sp-header.hu-two-rows-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Neutralize Helix own sticky (it switches the header to fixed) */
#sp-header.hu-two-rows-header.header-sticky {
	position: sticky;
	top: 0;
	animation: none;
}

/* overflow-x:hidden on this wrapper breaks position:sticky;
   overflow:clip clips the same way without breaking sticky */
.body-innerwrapper {
	overflow-x: clip;
}

/* Spacer compensating the collapsed row-2 height */
.sticky-header-spacer {
	transition: height .3s ease;
}

#sp-header.hu-two-rows-header .header-row-2 {
	transition: height .3s ease, padding .3s ease, border-top-width .3s ease;
}

/* ------------------------------------------------------------
   Phoca Cart: product scroller module - product title
   (title <h3> in html/mod_phocacart_product_scroller/default.php;
   module wrapper class: .ph-product-scroller-module-box)
   ------------------------------------------------------------ */
.ph-product-scroller-module-box h3,
.ph-product-scroller-module-box h3 a {
	line-height: 1.8rem;
	color: #333;
	font-size: 1rem;
}

/* Hide star rating in the product scroller module */
.ph-product-scroller-module-box .ph-stars-box {
	display: none;
}

/* ------------------------------------------------------------
   Phoca Cart: product scroller module - product thumbnail
   1px border, 15px radius, no extra padding/margin,
   fixed 250px height, image object-fit: cover
   .ph-thumbnail covers the WHOLE card (image + title + price +
   buttons), so the fixed height lives on the dedicated
   <a.ph-scroller-thumb> class given in default.php instead.
   ------------------------------------------------------------ */
.ph-product-scroller-module-box .ph-thumbnail,
.ph-product-scroller-module-box a.ph-scroller-thumb,
.ph-product-scroller-module-box a.ph-scroller-thumb img {
	margin: 0;
	padding: 0;
}
.phProductScrollerModuleBox .ph-item-box .ph-thumbnail-c .ph-item-content, .ph-row-flex.grid .row-item .ph-item-box .ph-thumbnail-c .ph-item-content {
    margin: 0;
    padding: 0 !important;
}
/* Thumbnail link owns the fixed height */
.ph-product-scroller-module-box a.ph-scroller-thumb {
	display: block;
	position: relative;
	height: 285px;
	margin-bottom: 15px;
	overflow: hidden;
}

.ph-product-scroller-module-box a.ph-scroller-thumb img {
	display: block;
	width: 100%;
	height: 285px;
	object-fit: cover;
	border: 1px solid #ebebeb;
	border-radius: 15px;
}

/* ------------------------------------------------------------
   Second product image on hover (fade)
   The hover image is layered exactly on top of the main one
   (default.php prints it only when the product has an
   additional image in #__phocacart_product_images).
   ------------------------------------------------------------ */
.ph-product-scroller-module-box a.ph-scroller-thumb img.ph-scroller-img-hover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility .45s ease;
}

.ph-product-scroller-module-box .ph-item-box:hover a.ph-scroller-thumb img.ph-scroller-img-hover,
.ph-product-scroller-module-box a.ph-scroller-thumb:hover img.ph-scroller-img-hover,
.ph-product-scroller-module-box a.ph-scroller-thumb:focus img.ph-scroller-img-hover {
	opacity: 1;
	visibility: visible;
}

/* ------------------------------------------------------------
   Phoca Cart: product scroller module - product title
   dedicated .ph-scroller-title class (see default.php);
   keeps its own height, never inherits the 250px image box
   ------------------------------------------------------------ */
h3.ph-scroller-title {
	min-height: 70px !important;
	overflow: hidden !important;
	text-align: right !important;
	direction: rtl !important;
	margin: 0 !important;
	padding: 0 10px f!important;
}

h3.ph-scroller-title a {
	text-align: right !important;
	direction: rtl !important;
	display: block !important;
}

/* Hide "price" and "original price" labels in the product scroller module */
.ph-product-scroller-module-box .ph-category-price-box .ph-price-original-txt,
.ph-product-scroller-module-box .ph-category-price-box .ph-price-brutto-txt {
	display: none !important;
}

/* ------------------------------------------------------------
   Phoca Cart: product scroller module - price layout
   Each price on its own line (no side-by-side), left-aligned.
   When discounted: discount price on top, original (line-through)
   price below with 30% smaller font.
   HTML order from Phoca: ph-price-original → ph-price-brutto → ph-price-discount
   We reorder with flex so discount comes first.
   ------------------------------------------------------------ */
.ph-product-scroller-module-box .ph-category-price-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.ph-product-scroller-module-box .ph-category-price-box > div {
	width: 100%;
	text-align: left;
}

/* Original price block */
.ph-product-scroller-module-box .ph-category-price-box .ph-price-original {
	display: block;
	width: 100%;
	text-align: left !important;
}

/* Standard price (no discount) - left aligned */
.ph-product-scroller-module-box .ph-category-price-box .ph-price-brutto.ph-standard {
	text-align: left !important;

}
.ph-product-scroller-module-box .ph-category-price-box {
         min-height: 46px;
    align-content: end;    place-content: end;

}

/* When discount exists, standard brutto gets ph-line-through;
   hide it only when the product also has ph-price-original (then the
   original price is shown instead). Products WITHOUT price_original
   keep the struck-through brutto visible as their original price,
   styled like .ph-price-original below. */
.ph-product-scroller-module-box .ph-category-price-box:has(.ph-price-original) .ph-price-brutto.ph-line-through {
	display: none !important;
}

.ph-product-scroller-module-box .ph-category-price-box:not(:has(.ph-price-original)) .ph-price-brutto.ph-line-through {
	display: block !important;
	width: 100%;
	font-size: 85%;
	text-decoration: line-through;
	text-align: left !important;
	padding-left: 30px;
	margin-bottom: -6px !important;
}

/* ------------------------------------------------------------
   Phoca Cart: product scroller module - price order
   Discount price ALWAYS on top, every original/struck-through
   price below it.

   Phoca renders (when a discount exists):
     - ph-price-original                      (the original block)
     - ph-price-netto / ph-price-brutto  + ph-line-through
     - ph-price-* + ph-line-through-txt       (labels)
     - ph-price-discount-product              (the discount)
   Elements with default order:0 would otherwise sit ABOVE the
   discount, so all struck/original variants get order:2.
   ------------------------------------------------------------ */
/* Original price on TOP */
.ph-product-scroller-module-box .ph-category-price-box .ph-price-original,
.ph-product-scroller-module-box .ph-category-price-box .ph-line-through,
.ph-product-scroller-module-box .ph-category-price-box .ph-line-through-txt {
	order: -1 !important;
}

/* Discount price at the BOTTOM, green, left aligned */
.ph-product-scroller-module-box .ph-category-price-box .ph-price-discount-product {
	order: 1 !important;
	text-align: left !important;
	color: #23b884 !important;
}

/* Original price: 15% smaller than the discount price, struck through */
.ph-product-scroller-module-box .ph-category-price-box .ph-price-original {
	font-size: 85%;
	text-decoration: line-through;
	text-align: left !important;
	padding-left: 30px;
        margin-bottom: -6px !important;
}

/* ------------------------------------------------------------
   Toman icon instead of the currency word
   (the word itself is stripped in default.php; the icon inherits
   the price colour via mask + currentColor)
   Shown on ONE price only:
     - no discount  -> next to .ph-price-brutto.ph-standard
     - discounted   -> next to .ph-price-discount-product
   Never on the struck-through original/original-price line.
   ------------------------------------------------------------ */
.ph-product-scroller-module-box .ph-category-price-box .ph-price-brutto.ph-standard::after,
.ph-product-scroller-module-box .ph-category-price-box .ph-price-discount-product::after {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin-inline-start: 5px;
	vertical-align: -.08em;
	background-color: currentColor;
	-webkit-mask: url('../images/toman.svg') center / contain no-repeat;
	mask: url('../images/toman.svg') center / contain no-repeat;
}

/* ------------------------------------------------------------
   Prices linked to the product
   (wrapper <a.ph-scroller-price-link> added in default.php)
   ------------------------------------------------------------ */
.ph-product-scroller-module-box a.ph-scroller-price-link {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
    padding: 0 10px;
}

/* ------------------------------------------------------------
   Discount percentage badge - bottom right corner of the card
   Rendered only for discounted products (see default.php)
   ------------------------------------------------------------ */
.ph-product-scroller-module-box .ph-scroller-discount-badge {
	position: absolute;
	bottom: 4px;
	right: 10px;
	z-index: 2;
	display: inline-block;
	padding: 2px 10px;
	border-radius: 20px;
	background: #e53935;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	direction: ltr;
	pointer-events: none;
}

.ph-product-scroller-module-box a.ph-scroller-price-link:hover,
.ph-product-scroller-module-box a.ph-scroller-price-link:focus,
.ph-product-scroller-module-box a.ph-scroller-price-link:active {
	text-decoration: none;
	color: inherit;
}

/* ============================================================
   Phoca Cart: Products View (Product list layout / items view)
   Card structure, title, price and linking mirror the product
   scroller module card:
     html/layouts/com_phocacart/items_grid.php
     html/layouts/com_phocacart/product_price.php
     html/com_phocacart/items/default.php
   ============================================================ */

/* ------------------------------------------------------------
   Card container: even heights, NO border on the card itself
   (the border + radius belongs to the image only, see below)
   ------------------------------------------------------------ */
.ph-items.grid .row-item .ph-item-box {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ph-items.grid .row-item .ph-item-box .ph-thumbnail {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	overflow: visible;
}

/* Inner content: no extra padding around image / title / price
   (the module card has none either) */
.ph-items.grid .row-item .ph-item-box .ph-thumbnail-c .ph-item-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0 !important;
}

/* ------------------------------------------------------------
   Image box - the ONLY bordered part of the card
   (1px border, 15px radius, fixed 285px height, object-fit: cover)
   The image link is <a class="ph-items-thumb"> (see items_grid.php),
   same role as <a class="ph-scroller-thumb"> in the module.
   ------------------------------------------------------------ */
.ph-items.grid .row-item a.ph-items-thumb {
	display: block;
	position: relative;
	overflow: hidden;
	height: 285px;
	margin-bottom: 15px;
	border: 1px solid #ebebeb;
	border-radius: 15px;
	background-color: #fff;
}

.ph-items.grid .row-item a.ph-items-thumb img.ph-image {
	display: block;
	width: 100%;
	height: 285px;
	object-fit: cover;
}

/* ------------------------------------------------------------
   Second product image - FADE ONLY (no Phoca slide)
   Phoca prints the switch image inside .phIRBox and slides it with
   media/com_phocacart/css/main-product-image-move.css:
     .phIBoxOH:hover .phIL / .phIR  -> transform: translate(100%, 0)
     .phIBoxOH .phIBox .phIRBox     -> left: -100%
   Those rules are neutralized here so the second image simply
   fades in exactly on top of the first one (as in the module).
   ------------------------------------------------------------ */
.ph-items.grid .row-item a.ph-items-thumb .phIBoxOH,
.ph-items.grid .row-item a.ph-items-thumb .phIBox {
	display: block;
	width: 100%;
	position: relative;
	height: 285px;
	overflow: hidden;
	line-height: 0;
	text-align: center;
}

/* Kill the slide transform (both idle and :hover states) */
.ph-items.grid .row-item a.ph-items-thumb .phIBoxOH .phIL,
.ph-items.grid .row-item a.ph-items-thumb .phIBoxOH .phIR,
.ph-items.grid .row-item a.ph-items-thumb .phIBoxOH:hover .phIL,
.ph-items.grid .row-item a.ph-items-thumb .phIBoxOH:hover .phIR {
	transform: none !important;
	transition: none !important;
	opacity: 1 !important;
}

/* Second image layered on top of the first one, fade in on hover */
.ph-items.grid .row-item a.ph-items-thumb .phIBoxOH .phIBox .phIRBox {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 285px;
	width: 100%;
	display: block;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility .45s ease !important;
}

.ph-items.grid .row-item a.ph-items-thumb .phIRBox img.ph-image {
	width: 100%;
	height: 285px;
	object-fit: cover;
}

.ph-items.grid .row-item .ph-item-box:hover a.ph-items-thumb .phIRBox,
.ph-items.grid .row-item a.ph-items-thumb:hover .phIRBox,
.ph-items.grid .row-item a.ph-items-thumb:focus .phIRBox {
	opacity: 1;
	visibility: visible;
}

/* ------------------------------------------------------------
   Hide the "View product" / "Ask a question" buttons
   (not rendered in items_grid.php; this is a safety net for
   cached/other layouts)
   ------------------------------------------------------------ */
.ph-items.grid .row-item .ph-button-view-product-box,
.ph-items.grid .row-item .ph-button-ask-question-box {
	display: none !important;
}

/* ------------------------------------------------------------
   Hide the "action icons on hover" strip
   (.ph-category-action-box-fade-icons - compare / wishlist /
   quickview / add to cart icons)
   Not rendered in items_grid.php anymore; this is a safety net
   for cached markup and for the list / gridlist layouts, where the
   bar is printed in the normal flow and only left an empty gap
   under the price.
   ------------------------------------------------------------ */
.ph-items.grid .row-item .ph-category-action-box-fade-icons,
.ph-items.grid .row-item .ph-item-action-fade,
.ph-items.grid .row-item .ph-category-action-fade-icons {
	display: none !important;
}

/* ------------------------------------------------------------
   Title - .ph-items-title (see items_grid.php), same look and
   behaviour as h3.ph-scroller-title in the module
   ------------------------------------------------------------ */
.ph-items.grid .row-item .ph-category-item-body .ph-items-title,
.ph-items.grid .row-item h3.ph-items-title {
	line-height: 1.8rem;
	color: #333;
	font-size: 1rem;
	font-weight: 700;
	min-height: 70px !important;
	overflow: hidden !important;
	text-align: right !important;
	direction: rtl !important;
	margin: 0 !important;
	padding: 0 10px !important;
}

.ph-items.grid .row-item h3.ph-items-title a {
	display: block !important;
	text-align: right !important;
	direction: rtl !important;
	color: #333;
}

.ph-items.grid .row-item h3.ph-items-title a:hover,
.ph-items.grid .row-item h3.ph-items-title a:focus {
	color: #e53935;
	text-decoration: none;
}

/* ------------------------------------------------------------
   Price box - linked with <a class="ph-items-price-link">
   (same behaviour as <a.ph-scroller-price-link> in the module)
   ------------------------------------------------------------ */
.ph-items.grid .row-item a.ph-items-price-link {
	display: block;
	position: relative;
	width: 100%;
	text-decoration: none;
	color: inherit;
	padding: 0 10px;
}

.ph-items.grid .row-item a.ph-items-price-link:hover,
.ph-items.grid .row-item a.ph-items-price-link:focus,
.ph-items.grid .row-item a.ph-items-price-link:active {
	text-decoration: none;
	color: inherit;
}

/* Prices stacked in one column, pinned to the LEFT side of the card
   (same as the module: align-items/ text-align: left) */
.ph-items.grid .row-item .ph-category-price-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	min-height: 46px;
	align-content: end;
	place-content: end;
}

.ph-items.grid .row-item .ph-category-price-box > div {
	width: 100%;
	text-align: left;
}

/* Hide "price" / "original price" labels (as in the module) */
.ph-items.grid .row-item .ph-category-price-box .ph-price-original-txt,
.ph-items.grid .row-item .ph-category-price-box .ph-price-brutto-txt,
.ph-items.grid .row-item .ph-category-price-box .ph-price-netto-txt {
	display: none !important;
}

/* Struck-through price on TOP, discount price BELOW it */
.ph-items.grid .row-item .ph-category-price-box .ph-price-original,
.ph-items.grid .row-item .ph-category-price-box .ph-line-through,
.ph-items.grid .row-item .ph-category-price-box .ph-line-through-txt {
	order: -1 !important;
}

.ph-items.grid .row-item .ph-category-price-box .ph-price-original {
	display: block;
	width: 100%;
	font-size: 85%;
	text-decoration: line-through;
	text-align: left !important;
	padding-left: 30px;
	margin-bottom: -6px !important;
	color: #e53935;
}

/* Standard (non discounted) brutto price - left pinned */
.ph-items.grid .row-item .ph-category-price-box .ph-price-brutto.ph-standard {
	text-align: left !important;
}

/* The standard (non discounted) brutto price is hidden when
   ph-line-through is set AND the product has its own "original price"
   (ph-price-original) - then the original price is shown instead.
   Products WITHOUT price_original (discounted only by a discount rule,
   e.g. the iPhone 14) keep the struck-through brutto visible as their
   original price - styled exactly like .ph-price-original (red,
   smaller, struck) so the card looks the same as products that have
   price_original set. */
.ph-items.grid .row-item .ph-category-price-box:has(.ph-price-original) .ph-price-brutto.ph-line-through {
	display: none !important;
}

.ph-items.grid .row-item .ph-category-price-box:not(:has(.ph-price-original)) .ph-price-brutto.ph-line-through {
	display: block !important;
	width: 100%;
	font-size: 85%;
	text-decoration: line-through;
	text-align: left !important;
	padding-left: 30px;
	margin-bottom: -6px !important;
	color: #e53935;
}

/* Discount price at the BOTTOM, left pinned */
.ph-items.grid .row-item .ph-category-price-box .ph-price-discount-product {
	order: 1 !important;
	text-align: left !important;
	color: #23b884 !important;
}

/* ------------------------------------------------------------
   Toman icon instead of the currency word
   (the currency word is stripped in
   html/layouts/com_phocacart/product_price.php; the icon inherits
   the price colour through mask + currentColor)
   Shown on ONE price only:
     - no discount  -> next to .ph-price-brutto.ph-standard
     - discounted   -> next to .ph-price-discount-product
   ------------------------------------------------------------ */
.ph-items.grid .row-item .ph-category-price-box .ph-price-brutto.ph-standard::after,
.ph-items.grid .row-item .ph-category-price-box .ph-price-discount-product::after {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin-inline-start: 5px;
	vertical-align: -.08em;
	background-color: currentColor;
	-webkit-mask: url('../images/toman.svg') center / contain no-repeat;
	mask: url('../images/toman.svg') center / contain no-repeat;
}

/* ------------------------------------------------------------
   Rating badge - ONE star + the numeric rating, pinned to the
   top LEFT corner of the product image (see items_grid.php).
   Icon: images/star-small1.svg - a 16x32 sprite whose top half
   is the filled yellow star, so only the top half is shown.
   ------------------------------------------------------------ */
.ph-items.grid .row-item a.ph-items-thumb .ph-items-rating-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px 2px 6px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
	color: #333;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	direction: ltr;
	pointer-events: none;
}

.ph-items.grid .row-item a.ph-items-thumb .ph-items-rating-star {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background-image: url('../images/star-small1.svg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 200%;
}

/* The 5-star box is not used anymore in this view */
.ph-items.grid .row-item .ph-stars-box {
	display: none !important;
}

/* ------------------------------------------------------------
   Discount percentage badge - bottom right corner of the card
   (rendered only for discounted products, see items_grid.php)
   ------------------------------------------------------------ */
.ph-items.grid .row-item .ph-items-discount-badge {
	position: absolute;
	bottom: 4px;
	right: 10px;
	z-index: 2;
	display: inline-block;
	padding: 2px 10px;
	border-radius: 20px;
	background: #e53935;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	direction: ltr;
	pointer-events: none;
}

/* Price box keeps its room even when the badge is rendered */
.ph-items.grid .row-item a.ph-items-price-link .ph-category-price-box {
	padding-bottom: 2px;
}

/* In the GRID layout the percent is already shown by the corner badge
   (.ph-items-discount-badge, bottom right) - hide the inline percent
   badge the price layout prints next to the final price, so the percent
   is not displayed twice. (List / gridlist layouts have no corner badge,
   there the inline badge stays.) */
.ph-items.grid .row-item .ph-category-price-box .ph-item-discount-percent-badge {
	display: none !important;
}

/* ------------------------------------------------------------
   Add to cart - ICON ONLY, overlaid on the bottom LEFT corner of
   the product image
   ------------------------------------------------------------
   The label ("افزودن به سبد خرید") is no longer printed - see the
   template override
   html/layouts/com_phocacart/button_add_to_cart_list.php.

   The button must stay inside its <form> so that submitting still
   works, so it cannot be moved next to the image in the markup.
   Instead the button box is taken out of the flow and anchored to
   .ph-item-content, whose FIRST child is the image itself (and
   whose padding is 0 - see above), so:
       top: 285px              -> the bottom edge of the image
       translateY(-100% -12px) -> 12px above it, i.e. inside the
                                  image, at its bottom left
   ------------------------------------------------------------ */
.ph-items.grid .row-item .ph-item-content {
	position: relative;
}

/* The wrapper BETWEEN the button and .ph-item-content must not be a
   positioning context, otherwise it becomes the offset parent and
   `top: 285px` is measured from the price area instead of the image.
   Phoca sets position:relative here in
   media/com_phocacart/css/main-product-hover.css (".ph-item-box
   .ph-item-action-box"). Nothing inside it relies on that: the
   discount badge is positioned by the (still relative) price link. */
.ph-items.grid .row-item .ph-item-action-box.ph-category-action-box-buttons {
	position: static;
}

/* Phoca adds `margin-top: 2em` to .ph-category-action-buttons
   (media/com_phocacart/css/main.css). Inside the cards that wrapper only
   holds the add to cart form/button, and the button itself is taken out of
   the flow and drawn over the image (rule above), so the margin just pushed
   an empty gap of 2em between the price and the bottom of the card. */
.ph-items.grid .row-item .ph-category-action-buttons {
	margin-top: 0 !important;
}

.ph-items.grid .row-item .ph-button-add-to-cart-box {
	position: absolute;
	top: 285px;
	left: 12px;
	transform: translateY(calc(-100% - 12px));
	z-index: 3;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}

.ph-items.grid .row-item .ph-button-add-to-cart-box .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 0;
    padding: 0 !important;
    margin: 0;
    border: 0;
    border-radius: 50%;
    line-height: 1;
    font-size: 0;
    box-shadow: 0 0px 3px rgba(0, 0, 0, .15);
    transition: transform .2s ease, box-shadow .2s ease;
    background: #fff;
    color: #333;
}

.ph-items.grid .row-item .ph-button-add-to-cart-box .btn:hover,
.ph-items.grid .row-item .ph-button-add-to-cart-box .btn:focus {
	transform: scale(1.08);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* The shopping cart SVG - explicit size, because font-size is 0 above */
.ph-items.grid .row-item .ph-button-add-to-cart-box .btn .pc-si {
	width: 20px;
	height: 20px;
	font-size: 20px;
	fill: currentColor;
}

/* ============================================================
   Phoca Cart: Products View - filter sidebar and product grid
   ------------------------------------------------------------
   1) In the Helix layout the component column comes first and the
      sp-right sidebar last, so in RTL the filters are rendered on
      the LEFT. The flex order is swapped here: the filters sit on
      the RIGHT and the products fill the remaining width.
   2) The sidebar width is pinned to exactly 300px on every
      breakpoint - it must not grow or shrink with the viewport.
   3) The product grid shows 4 products per row instead of 3.

   Rules 1-2 only apply on pages where a module is really published
   in the sidebar (:has selector), so empty sidebar columns on other
   pages keep their normal behaviour.
   ============================================================ */

#sp-main-body .row:has(> aside#sp-right .sp-module) {
	flex-wrap: nowrap;
}

/* Products column: fills everything next to the 300px sidebar */
#sp-main-body .row:has(> aside#sp-right .sp-module) > #sp-component {
	flex: 1 1 auto;
	width: auto;
	max-width: 100%;
	min-width: 0;
}

/* Filter sidebar: right side (RTL inline-start), always 300px */
#sp-main-body .row:has(> aside#sp-right .sp-module) > aside#sp-right {
	flex: 0 0 300px;
	width: 300px;
	max-width: 300px;
	order: -1;
}

/* ------------------------------------------------------------
   Product grid: 4 columns per row (lg and up) instead of 3
   ------------------------------------------------------------ */
@media (min-width: 992px) {
	.ph-items.grid .row-item {
		flex: 0 0 25%;
		width: 25%;
		max-width: 25%;
	}
}

/* Phoca inserts a "clear" div after every N products. In a flex row
   these divs become full-width flex items (Bootstrap `.row > *`
   sets width:100%) and would force a line break after every 3rd
   product, breaking the 4-column grid. They are not needed in the
   flex grid, so they are neutralized here. */
.ph-items.grid .ph-row-flex.grid > .ph-cb {
	display: none;
}

/* ============================================================
   Phoca Cart: "display layout" switcher of the product list
   (grid / gridlist / list buttons in #phItemTopBoxForm)
   ------------------------------------------------------------
   Phoca centres the content of every .ph-pag-top-row
   (media/com_phocacart/css/main.css:
   "#phItemTopBoxForm .ph-pag-top-row { justify-content: center }"),
   which pushed the three buttons into the middle of their column.
   Here they are pushed to the LEFT edge (RTL: flex-end) so they line
   up with the left edge of the product cards below, and restyled as
   flat white buttons with a dark icon - only the active one keeps a
   light grey background.
   ============================================================ */
#phItemTopBoxForm .ph-pag-top-row:has(.phItemSwitchLayoutType) {
	justify-content: flex-end; /* RTL: left edge, above the product grid */
	gap: 8px;                  /* space between the buttons (was 0.2em) */
	/* Phoca sets padding-left/right: 5px on this row, while the product
	   columns use Bootstrap's gutter (.row { --bs-gutter-x: 1.875rem } ->
	   15px a side). Giving the group the same left padding makes its left
	   edge line up exactly with the left edge of the product cards. */
	padding-left: calc(var(--bs-gutter-x, 1.875rem) / 2);
}

#phItemTopBoxForm .btn.phItemSwitchLayoutType,
#phItemTopBoxForm .btn.phItemSwitchLayoutType:hover,
#phItemTopBoxForm .btn.phItemSwitchLayoutType:focus,
#phItemTopBoxForm .btn.phItemSwitchLayoutType:active,
#phItemTopBoxForm .btn.phItemSwitchLayoutType:visited {
	margin: 0;                 /* the flex gap above replaces the 0.1em margins */
	padding: 6px 7px;
	line-height: 1;
	border-color: #fff !important;
	background-color: #fff !important;
	color: #333 !important;    /* .pc-si fills/strokes with currentColor */
	box-shadow: none !important;
}

#phItemTopBoxForm .btn.phItemSwitchLayoutType.active,
#phItemTopBoxForm .btn.phItemSwitchLayoutType.active:hover,
#phItemTopBoxForm .btn.phItemSwitchLayoutType.active:focus,
#phItemTopBoxForm .btn.phItemSwitchLayoutType.active:active {
	background-color: #f5f5f5 !important;
	color: #333 !important;
}

/* ============================================================
   Phoca Cart: collapsible panels of the sidebar filter
   (.ph-filter-box > #phFilterBox > .panel.panel-default)
   ------------------------------------------------------------
   Each panel is: .panel-heading > h4.panel-title with TWO anchors:
     a.panel-collapse (> svg.pc-si, the toggle icon) + a.panel-collapse (title)
   The icon anchor is hidden (the sprite symbol used here only draws a
   "+"/"-" line) and replaced by a small chevron drawn on the heading row
   (.panel-title::after) which always sits at the far left end of the
   title (RTL) because the row is space-between. Panels are separated by
   a 1px #f1f1f1 border.
   ============================================================ */
.ph-filter-box .panel + .panel {
	border-top: 0;                    /* Bootstrap:.panel+.panel{margin-top:-1px} */
	border-bottom: 1px solid #f1f1f1; /* separator between two sections */
}

.ph-filter-box .panel:first-child {
	border-top: 1px solid #f1f1f1;
}
#phPriceFilterRange.ui-widget.ui-widget-content{
      height: 5px;
}
#phPriceFilterRange .ui-widget-header {
    background: #ef314c;
}
#phPriceFilterRange.ui-slider-horizontal .ui-slider-handle {

    background: #ef324d;
    width: 1em;
    height: 1em;
}
#phPriceFilterRange.ui-slider-horizontal .ui-slider-handle:hover {

    background: #ef324d;
    border: 3px solid #9a2323;

}
/* hide the "+" / "-" toggle, keep its link clickable to avoid layout shift */
.ph-filter-box .panel-title > a.panel-collapse:first-child {
	position: absolute;
	width: 1px;
	height: 1px;

	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;

}
#phFilterBox .panel-body {
    padding: 5px 0 20px 0;
}
 #phFilterBox .panel-body .controls {
    margin-bottom: 10px;
}
#sp-left .sp-module, #sp-right .sp-module {
    padding: 30px 20px;order-radius: 10px;}
.phSelectBoxButton{
 border-radius: 30px;    width: 8px;
    height: 8px;
}
 .ph-checkout-checkbox-confirm input[type="checkbox"], .ph-checkbox-container input[type="checkbox"] {
    margin-right: auto;
    margin-left: 0.3em;

}
.ph-filter-box .panel-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	font-size: 1rem;      /* ← requested size */
	color: #333;          /* ← requested colour */
	font-weight: 500;
       padding: 10px 0;
}

/* the title link fills the row so the chevron below can sit at its end */
.ph-filter-box .panel-title > a.panel-collapse:not(:first-child) {
	flex: 1 1 auto;
	color: inherit;
	font-size: inherit;
	text-decoration: none;
	text-align: right;   /* RTL: title stays on the right, near its section items */
}

/* small down chevron, opposite side of the title (RTL: left).
   It is a flex item of .panel-title (which is space-between), so it
   always sits at the far left end of the heading row. */
.ph-filter-box .panel-title::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-left: 2px;
	border-right: 1.5px solid #333;
	border-bottom: 1.5px solid #333;
	transform: rotate(45deg) translate(-2px, -2px);
}



.com-phocacart.view-item #sp-right{
display: none;
}


/* ============================================================
   Product page (com_phocacart, view=item) - BLOCK LAYOUT
   Markup created in html/com_phocacart/item/default.php:

     .row                               image column + data box
       #phImageBox           BLOCK 1   right (RTL): image gallery
       .ph-item-view-data-box
         .ph-item-view-title-row        TITLE - spans both blocks below
         form.ph-item-main-form
           .ph-item-view-blocks         CSS grid
             .ph-item-view-middle-box   BLOCK 2  middle: short desc / brand / attributes
             .ph-item-view-price-box    BLOCK 3  left: price / stock / cart / discount %

   The add to cart <form> wraps BOTH blocks, because Phoca's attribute
   script uses jQuery('.phjProductAttribute').closest('form') and the
   attribute selects really have to live inside the form.
   ============================================================ */

/* --- the two blocks: CSS grid --- */
.ph-item-view-blocks {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/* In RTL the first grid column is the right one, so the first DOM child
   (the middle block) lands next to the gallery and the price block goes to
   the far left - the requested order, without touching the DOM order. */


.ph-item-view-price-box {
	min-width: 0;
	box-sizing: border-box;
	padding: 18px;
	border-radius: 10px;
	background: #f7f7f7;
}
.ph-item-view-middle-box {
	min-width: 0;
	box-sizing: border-box;
	padding: 18px;
	border-radius: 10px;
 border: 1px solid #e4e4e4;
    background: #fff;
}
/* --- TITLE row --- */
.ph-item-view-title-row {
	margin-bottom: 18px;
}

.ph-item-view-title-box .ph-header {
	margin: 0;       font-size: 1.2rem !important;
}

/* --- the add to cart form must not affect the grid ---
   Phoca has `.ph-item-price-panel form { display: inline; }`; the form now
   wraps two grid blocks, so it has to be a block again. */
.ph-item-main-form {
	display: block;
}

/* --- restore the float clearfix inside the cart form ---
   The component CSS has `.phItemCartBoxForm .ph-cb { display: none; }`.
   The manufacturer / stock / SKU / price rows are float based, so with the
   clearfix hidden they collapse to 0 height and overlap each other.
   Scoped to the product detail view so the product grids are unaffected. */
.pc-item-view .phItemCartBoxForm .ph-cb {
	display: block;
}

/* The manufacturer row floats its label and value inside the box, while its
   clearfix div sits AFTER the box - so the box itself collapses to 0 height
   and the following content overlaps it. Give the box its own clearfix. */
.ph-item-manufacturer-box::after {
	content: "";
	display: block;
	clear: both;
}

/* --- BLOCK 3: discount percent badge ---
   Rendered INSIDE the final (last discounted) price line by the
   product_price layout override - a small rectangular badge with the
   red background, pinned to the RIGHT EDGE of the price box, at the
   level of the final price line (RTL). The percent value is computed
   in html/layouts/com_phocacart/product_price.php. */
.pc-item-view .ph-item-price-box {
	position: relative;
}

.ph-item-discount-percent-badge {
	display: inline-block;
	background: #ef334c;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 4px;
	white-space: nowrap;
}
.ph-item-stock-box .ph-stock-txt,.ph-item-stock-box .ph-stock {
  margin-top:20px;
}

/* stick the badge to the right edge of the price box, on the line of
   the final price (the last price div has margin-bottom: 6px) */
.pc-item-view .ph-item-price-box .ph-item-discount-percent-badge {
	position: absolute;
	right: 0;
	bottom: 6px;
	margin: 0;
}

/* hide the "تعداد:" label next to the quantity input (item view) */
.pc-item-view .ph-item-add-to-cart-box .ph-form-quantity label {
	display: none !important;
}

/* ------------------------------------------------------------
   Add to cart row: button + quantity fill the FULL box width
   (RTL: button on the right, quantity on the left). The button
   grows (flex: 1) to consume the empty space on the left.
   ------------------------------------------------------------ */
.pc-item-view .ph-item-add-to-cart-box {
	display: flex;
	align-items: stretch;
	width: 100%;
	gap: 8px;
}

/* button group on the right, growing */
.pc-item-view .ph-item-add-to-cart-box .ph-form-button {
	order: -1;
	flex: 1 1 auto;
	display: flex;
	margin: 0;
}

.pc-item-view .ph-item-add-to-cart-box .ph-form-button .btn {
	flex: 1 1 auto;
	width: 100%;
	height: auto;
	min-height: 44px;
	white-space: nowrap;
}

/* quantity group on the left, fixed width */
.pc-item-view .ph-item-add-to-cart-box .ph-form-quantity {
	order: 0;
	flex: 0 0 auto;
	margin: 0;
}

.pc-item-view .ph-item-add-to-cart-box .ph-form-quantity .bootstrap-touchspin,
.pc-item-view .ph-item-add-to-cart-box .ph-form-quantity .input-group {
	height: 100%;
}

.pc-item-view .ph-item-add-to-cart-box .ph-form-quantity .ph-input-quantity {
	height: 100%;
	width: 3.2em;
	max-width: none;
	text-align: center;
}

/* ============================================================
   Item view - product tabs (#PcItemTab)
   - equal widths across the page (flex, one share per tab)
   - black text in every state
   - comfortable padding inside each tab
   - active / hover tab marked with the theme orange underline
   ============================================================ */
.pc-item-view #PcItemTab {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #dee2e6;
}

.pc-item-view #PcItemTab .nav-item {
	flex: 1 1 0;
	min-width: 0;
}

.pc-item-view #PcItemTab .nav-link {
	display: block;
	width: 100%;
	text-align: center;
	color: #000;
	padding: 12px 16px;
	margin: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
}

.pc-item-view #PcItemTab .nav-link:hover,
.pc-item-view #PcItemTab .nav-link:focus {
	color: #000;
	background: transparent;
	border-bottom-color: rgba(236, 67, 15, .4);
}

.pc-item-view #PcItemTab .nav-link.active,
.pc-item-view #PcItemTab .nav-item.show .nav-link {
	color: #000;
	font-weight: 600;
	background: transparent;
	border-bottom: 2px solid #ec430f;
	margin-bottom: -1px;
}

/* ============================================================
   Item view - breadcrumb (خانه > فروشگاه > دسته > محصول)
   Rendered in .ph-top (replaces the old "back to category"
   button), see html/com_phocacart/item/default.php.
   ============================================================ */
.pc-item-view .ph-item-breadcrumb-box {
	margin: 0 0 14px 0;
}

.pc-item-view .ph-breadcrumb-nav {
font-size: 12px;
    line-height: 1.8;
    margin-bottom: 21px;
    color: #888;
    padding-right: 8px;
}
.com-phocacart.view-item #sp-main-body {
    padding: 8px 0 100px 0;
}
.pc-item-view .ph-breadcrumb-item a {
	color: #666;
	text-decoration: none;
}
.ph-price-discount, .ph-checkout-discount-row div {
       color: #23b884 !important;
}
.pc-item-view .ph-breadcrumb-item a:hover,
.pc-item-view .ph-breadcrumb-item a:focus {
	color: #ec430f;
	text-decoration: none;
}

.pc-item-view .ph-breadcrumb-item.active {
	color: #333;
	font-weight: 600;
}

.pc-item-view .ph-breadcrumb-sep {
	margin: 0 8px;
	color: #aaa;
}

/* ------------------------------------------------------------
   Toman icon next to the FINAL price on the item view
   (same mask + currentColor pattern as the product grids):
     - cart discount  -> next to .ph-price-discount-cart
     - product discount -> next to .ph-price-discount-product
     - no discount    -> next to .ph-price-brutto.ph-standard
   The struck-through lines (original price / pre-discount price)
   never get the icon.
   ------------------------------------------------------------ */
.pc-item-view .ph-item-price-box .ph-price-discount-product::after,
.pc-item-view .ph-item-price-box .ph-price-discount-cart::after,
.pc-item-view .ph-item-price-box .ph-price-brutto.ph-standard::after {
	content: "";
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	margin-inline-start: 5px;
	vertical-align: -.12em;
	background-color: currentColor;
	-webkit-mask: url('../images/toman.svg') center / contain no-repeat;
	mask: url('../images/toman.svg') center / contain no-repeat;
}

/* --- responsive: stack the two blocks --- */
@media (max-width: 991.98px) {
	.ph-item-view-blocks {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
   Item view: "Ask a question" as an icon only
   ------------------------------------------------------------
   Phoca renders it as <a class="btn btn-primary btn-sm"> with the
   question icon plus the text node "سؤال درباره محصول". The text is a
   bare text node, so it is hidden with font-size:0 and the icon keeps an
   explicit size (same pattern as the shopping-cart icon above).
   The look is matched to the neighbouring compare / wishlist icons:
   24x24, no background, no border, currentColor = #ec430f.
   ============================================================ */
.pc-item-view .ph-button-ask-question-box .btn {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	color: #ec430f;
	font-size: 0;            /* hides the text node, not the SVG */
	line-height: 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pc-item-view .ph-button-ask-question-box .btn:hover,
.pc-item-view .ph-button-ask-question-box .btn:focus,
.pc-item-view .ph-button-ask-question-box .btn:active {
	background: none;
	border: 0;
	box-shadow: none;
	color: #ec430f;
	opacity: .75;
}

/* explicit size, because font-size is 0 on the button above */
.pc-item-view .ph-button-ask-question-box .btn .pc-si {
	width: 24px;
	height: 24px;
	font-size: 24px;
	fill: currentColor;
	stroke: currentColor;
}

/* the trailing space that separated icon and text in the button */
.pc-item-view .ph-button-ask-question-box .btn .pc-si {
	margin: 0;
}

/* ============================================================
   Item view - thumbnail strip under the main image
   ------------------------------------------------------------
   5 thumbnails in a single row, equal size and even gaps.
   When the product has more images than the 5 slots, the last slot
   shows the next image blurred with a "..." overlay marking the
   overflow (see the loop in html/com_phocacart/item/default.php).
   ============================================================ */
.pc-item-view .ph-item-image-add-box {
	display: grid;
	/* 5 equal columns; the gap is set once and every slot follows it */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0 0;
	text-align: initial;
}

/* neutralise the Bootstrap col-* sizing that is still on the boxes */
.pc-item-view .ph-item-image-add-box > .ph-item-image-box {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
	margin: 0;
}

/* the slot keeps a square-ish frame so mixed image ratios stay aligned */
.pc-item-view .ph-item-image-add-box .ph-item-image-box > a {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fff;
	aspect-ratio: 1 / 1;
	line-height: 0;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.pc-item-view .ph-item-image-add-box .ph-item-image-box > a:hover {
	border-color: #ec430f;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.pc-item-view .ph-item-image-add-box .ph-item-image-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	border: 0;
	border-radius: 0;
	padding: 4px;
	box-sizing: border-box;
}

/* --- overflow slot: blurred image + "..." --- */
.pc-item-view .ph-item-image-add-box .ph-item-image-box-more img {
	filter: blur(5px);
	transform: scale(1.12);     /* hides the soft blurred edge */
}

.pc-item-view .ph-item-image-add-box .ph-item-image-box-more > a::after {
	/* light veil so the dots stay readable on any image */
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .28);
	pointer-events: none;
}

.ph-item-image-add-box .ph-thumb-more-dots {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	z-index: 2;
	pointer-events: none;
}

.ph-item-image-add-box .ph-thumb-more-dots i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #333;
	box-shadow: 0 0 3px rgba(255, 255, 255, .9);
}

/* --- smaller screens: fewer slots per row, still even --- */
@media (max-width: 767.98px) {
	.pc-item-view .ph-item-image-add-box {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}
}

@media (max-width: 479.98px) {
	.pc-item-view .ph-item-image-add-box {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}
}

/* ============================================================
   Item view - image action icons
   ------------------------------------------------------------
   Compare / wishlist / ask-a-question are rendered on the main
   image (ph-item-image-actions-box inside ph-item-image-full-box,
   see html/com_phocacart/item/default.php) as a vertical column
   of small round buttons in the top-right corner of the image.
   ============================================================ */
.pc-item-view .ph-item-image-actions-box {
	position: absolute;
	top: 12px;
	right: 12px;          /* top-right corner of the image (RTL) */
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* neutralise the old float / inline styling of the Phoca boxes
   (.pull-right uses float !important, so !important is needed here) */
.pc-item-view .ph-item-image-actions-box .ph-category-item-compare-box,
.pc-item-view .ph-item-image-actions-box .ph-category-item-wishlist-box,
.pc-item-view .ph-item-image-actions-box .ph-button-ask-question-box,
.pc-item-view .ph-item-image-actions-box .ph-category-item-compare,
.pc-item-view .ph-item-image-actions-box .ph-category-item-wishlist {
	float: none !important;
	margin: 0;
	padding: 0;
}

/* Phoca places the new/hot/feature labels in the same top-right corner
   on the item view - move them to the top-left so they do not collide
   with the action icons. */
.pc-item-view #ph-pc-item-box .ph-item-image-full-box .ph-label-box {
	right: auto;
	left: 1.2em;
}

/* the round buttons */
.pc-item-view .ph-item-image-actions-box .ph-category-item-compare-box a,
.pc-item-view .ph-item-image-actions-box .ph-category-item-wishlist-box a,
.pc-item-view .ph-item-image-actions-box .ph-button-ask-question-box a.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 1px solid #e3e3e3;
	border-radius: 50%;
	background: #fff;
	color: #555;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
	font-size: 0;         /* hides the ask-question text node, not the SVG */
	line-height: 0;
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.pc-item-view .ph-item-image-actions-box .ph-category-item-compare-box a:hover,
.pc-item-view .ph-item-image-actions-box .ph-category-item-compare-box a:focus,
.pc-item-view .ph-item-image-actions-box .ph-category-item-wishlist-box a:hover,
.pc-item-view .ph-item-image-actions-box .ph-category-item-wishlist-box a:focus,
.pc-item-view .ph-item-image-actions-box .ph-button-ask-question-box a.btn:hover,
.pc-item-view .ph-item-image-actions-box .ph-button-ask-question-box a.btn:focus,
.pc-item-view .ph-item-image-actions-box .ph-button-ask-question-box a.btn:active {
	background: #fff;
	color: #ec430f;
	border-color: #ec430f;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
	text-decoration: none;
}

/* explicit icon size, because font-size is 0 on the buttons above */
.pc-item-view .ph-item-image-actions-box .pc-si {
	display: block;
	width: 20px;
	height: 20px;
	font-size: 20px;
	margin: 0;
	fill: currentColor;
	stroke: currentColor;
}

/* the older "ask a question" rule above is more specific
   (.ph-button-ask-question-box .btn .pc-si = 24px), so it needs a
   stronger override here to keep all three icons the same size */
.pc-item-view .ph-item-image-actions-box .ph-button-ask-question-box .btn .pc-si {
	width: 20px;
	height: 20px;
	font-size: 20px;
}

/* --- smaller screens: slightly smaller circles --- */
@media (max-width: 767.98px) {
	.pc-item-view .ph-item-image-actions-box {
		top: 8px;
		right: 8px;
		gap: 8px;
	}

	.pc-item-view .ph-item-image-actions-box .ph-category-item-compare-box a,
	.pc-item-view .ph-item-image-actions-box .ph-category-item-wishlist-box a,
	.pc-item-view .ph-item-image-actions-box .ph-button-ask-question-box a.btn {
		width: 34px;
		height: 34px;
	}

	.pc-item-view .ph-item-image-actions-box .pc-si,
	.pc-item-view .ph-item-image-actions-box .ph-button-ask-question-box .btn .pc-si {
		width: 17px;
		height: 17px;
		font-size: 17px;
	}
}

/* ============================================================
   Item view - price box cleanup
   ------------------------------------------------------------
   Hide the price labels ("قیمت اصلی" / "قیمت" / the discount
   title like "تخفیف ویژه نوروزی") - the same pattern as the
   product grids in css/custom.css, where only the prices are
   shown. The currency word ("تومان") itself is stripped from
   the price strings in html/layouts/com_phocacart/product_price.php
   (typeview "Item" added to $tomanIconTypeviews).
   ============================================================ */
.pc-item-view .ph-item-price-box .ph-price-txt {
	display: none !important;
}

/* The hidden labels carried "float + clear: both" (rtl.css), so without
   them all prices collapse into one line. Make every price a block on
   its own line, numbers on the left edge like before. */
.pc-item-view .ph-item-price-box .ph-price-original,
.pc-item-view .ph-item-price-box .ph-price-brutto,
.pc-item-view .ph-item-price-box .ph-price-netto,
.pc-item-view .ph-item-price-box .ph-price-tax,
.pc-item-view .ph-item-price-box .ph-price-base {
	float: none;
	display: block;
	clear: both;
	text-align: left;
	margin: 0 0 6px 0;
}

/* ============================================================
   Item view - SKU row at the top of the middle block
   ------------------------------------------------------------
   The ID box (SKU / EAN / ...) was moved from the left (price)
   block to the middle block, above the short description
   (see html/com_phocacart/item/default.php).
   ============================================================ */
.pc-item-view .ph-item-view-middle-box .ph-item-id-box {
	margin: 0 0 12px 0;
        border-bottom: 1px solid #e4e4e4;
}

.pc-item-view .ph-item-view-middle-box .ph-item-id-box::after {
	content: "";
	display: block;
	clear: both;
}
.ph-available-options-title {
    font-size: 1rem;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 7px;
}
.ph-attribute-title{
       margin-top: 25px;    margin-bottom: 10px;
}

/* keep the label / value spacing compact inside the middle block */
.pc-item-view .ph-item-view-middle-box .ph-item-sku-box .ph-sku-txt,
.pc-item-view .ph-item-view-middle-box .ph-item-ean-box .ph-ean-txt,
.pc-item-view .ph-item-view-middle-box .ph-item-upc-box .ph-upc-txt,
.pc-item-view .ph-item-view-middle-box .ph-item-mpn-box .ph-mpn-txt {
	color: #888;
}

.pc-item-view .ph-item-view-middle-box .ph-item-sku-box .ph-sku,
.pc-item-view .ph-item-view-middle-box .ph-item-ean-box .ph-ean,
.pc-item-view .ph-item-view-middle-box .ph-item-upc-box .ph-upc,
.pc-item-view .ph-item-view-middle-box .ph-item-mpn-box .ph-mpn {
	color: #444;
}

/* ------------------------------------------------------------
   Header: Phoca Cart search module (position: header-search)
   Same look as the previous header search box:
   bg #f5f5f5, border 20% darker (#c4c4c4), rounded, icon inside
   ------------------------------------------------------------ */

#sp-header.hu-two-rows-header .header-search-wrap .sp-module {
	margin: 0;
	width: 100%;
}

#sp-header.hu-two-rows-header .header-search-wrap .sp-module-content {
	margin: 0;
}

/* Neutralize Phoca's row/col wrappers inside the header */
#sp-header.hu-two-rows-header .header-search-wrap .ph-search-box .row,
#sp-header.hu-two-rows-header .header-search-wrap .ph-search-box [class*="col-"] {
	margin: 0;
	padding: 0;
	width: auto;
	max-width: none;
	flex: 1 1 auto;
}

#sp-header.hu-two-rows-header .header-search-wrap .input-group {
	display: flex;
	width: 100%;
}

/* Input: rounded, light background, border 20% darker than the background */
#sp-header.hu-two-rows-header .header-search-wrap .form-control {
	min-width: 450px;
	height: 40px;
	padding-inline-start: 46px;
	padding-inline-end: 15px;
	border-radius: 50rem;
	background-color: #f5f5f5;
	border: 1px solid #c4c4c4;
	box-shadow: none;
}

#sp-header.hu-two-rows-header .header-search-wrap .form-control:focus {
	box-shadow: none;
	outline: none;
}

/* Magnifier icon inside the box, on the inline-start side (right in RTL) */
#sp-header.hu-two-rows-header .header-search-wrap .inner-addon {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
}

#sp-header.hu-two-rows-header .header-search-wrap .inner-addon svg.pc-si {
	position: absolute;
	inset-inline-start: 15px;
	inset-inline-end: auto;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	width: 17px;
	height: 17px;
	color: #8a8f98;
	pointer-events: none;
}