product-details.css 24 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235
  1. /*========================================
  2. PRODUCT DETAILS PAGE STYLE
  3. =========================================*/
  4. .product-card {
  5. width: 100%;
  6. overflow: hidden;
  7. position: relative;
  8. margin-bottom: 25px;
  9. background: var(--white);
  10. transition: all linear .3s;
  11. -webkit-transition: all linear .3s;
  12. -moz-transition: all linear .3s;
  13. -ms-transition: all linear .3s;
  14. -o-transition: all linear .3s;
  15. }
  16. .product-card:hover .product-widget {
  17. opacity: 1;
  18. bottom: 15px;
  19. }
  20. .product-media {
  21. position: relative;
  22. }
  23. .product-label {
  24. display: -webkit-box;
  25. display: -ms-flexbox;
  26. display: flex;
  27. -webkit-box-orient: vertical;
  28. -webkit-box-direction: normal;
  29. -ms-flex-direction: column;
  30. flex-direction: column;
  31. align-items: flex-start;
  32. position: absolute;
  33. top: 20px;
  34. left:20px;
  35. z-index:1;
  36. }
  37. .label-text {
  38. font-size: 14px;
  39. padding: 5px 8px;
  40. line-height: 13px;
  41. border-radius: 50px;
  42. margin-bottom: 5px;
  43. color: var(--white);
  44. text-align: center;
  45. text-transform: capitalize;
  46. }
  47. .label-text.off {
  48. background: var(--black);
  49. }
  50. .label-text.new {
  51. background: var(--black);
  52. }
  53. .label-text.sale {
  54. background: var(--orange);
  55. }
  56. .label-text.feat {
  57. background: var(--purple);
  58. }
  59. .label-text.rate {
  60. background: var(--yellow);
  61. }
  62. .label-text.order {
  63. background: var(--blue);
  64. }
  65. .product-wish {
  66. position: absolute;
  67. top: 20px;
  68. right: 20px;
  69. font-size: 22px;
  70. color: var(--black);
  71. z-index:1;
  72. }
  73. .product-wish.active {
  74. color: var(--primary);
  75. }
  76. .product-image {
  77. position:relative;
  78. }
  79. .product-image img {
  80. width: 100%;
  81. }
  82. .product-image:after {
  83. content:' ';
  84. display:block;
  85. position:absolute; top:0; left:0;
  86. width:100%; height:100%;
  87. background:rgba(0, 0, 0,.03);
  88. }
  89. .product-widget {
  90. display: -webkit-box;
  91. display: -ms-flexbox;
  92. display: flex;
  93. -webkit-box-align: center;
  94. -ms-flex-align: center;
  95. align-items: center;
  96. -webkit-box-pack: center;
  97. -ms-flex-pack: center;
  98. justify-content: center;
  99. position: absolute;
  100. bottom: 0px;
  101. left: 0px;
  102. width: 100%;
  103. opacity: 0;
  104. transition: all linear .3s;
  105. -webkit-transition: all linear .3s;
  106. -moz-transition: all linear .3s;
  107. -ms-transition: all linear .3s;
  108. -o-transition: all linear .3s;
  109. }
  110. .product-widget a {
  111. width: 40px;
  112. height: 40px;
  113. font-size: 15px;
  114. margin: 0px 6px;
  115. line-height: 40px;
  116. text-align: center;
  117. border-radius: 8px;
  118. color: var(--white);
  119. background: var(--primary);
  120. text-shadow: var(-primary-tshadow);
  121. -webkit-box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
  122. box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
  123. }
  124. .product-content {
  125. }
  126. .product-rating {
  127. display: -webkit-box;
  128. display: -ms-flexbox;
  129. display: flex;
  130. -webkit-box-align: center;
  131. -ms-flex-align: center;
  132. align-items: center;
  133. -webkit-box-pack: center;
  134. -ms-flex-pack: center;
  135. justify-content: center;
  136. margin-bottom: 3px;
  137. }
  138. .product-rating i,
  139. .product-rating a {
  140. font-size: 14px;
  141. margin: 0px 2px;
  142. color: var(--gray);
  143. }
  144. .product-rating a {
  145. white-space: nowrap;
  146. transition: all linear .3s;
  147. -webkit-transition: all linear .3s;
  148. -moz-transition: all linear .3s;
  149. -ms-transition: all linear .3s;
  150. -o-transition: all linear .3s;
  151. }
  152. .product-rating a:hover {
  153. color: var(--primary);
  154. text-decoration: underline;
  155. }
  156. .product-rating .active {
  157. color: var(--yellow);
  158. }
  159. .product-name {
  160. margin-bottom:5px;
  161. font-weight:400;
  162. text-transform: capitalize;
  163. }
  164. .product-name a {
  165. color: var(--black);
  166. transition: all linear .3s;
  167. -webkit-transition: all linear .3s;
  168. -moz-transition: all linear .3s;
  169. -ms-transition: all linear .3s;
  170. -o-transition: all linear .3s;
  171. font-weight:inherit;
  172. }
  173. .product-name a:hover {
  174. color: inherit;
  175. }
  176. .product-price {
  177. display: -webkit-box;
  178. display: -ms-flexbox;
  179. display: flex;
  180. -webkit-box-align: flex-start;
  181. -ms-flex-align: flex-start;
  182. align-items: flex-start;
  183. -webkit-box-pack: flex-start;
  184. -ms-flex-pack: flex-start;
  185. justify-content: flex-start;
  186. -webkit-box-align: baseline;
  187. -ms-flex-align: baseline;
  188. align-items: baseline;
  189. margin-bottom: 13px;
  190. color: var(--black);
  191. }
  192. .product-price del {
  193. color: var(--red);
  194. margin-right: 8px;
  195. }
  196. .product-price span {
  197. color: var(--price);
  198. white-space: nowrap;
  199. font-weight:700;
  200. }
  201. .product-price span small {
  202. font-weight: 400;
  203. }
  204. .product-disable {
  205. position: relative;
  206. }
  207. .product-disable:hover {
  208. border-color: var(--border);
  209. -webkit-box-shadow: none;
  210. box-shadow: none;
  211. }
  212. .product-disable:hover .product-add {
  213. color: var(--heading);
  214. background: var(--border);
  215. }
  216. .product-disable .product-widget {
  217. visibility: hidden;
  218. }
  219. .product-disable::before {
  220. position: absolute;
  221. content: "Out of Stock";
  222. top: 40%;
  223. left: 50%;
  224. z-index: 2;
  225. width: 100%;
  226. font-size: 15px;
  227. font-weight: 400;
  228. padding: 15px 0px;
  229. text-align: center;
  230. text-transform: uppercase;
  231. text-shadow: var(--primary-tshadow);
  232. -webkit-transform: translate(-50%, -50%);
  233. transform: translate(-50%, -50%);
  234. color: var(--white);
  235. background: rgba(224, 152, 22, 0.9);
  236. }
  237. .product-disable::after {
  238. position: absolute;
  239. content: "";
  240. top: 0px;
  241. left: 0px;
  242. z-index: 1;
  243. width: 100%;
  244. height: 100%;
  245. border-radius: 8px;
  246. background: rgba(255, 255, 255, 0.6);
  247. }
  248. @media (max-width: 575px) {
  249. .product-card {
  250. padding: 8px;
  251. margin-bottom: 8px;
  252. }
  253. .product-name {
  254. font-size: 15px;
  255. line-height: 22px;
  256. }
  257. }
  258. .detail .btn {display:flex; background:var(--primary); justify-content:center; align-items:center; height:48px; color:#fff;}
  259. .detail .btn:hover {color:black;}
  260. .btn_group {display:flex; justify-content:space-between; align-items:center;}
  261. .btn_group > * {width:33%;}
  262. .item_detail.inner-section {margin-top:30px;}
  263. .item_detail .container {border-top:1px solid var(--black);}
  264. .item_detail .nav-tabs {margin-bottom:0; padding: 60px 25px 0px;}
  265. .details-gallery {
  266. position: relative;
  267. }
  268. .details-label-group {
  269. position: absolute;
  270. top: 20px;
  271. left: 20px;
  272. z-index: 1;
  273. display: -webkit-box;
  274. display: -ms-flexbox;
  275. display: flex;
  276. -webkit-box-orient: vertical;
  277. -webkit-box-direction: normal;
  278. -ms-flex-direction: column;
  279. flex-direction: column;
  280. }
  281. .details-label {
  282. font-size: 14px;
  283. padding: 6px 20px;
  284. margin-bottom: 6px;
  285. line-height: 13px;
  286. border-radius: 50px;
  287. text-transform: capitalize;
  288. text-align: center;
  289. color: var(--white);
  290. }
  291. .details-label:last-child {
  292. margin-bottom: 0px;
  293. }
  294. .details-label.off {
  295. background: var(--red);
  296. }
  297. .details-label.new {
  298. background: var(--black);
  299. }
  300. .details-label.sale {
  301. background: var(--orange);
  302. }
  303. .details-label.feat {
  304. background: var(--purple);
  305. }
  306. .details-label.rate {
  307. background: var(--yellow);
  308. }
  309. .details-preview {
  310. margin-bottom: 16px;
  311. }
  312. .details-preview li img {
  313. width: 100%;
  314. border-radius: 8px;
  315. }
  316. .details-thumb li {
  317. margin: 0px 8px;
  318. cursor: pointer;
  319. }
  320. .details-thumb li img {
  321. width: 100%;
  322. border-radius: 8px;
  323. border: 1px solid var(--white);
  324. }
  325. .details-thumb .slick-current img {
  326. border: 1px solid #5f6472;
  327. }
  328. .product-navigation {
  329. margin-bottom: 25px;
  330. padding: 20px 25px;
  331. border-radius: 8px;
  332. background: var(--white);
  333. display: -webkit-box;
  334. display: -ms-flexbox;
  335. display: flex;
  336. -webkit-box-align: center;
  337. -ms-flex-align: center;
  338. align-items: center;
  339. -webkit-box-pack: justify;
  340. -ms-flex-pack: justify;
  341. justify-content: space-between;
  342. }
  343. .product-navigation li a {
  344. color: var(--gray);
  345. text-transform: capitalize;
  346. position: relative;
  347. transition: all linear .3s;
  348. -webkit-transition: all linear .3s;
  349. -moz-transition: all linear .3s;
  350. -ms-transition: all linear .3s;
  351. -o-transition: all linear .3s;
  352. }
  353. .product-navigation li a:hover {
  354. color: var(--primary);
  355. }
  356. .product-navigation li a:hover .product-nav-popup {
  357. visibility: visible;
  358. opacity: 1;
  359. }
  360. .product-nav-popup {
  361. position: absolute;
  362. top: 30px;
  363. left: 50%;
  364. z-index: 3;
  365. width: 100px;
  366. height: auto;
  367. visibility: hidden;
  368. opacity: 0;
  369. padding: 10px;
  370. border-radius: 8px;
  371. -webkit-transform: translateX(-50%);
  372. transform: translateX(-50%);
  373. background: var(--white);
  374. border: 1px solid var(--border);
  375. -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  376. box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  377. transition: all linear .3s;
  378. -webkit-transition: all linear .3s;
  379. -moz-transition: all linear .3s;
  380. -ms-transition: all linear .3s;
  381. -o-transition: all linear .3s;
  382. }
  383. .product-nav-popup::before {
  384. position: absolute;
  385. content: "";
  386. z-index: -1;
  387. top: -3px;
  388. left: 50%;
  389. width: 12px;
  390. height: 12px;
  391. border-radius: 3px;
  392. -webkit-transform: rotate(45deg) translateX(-50%);
  393. transform: rotate(45deg) translateX(-50%);
  394. background: var(--white);
  395. border-top: 1px solid var(--border);
  396. border-left: 1px solid var(--border);
  397. }
  398. .product-nav-popup img {
  399. width: 100%;
  400. }
  401. .product-nav-popup small {
  402. font-size: 14px;
  403. line-height: 18px;
  404. display: inline-block;
  405. }
  406. .details-content {
  407. padding: 35px 35px;
  408. border-radius: 8px;
  409. background: var(--white);
  410. }
  411. .details-name {
  412. font-size: 26px;
  413. line-height: 34px;
  414. margin-bottom: 5px;
  415. text-transform: capitalize;
  416. }
  417. .details-name a {
  418. color: var(--black);
  419. transition: all linear .3s;
  420. -webkit-transition: all linear .3s;
  421. -moz-transition: all linear .3s;
  422. -ms-transition: all linear .3s;
  423. -o-transition: all linear .3s;
  424. }
  425. .details-name a:hover {
  426. color: var(--primary);
  427. }
  428. .details-meta {
  429. margin-bottom: 12px;
  430. display: -webkit-box;
  431. display: -ms-flexbox;
  432. display: flex;
  433. -webkit-box-align: center;
  434. -ms-flex-align: center;
  435. align-items: center;
  436. -webkit-box-pack: start;
  437. -ms-flex-pack: start;
  438. justify-content: flex-start;
  439. }
  440. .details-meta p {
  441. font-size: 13px;
  442. margin-right: 20px;
  443. white-space: nowrap;
  444. text-transform: uppercase;
  445. color: var(--placeholder);
  446. }
  447. .details-meta span,
  448. .details-meta a {
  449. margin-left: 5px;
  450. color: var(--placeholder);
  451. }
  452. .details-meta a:hover {
  453. text-decoration: underline;
  454. color: var(--primary);
  455. }
  456. .details-rating {
  457. display: -webkit-box;
  458. display: -ms-flexbox;
  459. display: flex;
  460. -webkit-box-align: center;
  461. -ms-flex-align: center;
  462. align-items: center;
  463. -webkit-box-pack: start;
  464. -ms-flex-pack: start;
  465. justify-content: flex-start;
  466. margin-bottom: 15px;
  467. }
  468. .details-rating i,
  469. .details-rating a {
  470. font-size: 15px;
  471. margin-right: 3px;
  472. color: var(--gray);
  473. }
  474. .details-rating a {
  475. margin-left: 8px;
  476. white-space: nowrap;
  477. text-transform: capitalize;
  478. transition: all linear .3s;
  479. -webkit-transition: all linear .3s;
  480. -moz-transition: all linear .3s;
  481. -ms-transition: all linear .3s;
  482. -o-transition: all linear .3s;
  483. }
  484. .details-rating a:hover {
  485. color: var(--primary);
  486. text-decoration: underline;
  487. }
  488. .details-rating .active {
  489. color: var(--yellow);
  490. }
  491. .details-price {
  492. margin-bottom: 20px;
  493. }
  494. .details-price del {
  495. color: var(--red);
  496. margin-right: 25px;
  497. }
  498. .details-price span {
  499. color: var(--primary);
  500. white-space: nowrap;
  501. }
  502. .details-price span small {
  503. font-size: 14px;
  504. font-weight: 400;
  505. text-transform: capitalize;
  506. }
  507. .details-desc {
  508. margin-bottom: 25px;
  509. }
  510. .details-list-group {
  511. display: -webkit-box;
  512. display: -ms-flexbox;
  513. display: flex;
  514. -webkit-box-align: center;
  515. -ms-flex-align: center;
  516. align-items: center;
  517. -webkit-box-pack: center;
  518. -ms-flex-pack: center;
  519. justify-content: center;
  520. -webkit-box-pack: start;
  521. -ms-flex-pack: start;
  522. justify-content: flex-start;
  523. margin-bottom: 25px;
  524. }
  525. .details-list-group:last-child {
  526. margin-bottom: 0px;
  527. }
  528. .details-list-title {
  529. font-weight: 500;
  530. margin-right: 15px;
  531. color: var(--heading);
  532. text-transform: capitalize;
  533. }
  534. .details-tag-list {
  535. display: -webkit-box;
  536. display: -ms-flexbox;
  537. display: flex;
  538. -webkit-box-align: center;
  539. -ms-flex-align: center;
  540. align-items: center;
  541. -webkit-box-pack: center;
  542. -ms-flex-pack: center;
  543. justify-content: center;
  544. }
  545. .details-tag-list li {
  546. margin-right: 8px;
  547. }
  548. .details-tag-list li a {
  549. font-size: 14px;
  550. line-height: 12px;
  551. padding: 8px 10px;
  552. border-radius: 5px;
  553. letter-spacing: 0.3px;
  554. text-transform: capitalize;
  555. color: var(--text);
  556. background: var(--chalk);
  557. transition: all linear .3s;
  558. -webkit-transition: all linear .3s;
  559. -moz-transition: all linear .3s;
  560. -ms-transition: all linear .3s;
  561. -o-transition: all linear .3s;
  562. }
  563. .details-tag-list li a:hover {
  564. color: var(--white);
  565. background: var(--primary);
  566. }
  567. .details-share-list {
  568. display: -webkit-box;
  569. display: -ms-flexbox;
  570. display: flex;
  571. -webkit-box-align: center;
  572. -ms-flex-align: center;
  573. align-items: center;
  574. -webkit-box-pack: center;
  575. -ms-flex-pack: center;
  576. justify-content: center;
  577. }
  578. .details-share-list li {
  579. margin-right: 8px;
  580. }
  581. .details-share-list li a {
  582. width: 35px;
  583. height: 35px;
  584. font-size: 16px;
  585. line-height: 35px;
  586. border-radius: 50%;
  587. text-align: center;
  588. color: var(--text);
  589. background: var(--chalk);
  590. transition: all linear .3s;
  591. -webkit-transition: all linear .3s;
  592. -moz-transition: all linear .3s;
  593. -ms-transition: all linear .3s;
  594. -o-transition: all linear .3s;
  595. }
  596. .details-share-list li a:hover {
  597. color: var(--white);
  598. background: var(--primary);
  599. }
  600. .details-add-group {
  601. margin: 0;
  602. }
  603. /*.details-add-group .product-add,
  604. .details-add-group .action-input,
  605. .details-buy, .details-buy:hover {
  606. display:flex;
  607. padding: 10px 0px;
  608. color: var(--white);
  609. background: var(--black);
  610. border:1px solid var(--black);
  611. text-transform: uppercase;
  612. justify-content:center; align-items:center;
  613. }
  614. */
  615. .details-buy i {margin-right: 5px;}
  616. .details-add-group .action-minus i,
  617. .details-add-group .action-plus i {
  618. background: var(--chalk);
  619. }
  620. .details-action-group {
  621. display: -ms-grid;
  622. /*display: grid;*/
  623. grid-gap: 15px;
  624. -ms-grid-columns: (minmax(200px, 1fr))[auto-fit];
  625. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  626. position: relative;
  627. }
  628. .details-action-group a {
  629. padding: 10px 0px;
  630. color: var(--black);
  631. background: var(--white);
  632. border:1px solid #5c6bc0; border-radius:5px;
  633. color:var(--primary);
  634. display: -webkit-box;
  635. display: -ms-flexbox;
  636. display: flex;
  637. -webkit-box-align: center;
  638. -ms-flex-align: center;
  639. align-items: center;
  640. -webkit-box-pack: center;
  641. -ms-flex-pack: center;
  642. justify-content: center;
  643. transition: all linear .3s;
  644. -webkit-transition: all linear .3s;
  645. -moz-transition: all linear .3s;
  646. -ms-transition: all linear .3s;
  647. -o-transition: all linear .3s;
  648. }
  649. .details-action-group a:hover {
  650. color: var(--primary);
  651. }
  652. .details-action-group a i {
  653. font-size: 16px;
  654. margin-right: 8px;
  655. }
  656. .details-action-group a span {
  657. font-size: 14px;
  658. font-weight: 500;
  659. letter-spacing: 0.5px;
  660. text-transform: uppercase;
  661. }
  662. .details-wish.active {
  663. color: var(--white);
  664. background: var(--primary);
  665. }
  666. .details-wish.active:hover {
  667. color: var(--white);
  668. background: var(--primary);
  669. }
  670. .product-details-frame {
  671. padding: 50px 0;
  672. border-radius: 8px;
  673. background: var(--white);
  674. }
  675. .product-details-frame:last-child {
  676. margin-bottom: 0px;
  677. }
  678. .product-details-frame .review-list {
  679. margin-bottom:-50px;
  680. }
  681. .frame-title {
  682. margin-bottom: 30px;
  683. text-transform: capitalize;
  684. font-size: 24px;
  685. font-weight: 500;
  686. }
  687. .tab-descrip {
  688. position: relative;
  689. }
  690. .tab-descrip ul {
  691. list-style: disc;
  692. margin-left: 20px;
  693. margin-top: 25px;
  694. }
  695. .tab-descrip ul li {
  696. margin-bottom: 8px;
  697. }
  698. .tab-descrip ul li:last-child {
  699. margin-bottom: 0px;
  700. }
  701. .tab-descrip img {
  702. width: 100%;
  703. border-radius: 8px;
  704. }
  705. .tab-descrip a {
  706. position: absolute;
  707. top: 50%;
  708. left: 50%;
  709. z-index: 2;
  710. width: 80px;
  711. height: 80px;
  712. font-size: 22px;
  713. line-height: 80px;
  714. border-radius: 50%;
  715. text-align: center;
  716. color: var(--white);
  717. background: rgba(15, 199, 86, 0.8);
  718. -webkit-transform: translate(-50%, -50%);
  719. transform: translate(-50%, -50%);
  720. -webkit-box-shadow: var(--primary-bshadow);
  721. box-shadow: var(--primary-bshadow);
  722. text-shadow: var(--primary-tshadow);
  723. }
  724. .table-bordered {
  725. margin-bottom: 0px;
  726. }
  727. .table-bordered th,
  728. .table-bordered td {
  729. padding: 12px 25px;
  730. text-align: left;
  731. }
  732. .table-bordered th {
  733. font-weight: 500;
  734. }
  735. .table-bordered td:last-child {
  736. border-right: 1px solid var(--border);
  737. }
  738. .review-item {
  739. padding: 45px 45px;
  740. border-radius: 8px;
  741. margin-bottom: 30px;
  742. background: var(--white);
  743. border: 1px solid var(--border);
  744. }
  745. .review-item:last-child {
  746. margin-bottom: 0px;
  747. }
  748. .review-media {
  749. margin-bottom: 15px;
  750. display: -webkit-box;
  751. display: -ms-flexbox;
  752. display: flex;
  753. -webkit-box-align: center;
  754. -ms-flex-align: center;
  755. align-items: center;
  756. -webkit-box-pack: start;
  757. -ms-flex-pack: start;
  758. justify-content: flex-start;
  759. }
  760. .review-avatar {
  761. margin-right: 15px;
  762. border-radius: 50%;
  763. border: 2px solid var(--primary);
  764. }
  765. .review-avatar img {
  766. width: 65px;
  767. border-radius: 50%;
  768. border: 2px solid var(--white);
  769. }
  770. .review-meta {
  771. text-transform: capitalize;
  772. }
  773. .review-meta a {
  774. color: var(--heading);
  775. text-transform: capitalize;
  776. transition: all linear .3s;
  777. -webkit-transition: all linear .3s;
  778. -moz-transition: all linear .3s;
  779. -ms-transition: all linear .3s;
  780. -o-transition: all linear .3s;
  781. }
  782. .review-meta a:hover {
  783. color: var(--primary);
  784. }
  785. .review-meta span {
  786. display: block;
  787. font-size: 15px;
  788. font-weight: 400;
  789. color: var(--text);
  790. }
  791. .review-meta span b {
  792. font-weight: 500;
  793. color: var(--primary);
  794. }
  795. .review-rating {
  796. margin-bottom: 10px;
  797. }
  798. .review-rating li {
  799. font-size: 16px;
  800. margin-right: 5px;
  801. color: var(--yellow);
  802. display: inline-block;
  803. }
  804. .review-desc {
  805. margin-bottom: 20px;
  806. }
  807. .review-reply {
  808. display: -webkit-box;
  809. display: -ms-flexbox;
  810. display: flex;
  811. -webkit-box-align: center;
  812. -ms-flex-align: center;
  813. align-items: center;
  814. -webkit-box-pack: start;
  815. -ms-flex-pack: start;
  816. justify-content: flex-start;
  817. }
  818. .review-reply input {
  819. width: 100%;
  820. padding: 7px 18px;
  821. border-radius: 6px;
  822. margin-right: 20px;
  823. background: var(--white);
  824. }
  825. .review-reply button {
  826. font-size: 15px;
  827. padding: 6px 15px;
  828. border-radius: 6px;
  829. color: var(--white);
  830. background: var(--primary);
  831. text-transform: capitalize;
  832. transition: all linear .3s;
  833. -webkit-transition: all linear .3s;
  834. -moz-transition: all linear .3s;
  835. -ms-transition: all linear .3s;
  836. -o-transition: all linear .3s;
  837. }
  838. .review-reply button:hover {
  839. background: var(--white);
  840. border:1px solid var(--primary);
  841. color: var(--primary);
  842. }
  843. .review-reply button i {
  844. margin-right: 5px;
  845. }
  846. .review-reply-list {
  847. margin-left: 80px;
  848. margin-top: 35px;
  849. border-top: 1px solid var(--border);
  850. }
  851. .review-reply-item {
  852. padding: 30px 0px;
  853. border-bottom: 1px solid var(--border);
  854. }
  855. .review-reply-item:last-child {
  856. padding-bottom: 0px;
  857. border-bottom: none;
  858. }
  859. .review-form textarea {height:150px;}
  860. .review-form .btn {
  861. width: 100%;
  862. padding: 12px 30px;
  863. }
  864. @media (max-width: 991px) {
  865. .product-navigation {
  866. margin: 25px 0px;
  867. }
  868. }
  869. @media (max-width: 575px) {
  870. .details-content {
  871. padding: 20px;
  872. }
  873. .details-name {
  874. font-size: 22px;
  875. line-height: 30px;
  876. }
  877. .product-details-frame {
  878. padding: 20px;
  879. }
  880. .review-item {
  881. padding: 20px 15px;
  882. }
  883. .review-reply {
  884. -webkit-box-orient: vertical;
  885. -webkit-box-direction: normal;
  886. -ms-flex-direction: column;
  887. flex-direction: column;
  888. }
  889. .review-reply input {
  890. margin: 0px 0px 15px;
  891. }
  892. .review-reply-list {
  893. margin-left: 25px;
  894. }
  895. .star-rating label {
  896. margin: 0px 6px;
  897. }
  898. }
  899. @media (min-width: 576px) and (max-width: 767px) {
  900. .review-reply-list {
  901. margin-left: 30px;
  902. }
  903. }
  904. .btn_group {display:flex; justify-content:space-between; align-items:center;}
  905. .btn_group > * {width:33%;}
  906. .item_detail.inner-section {margin-top:30px;}
  907. .item_detail .container {border-top:1px solid var(--black);}
  908. .item_detail .nav-tabs {margin-bottom:0; padding: 60px 25px 0px; border-bottom:none;}
  909. .detail_rel.inner-section {margin-top:60px; padding-bottom:100px; padding-top:90px; border-top:1px solid #b5b7c5;}
  910. .detail_rel h2 {margin-bottom:60px; font-size:32px; font-family:inherit; text-align:center; font-weight:500;}
  911. .detail_rel .product-label {top:10px; left:10px;}
  912. .detail_rel .product-wish {top:10px; right:10px;}
  913. .detail_rel .product-card {margin-bottom:40px;}
  914. .detail_rel .product-image:after {background:none;}
  915. .detail_rel .product-content {padding:10px 0;}
  916. .detail_rel .product-action button i {background:#ccc;}
  917. .detail_rel .product-action button i:hover {background:var(--primary);}
  918. .details-gallery .slick-slide {height:auto;}
  919. .details-gallery .slick-slide {height:auto;}
  920. .inner-section.detail.credit-item {margin-bottom:0;}
  921. .product-add {
  922. /*width: 100%;*/
  923. padding: 6px 3px;
  924. text-transform: capitalize;
  925. color: var(--black);
  926. display: -webkit-box;
  927. display: -ms-flexbox;
  928. display: flex;
  929. -webkit-box-align: baseline;
  930. -ms-flex-align: baseline;
  931. align-items: baseline;
  932. -webkit-box-pack: flex-start;
  933. -ms-flex-pack: flex-start;
  934. justify-content: flex-start;
  935. transition: all linear .3s;
  936. -webkit-transition: all linear .3s;
  937. -moz-transition: all linear .3s;
  938. -ms-transition: all linear .3s;
  939. -o-transition: all linear .3s;
  940. }
  941. .product-add i {
  942. margin-right: 5px;
  943. }
  944. .product-action {
  945. display: -webkit-box;
  946. display: -ms-flexbox;
  947. display: flex;
  948. -webkit-box-align: center;
  949. -ms-flex-align: center;
  950. align-items: center;
  951. -webkit-box-pack: center;
  952. -ms-flex-pack: center;
  953. justify-content: center;
  954. /*display: none;*/
  955. }
  956. .product-action button {}
  957. .product-action button i {
  958. width: 40px;
  959. height: 48px;
  960. font-size: 14px;
  961. line-height:48px;
  962. border-radius: 6px;
  963. text-align: center;
  964. display: inline-block;
  965. color: var(--txt);
  966. background: var(--chalk);
  967. text-shadow: var(--primary-tshadow);
  968. transition: all linear .3s;
  969. -webkit-transition: all linear .3s;
  970. -moz-transition: all linear .3s;
  971. -ms-transition: all linear .3s;
  972. -o-transition: all linear .3s;
  973. }
  974. .product-action button i:hover {
  975. color: var(--white);
  976. background: var(--primary);
  977. }
  978. .product-action input {
  979. width: 45px; height:48px;
  980. font-size: 15px;
  981. margin: 0px 5px;
  982. padding: 6px 0px;
  983. border:1px solid var(--border);
  984. border-radius: 6px;
  985. text-align: center;
  986. color: var(--black);
  987. /*text-shadow: var(--primary-tshadow);*/
  988. }
  989. .nav-tabs {
  990. border: none;
  991. padding: 25px 25px;
  992. border-radius: 8px;
  993. margin-bottom: 25px;
  994. -webkit-box-align: center;
  995. -ms-flex-align: center;
  996. align-items: center;
  997. -webkit-box-pack: center;
  998. -ms-flex-pack: center;
  999. justify-content: center;
  1000. background: var(--white);
  1001. }
  1002. .nav-tabs li {
  1003. padding: 0px 30px;
  1004. border-right: 1px solid var(--border);
  1005. }
  1006. .nav-tabs li:last-child {
  1007. border: none;
  1008. }
  1009. .tab-link {
  1010. font-size: 15px;
  1011. font-weight: 500;
  1012. text-transform: uppercase;
  1013. color: var(--heading);
  1014. transition: all linear .3s;
  1015. -webkit-transition: all linear .3s;
  1016. -moz-transition: all linear .3s;
  1017. -ms-transition: all linear .3s;
  1018. -o-transition: all linear .3s;
  1019. }
  1020. .tab-link:hover {
  1021. color: var(--primary);
  1022. }
  1023. .tab-link i {
  1024. font-size: 18px;
  1025. margin-right: 3px;
  1026. }
  1027. .tab-link.active {
  1028. color: var(--primary);
  1029. }
  1030. .tab-pane {
  1031. display: none;
  1032. padding: 0px;
  1033. }
  1034. .tab-pane.active {
  1035. display: block;
  1036. }
  1037. .btn_more {padding: 10px 40px; background:var(--primary); border:none; border-radius:50px; color:var(--white); font-size:17px;}
  1038. .btn_more:hover {color:var(--white);}
  1039. @media (max-width: 575px) {
  1040. .nav-tabs {
  1041. -ms-flex-wrap: nowrap;
  1042. flex-wrap: nowrap;
  1043. -webkit-box-orient: vertical;
  1044. -webkit-box-direction: normal;
  1045. -ms-flex-direction: column;
  1046. flex-direction: column;
  1047. }
  1048. .nav-tabs li {
  1049. padding: 5px;
  1050. border: none;
  1051. }
  1052. }
  1053. @media (min-width: 576px) and (max-width: 767px) {
  1054. .nav-tabs {
  1055. padding: 25px 10px;
  1056. }
  1057. .nav-tabs li {
  1058. padding: 0px 20px;
  1059. }
  1060. }