woocommerce.css 33 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244
  1. /*
  2. Theme Name: Karuna
  3. WooCommerce styles override
  4. */
  5. /**
  6. * WooCommerce color variables
  7. */
  8. /**
  9. * Imports theme
  10. */
  11. /**
  12. * Imports WC integration
  13. */
  14. /**
  15. * Fonts
  16. */
  17. @font-face {
  18. font-family: 'star';
  19. src: url("../../plugins/woocommerce/assets/fonts/star.eot");
  20. src: url("../../plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("../../plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("../../plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("../../plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
  21. font-weight: normal;
  22. font-style: normal; }
  23. /**
  24. * Shop tables
  25. */
  26. /**
  27. * Shop tables
  28. */
  29. table.shop_table_responsive thead {
  30. display: none; }
  31. table.shop_table_responsive tbody th {
  32. display: none; }
  33. table.shop_table_responsive tr td {
  34. display: block;
  35. text-align: right;
  36. clear: both; }
  37. table.shop_table_responsive tr td:before {
  38. content: attr(data-title) ": ";
  39. float: left; }
  40. table.shop_table_responsive tr td.product-remove a {
  41. text-align: left; }
  42. table.shop_table_responsive tr td.product-remove:before {
  43. display: none; }
  44. table.shop_table_responsive tr td.actions:before, table.shop_table_responsive tr td.download-actions:before {
  45. display: none; }
  46. table.shop_table_responsive tr td.download-actions .button {
  47. display: block;
  48. text-align: center; }
  49. /**
  50. * Cart table
  51. */
  52. table.cart tr td.product-remove a {
  53. display: block;
  54. font-size: 1.5em;
  55. line-height: 1;
  56. color: #333;
  57. text-align: center;
  58. border-radius: 100%;
  59. text-decoration: none;
  60. font-weight: 700;
  61. box-shadow: none;
  62. opacity: .5;
  63. text-align: center; }
  64. table.cart tr td.product-remove a:hover {
  65. opacity: 1; }
  66. table.cart .product-thumbnail {
  67. min-width: 3.5em; }
  68. table.cart .product-thumbnail img {
  69. display: block;
  70. width: 3.5em;
  71. margin: 0 auto; }
  72. table.cart .product-thumbnail:before {
  73. content: none; }
  74. table.cart .actions {
  75. text-align: right; }
  76. table.cart .coupon {
  77. float: left;
  78. margin-bottom: .35em; }
  79. table.cart .coupon label {
  80. display: none; }
  81. table.cart .coupon input {
  82. width: auto; }
  83. .cart-collaterals {
  84. padding: 0 0 1.5em; }
  85. .cart-collaterals .shop_table tr th {
  86. text-align: right;
  87. vertical-align: top; }
  88. .cart-collaterals .wc-proceed-to-checkout {
  89. text-align: right; }
  90. @media screen and (min-width: 768px) {
  91. /**
  92. * Shop tables
  93. */
  94. table.shop_table_responsive thead {
  95. display: table-header-group; }
  96. table.shop_table_responsive tbody th {
  97. display: table-cell; }
  98. table.shop_table_responsive tr th, table.shop_table_responsive tr td {
  99. text-align: left; }
  100. table.shop_table_responsive tr td {
  101. display: table-cell; }
  102. table.shop_table_responsive tr td:before {
  103. display: none; }
  104. /**
  105. * Cart table
  106. */
  107. table.cart .product-thumbnail {
  108. min-width: 32px; }
  109. table.cart .product-thumbnail img {
  110. width: 32px; } }
  111. /**
  112. * Products
  113. */
  114. /**
  115. * Archive page header
  116. */
  117. .woocommerce-products-header .woocommerce-products-header__title {
  118. color: #333;
  119. text-transform: none;
  120. line-height: 1;
  121. margin: 0 0 0.2em; }
  122. /**
  123. * Products
  124. */
  125. ul.products {
  126. margin: 0;
  127. padding: 0;
  128. width: 100%;
  129. clear: both; }
  130. ul.products:before, ul.products:after {
  131. content: "";
  132. display: table; }
  133. ul.products:after {
  134. clear: both; }
  135. ul.products li.product {
  136. list-style: none;
  137. position: relative;
  138. margin-bottom: 1.6em;
  139. transition: 0.3s; }
  140. ul.products li.product .woocommerce-loop-product__title {
  141. background: #85cc36;
  142. color: #fff;
  143. font-size: inherit;
  144. line-height: inherit;
  145. margin: 0 0 0.8em;
  146. max-width: 350px;
  147. padding: 0.8em;
  148. position: relative; }
  149. ul.products li.product .star-rating {
  150. margin-bottom: .8em; }
  151. ul.products li.product img {
  152. display: block; }
  153. ul.products li.product .button {
  154. padding: 0.8em;
  155. max-width: 100%;
  156. word-wrap: break-word; }
  157. ul.products li.product .button:before, ul.products li.product .button:after {
  158. content: "";
  159. display: table; }
  160. ul.products li.product .button:after {
  161. clear: both; }
  162. ul.products li.product:hover {
  163. -webkit-transform: translateY(-0.5em);
  164. -moz-transform: translateY(-0.5em);
  165. -ms-transform: translateY(-0.5em);
  166. -o-transform: translateY(-0.5em);
  167. transform: translateY(-0.5em); }
  168. ul.products li.product:hover .onsale {
  169. -webkit-transform: scale(0);
  170. -moz-transform: scale(0);
  171. -ms-transform: scale(0);
  172. -o-transform: scale(0);
  173. transform: scale(0);
  174. opacity: 0; }
  175. @media screen and (min-width: 768px) {
  176. ul.products li.product {
  177. width: 30.7966666667%;
  178. float: left;
  179. margin-right: 3.8%; }
  180. ul.products li.product.first {
  181. clear: both; }
  182. ul.products li.product.last {
  183. margin-right: 0; }
  184. .columns-1 ul.products li.product {
  185. float: none;
  186. width: 100%; }
  187. .columns-2 ul.products li.product {
  188. width: 48.1%; }
  189. .columns-3 ul.products li.product {
  190. width: 30.7966666667%; }
  191. .columns-4 ul.products li.product {
  192. width: 22.15%; }
  193. .columns-5 ul.products li.product {
  194. width: 16.96%; }
  195. .columns-6 ul.products li.product {
  196. width: 13.4933333333%; } }
  197. /**
  198. * Single product
  199. */
  200. /**
  201. * Single Product
  202. */
  203. .single-product div.product {
  204. position: relative; }
  205. .single-product div.product:before, .single-product div.product:after {
  206. content: "";
  207. display: table; }
  208. .single-product div.product:after {
  209. clear: both; }
  210. .single-product div.product .product_title {
  211. margin-bottom: 1.6rem; }
  212. .single-product div.product .product_title + .woocommerce-product-rating {
  213. margin-top: -1rem; }
  214. .single-product div.product .woocommerce-product-rating {
  215. font-size: 1rem;
  216. margin-bottom: 1.6em; }
  217. .single-product div.product .woocommerce-product-rating .star-rating {
  218. margin: 0 4px 0 0;
  219. float: left; }
  220. .single-product div.product .woocommerce-product-rating .star-rating span:before {
  221. color: #333; }
  222. .single-product div.product span.onsale {
  223. z-index: 9; }
  224. .single-product div.product p.price {
  225. font-size: 21.6px;
  226. font-size: 1.35rem;
  227. margin-top: 0;
  228. margin-bottom: 1.1em;
  229. font-size: 1.35rem; }
  230. .single-product div.product .woocommerce-image-wrapper {
  231. position: relative;
  232. margin-bottom: 1em; }
  233. .single-product div.product .woocommerce-product-gallery {
  234. position: relative;
  235. width: 100%; }
  236. .single-product div.product .woocommerce-product-gallery:before, .single-product div.product .woocommerce-product-gallery:after {
  237. content: "";
  238. display: table; }
  239. .single-product div.product .woocommerce-product-gallery:after {
  240. clear: both; }
  241. .single-product div.product .woocommerce-product-gallery img {
  242. display: block; }
  243. .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  244. margin: 0; }
  245. .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  246. position: absolute;
  247. right: 0;
  248. display: block;
  249. height: 2em;
  250. width: 2em;
  251. margin: 0.4em;
  252. text-align: center;
  253. z-index: 99; }
  254. .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
  255. content: "\f402";
  256. display: block;
  257. font-family: Genericons;
  258. line-height: 2;
  259. background: #fff;
  260. color: #333;
  261. border-radius: 100%; }
  262. .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger img {
  263. display: none !important; }
  264. .single-product div.product .woocommerce-product-gallery .flex-viewport {
  265. margin-bottom: 1em; }
  266. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  267. margin: 0;
  268. padding: 0; }
  269. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs:before, .single-product div.product .woocommerce-product-gallery .flex-control-thumbs:after {
  270. content: "";
  271. display: table; }
  272. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs:after {
  273. clear: both; }
  274. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  275. list-style: none;
  276. cursor: pointer;
  277. float: left; }
  278. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  279. opacity: .5; }
  280. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  281. opacity: 1; }
  282. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
  283. opacity: 1; }
  284. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
  285. width: 48.1%; }
  286. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
  287. margin-right: 0; }
  288. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
  289. clear: both; }
  290. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
  291. width: 30.7966666667%; }
  292. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
  293. margin-right: 0; }
  294. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
  295. clear: both; }
  296. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
  297. width: 22.15%; }
  298. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
  299. margin-right: 0; }
  300. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
  301. clear: both; }
  302. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
  303. width: 16.96%; }
  304. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
  305. margin-right: 0; }
  306. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
  307. clear: both; }
  308. .single-product div.product form.cart,
  309. .single-product div.product div.product_meta {
  310. margin-bottom: 1.6em; }
  311. .single-product div.product form.cart div.quantity {
  312. float: left;
  313. margin: 0 4px 0 0; }
  314. .single-product div.product form.cart .variations {
  315. background-color: transparent;
  316. margin-bottom: 1em; }
  317. .single-product div.product form.cart .variations td,
  318. .single-product div.product form.cart .variations th {
  319. vertical-align: top;
  320. padding: 0; }
  321. .single-product div.product form.cart .variations .label {
  322. padding-right: 1em;
  323. font-weight: bold; }
  324. .single-product div.product form.cart .variations select {
  325. width: 100%; }
  326. .single-product div.product form.cart .single_variation_wrap .woocommerce-variation > p {
  327. margin-bottom: 1.6em; }
  328. .stock:empty:before {
  329. display: none; }
  330. .stock.in-stock {
  331. color: #0f834d; }
  332. .stock.out-of-stock {
  333. color: #e2401c; }
  334. /**
  335. * Reviews
  336. */
  337. #reviews #comments ol.commentlist {
  338. margin-left: 0;
  339. margin-bottom: 1em; }
  340. #reviews #comments ol.commentlist:before, #reviews #comments ol.commentlist:after {
  341. content: "";
  342. display: table; }
  343. #reviews #comments ol.commentlist:after {
  344. clear: both; }
  345. #reviews #comments ol.commentlist li {
  346. position: relative;
  347. margin-bottom: 1.5em;
  348. width: 100%; }
  349. #reviews #comments ol.commentlist li:before, #reviews #comments ol.commentlist li:after {
  350. content: "";
  351. display: table; }
  352. #reviews #comments ol.commentlist li:after {
  353. clear: both; }
  354. #reviews #comments ol.commentlist li:last-child {
  355. margin-bottom: 0; }
  356. #reviews #comments ol.commentlist li img.avatar {
  357. float: left;
  358. position: absolute;
  359. top: 0;
  360. left: 0;
  361. width: 32px;
  362. border-radius: 100%; }
  363. #reviews #comments ol.commentlist li .meta {
  364. margin: 0;
  365. color: #999999; }
  366. #reviews #comments ol.commentlist li .comment-text {
  367. margin: 0 0 0 50px; }
  368. #reviews #comments ol.commentlist li .comment-text p {
  369. margin-top: 0; }
  370. #reviews #comments ol.commentlist li .star-rating {
  371. float: right; }
  372. #reviews #comments ol.commentlist li .star-rating span:before {
  373. color: #333; }
  374. #review_form #respond .comment-reply-title {
  375. display: block; }
  376. #review_form #respond .comment-form-comment label {
  377. top: 1px;
  378. left: 1px;
  379. width: auto;
  380. background: #fff;
  381. border-radius: 5px; }
  382. #review_form #respond #comment {
  383. display: block;
  384. height: 100px; }
  385. #review_form #respond p {
  386. margin-bottom: 1em; }
  387. #review_form #respond p.form-submit {
  388. margin-bottom: 0; }
  389. #review_form p.stars {
  390. margin-top: 0;
  391. margin-bottom: 1em; }
  392. #review_form p.stars a {
  393. box-shadow: none; }
  394. .woocommerce-noreviews {
  395. background: none; }
  396. /**
  397. * Attributes table
  398. */
  399. table.shop_attributes {
  400. background-color: rgba(0, 0, 0, 0.02);
  401. border-top: 1px dotted rgba(0, 0, 0, 0.1); }
  402. table.shop_attributes th {
  403. width: 150px;
  404. padding: 8px;
  405. border-bottom: 1px dotted rgba(0, 0, 0, 0.1); }
  406. table.shop_attributes td {
  407. font-style: italic;
  408. padding: 0;
  409. border-bottom: 1px dotted rgba(0, 0, 0, 0.1); }
  410. table.shop_attributes tr:nth-child(even) th,
  411. table.shop_attributes tr:nth-child(even) td {
  412. background: rgba(0, 0, 0, 0.025); }
  413. /**
  414. * Checkout
  415. */
  416. .form-row {
  417. margin: 0 0 1.6em; }
  418. .form-row label {
  419. display: block;
  420. line-height: 2; }
  421. .form-row input[type="text"],
  422. .form-row input[type="password"],
  423. .form-row textarea {
  424. width: 100%; }
  425. .form-row input[type="checkbox"] {
  426. margin-right: .5em; }
  427. table.shop_table th {
  428. background: #85cc36;
  429. color: #fff;
  430. padding: 8px 5px;
  431. text-align: left; }
  432. .woocommerce #payment {
  433. background: rgba(0, 0, 0, 0.02);
  434. margin-bottom: 1.6em; }
  435. .woocommerce #payment ul.payment_methods {
  436. list-style: none;
  437. margin: 0;
  438. border-bottom: 1px solid rgba(153, 153, 153, 0.2);
  439. padding: 1.6em; }
  440. .woocommerce #payment ul.payment_methods li {
  441. clear: both; }
  442. .woocommerce #payment ul.payment_methods li input {
  443. margin: 0 1em 0 0; }
  444. .woocommerce #payment ul.payment_methods li img {
  445. vertical-align: middle;
  446. margin: -2px 0 0 .5em;
  447. position: relative; }
  448. .woocommerce #payment ul.payment_methods li .payment_box {
  449. background: #fff;
  450. border: 1px solid rgba(153, 153, 153, 0.2);
  451. border-radius: 10px;
  452. margin: 0.8em 0;
  453. padding: 0.8em; }
  454. .woocommerce #payment ul.payment_methods li .payment_box p:first-child {
  455. margin-top: 0; }
  456. .woocommerce #payment ul.payment_methods li .payment_box p:last-child {
  457. margin-bottom: 0; }
  458. .woocommerce #payment ul.payment_methods li .about_paypal {
  459. float: right; }
  460. .woocommerce #payment .form-row {
  461. margin: 0;
  462. padding: 1.6em; }
  463. .woocommerce #payment .form-row:before, .woocommerce #payment .form-row:after {
  464. content: "";
  465. display: table; }
  466. .woocommerce #payment .form-row:after {
  467. clear: both; }
  468. .woocommerce #payment .form-row .button {
  469. width: auto;
  470. float: right; }
  471. .woocommerce-shipping-fields h3 {
  472. font-size: 1rem;
  473. font-weight: normal;
  474. text-transform: none; }
  475. ul#shipping_method {
  476. margin-left: 0;
  477. list-style: none; }
  478. .woocommerce-thankyou-order-received,
  479. .woocommerce-thankyou-order-details {
  480. background: rgba(0, 0, 0, 0.02);
  481. padding: 1.6em; }
  482. .woocommerce-thankyou-order-details {
  483. list-style: none;
  484. margin: 0; }
  485. .woocommerce-thankyou-order-details:before, .woocommerce-thankyou-order-details:after {
  486. content: "";
  487. display: table; }
  488. .woocommerce-thankyou-order-details:after {
  489. clear: both; }
  490. .woocommerce-thankyou-order-details li {
  491. float: left;
  492. text-transform: uppercase;
  493. font-size: .715em;
  494. line-height: 1;
  495. border-right: 1px dashed #d3ced2;
  496. padding: 0 2em 0 0;
  497. margin: 0 2em 1.6em 0; }
  498. .woocommerce-thankyou-order-details li strong {
  499. display: block;
  500. font-size: 1.4em;
  501. text-transform: none;
  502. line-height: 1.5; }
  503. .woocommerce-thankyou-order-details li:last-of-type {
  504. border: none;
  505. margin-bottom: 0; }
  506. .woocommerce-thankyou-order-received {
  507. background-color: #85cc36;
  508. color: #fff;
  509. margin-bottom: 0; }
  510. @media screen and (min-width: 768px) {
  511. .col2-set .form-row-first {
  512. float: left;
  513. margin-right: 3.8%; }
  514. .col2-set .form-row-last {
  515. float: right;
  516. margin-right: 0; }
  517. .col2-set .form-row-first,
  518. .col2-set .form-row-last {
  519. width: 48.1%; } }
  520. /**
  521. * My account
  522. */
  523. .woocommerce-account .entry-header {
  524. margin-bottom: 1.6em; }
  525. .woocommerce-account .entry-content .woocommerce:before, .woocommerce-account .entry-content .woocommerce:after {
  526. content: "";
  527. display: table; }
  528. .woocommerce-account .entry-content .woocommerce:after {
  529. clear: both; }
  530. .woocommerce-account .woocommerce-MyAccount-navigation {
  531. margin-bottom: 1.6em }
  532. .woocommerce-account .woocommerce-MyAccount-navigation ul {
  533. list-style: none;
  534. margin: 0; }
  535. .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  536. color: #333; }
  537. .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  538. color: #6636cc; }
  539. .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:hover {
  540. color: #85cc36; }
  541. .woocommerce-account .woocommerce-MyAccount-content .button {
  542. word-wrap: normal;
  543. word-break: normal;
  544. display: inline-block;
  545. margin: 0.2em; }
  546. @media screen and (min-width: 768px) {
  547. .woocommerce-account .woocommerce-MyAccount-navigation {
  548. display: block; }
  549. .woocommerce-account .woocommerce-MyAccount-navigation ul li {
  550. display: inline-block;
  551. margin-right: .8em; }
  552. .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-of-type {
  553. margin-right: 0; } }
  554. /**
  555. * Cart
  556. */
  557. .woocommerce-cart .entry-header {
  558. margin-bottom: 1.6em; }
  559. /**
  560. * General WooCommerce components
  561. */
  562. /**
  563. * Header cart
  564. */
  565. .site-header-cart {
  566. position: relative;
  567. margin: -1.6em 0 0;
  568. padding: 1em 0 1.6em 0;
  569. list-style: none; }
  570. .site-header-cart:before, .site-header-cart:after {
  571. content: "";
  572. display: table; }
  573. .site-header-cart:after {
  574. clear: both; }
  575. .site-header-cart .cart-contents {
  576. text-decoration: none;
  577. white-space: nowrap; }
  578. .site-header-cart .cart-contents .amount {
  579. color: #333; }
  580. .site-header-cart .cart-contents .count {
  581. margin-left: .25rem;
  582. font-size: .85rem;
  583. font-weight: normal;
  584. color: #7a7c84; }
  585. .site-header-cart .cart-contents:before {
  586. content: "\f447";
  587. display: inline-block;
  588. font-family: Genericons;
  589. margin-right: .35rem;
  590. vertical-align: bottom; }
  591. .site-header-cart .widget_shopping_cart {
  592. display: none;
  593. background-color: #fafafa;
  594. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  595. padding: 1.6em;
  596. margin: -1em 0 0 0; }
  597. .site-header-cart .product_list_widget {
  598. margin: 0;
  599. padding: 0; }
  600. /**
  601. * Breadcrumbs
  602. */
  603. .woocommerce-breadcrumb {
  604. margin: 0 0 1.6em; }
  605. /**
  606. * Pagination
  607. */
  608. .woocommerce-pagination {
  609. margin: 0 0 1.6em; }
  610. .woocommerce-pagination ul {
  611. margin: 0; }
  612. .woocommerce-pagination ul li {
  613. display: inline-block;
  614. list-style: none;
  615. height: 1.6em;
  616. line-height: 1.6em;
  617. margin: 0 0.2em 0.2em 0;
  618. text-align: center;
  619. width: 1.6em; }
  620. .woocommerce-pagination ul li span.current,
  621. .woocommerce-pagination ul li a {
  622. display: block; }
  623. .woocommerce-pagination ul li a {
  624. background: rgba(0, 0, 0, 0.02); }
  625. .woocommerce-pagination ul li span.current,
  626. .woocommerce-pagination ul li a:hover {
  627. background: #85cc36;
  628. color: #fff; }
  629. /**
  630. * Infinite Scroll
  631. */
  632. .infinite-scroll .woocommerce-pagination {
  633. display: none; }
  634. .infinite-scroll.woocommerce-page .infinite-loader {
  635. margin: 1em auto;
  636. width: 2.1em; }
  637. /**
  638. * Onsale
  639. */
  640. .onsale {
  641. background: #6636cc;
  642. color: #fff;
  643. left: 0.4em;
  644. position: absolute;
  645. padding: 0.4em 0.8em;
  646. top: 0.4em;
  647. transition: 0.3s; }
  648. /**
  649. * Price
  650. */
  651. span.price,
  652. p.price {
  653. display: block;
  654. color: #333;
  655. margin-bottom: 0.8em; }
  656. span.price del,
  657. p.price del {
  658. opacity: .5; }
  659. span.price ins,
  660. p.price ins {
  661. background: transparent; }
  662. /**
  663. * Sorting
  664. */
  665. .woocommerce-result-count {
  666. margin: 0 0 .8em; }
  667. .woocommerce-ordering {
  668. margin: 0 0 1.6em;
  669. width: 100%; }
  670. /**
  671. * Star rating
  672. */
  673. .star-rating {
  674. overflow: hidden;
  675. position: relative;
  676. height: 1.618em;
  677. line-height: 1.618;
  678. font-size: 1em;
  679. width: 5.3em;
  680. font-family: 'star';
  681. font-weight: 400; }
  682. .star-rating:before {
  683. content: "\53\53\53\53\53";
  684. opacity: .25;
  685. float: left;
  686. top: 0;
  687. left: 0;
  688. position: absolute; }
  689. .star-rating span {
  690. overflow: hidden;
  691. float: left;
  692. top: 0;
  693. left: 0;
  694. position: absolute;
  695. padding-top: 1.5em; }
  696. .star-rating span:before {
  697. content: "\53\53\53\53\53";
  698. top: 0;
  699. position: absolute;
  700. left: 0;
  701. color: #6636cc; }
  702. p.stars a {
  703. position: relative;
  704. height: 1em;
  705. width: 1em;
  706. text-indent: -999em;
  707. display: inline-block;
  708. text-decoration: none;
  709. margin-right: 1px;
  710. font-weight: 400; }
  711. p.stars a:before {
  712. display: block;
  713. position: absolute;
  714. top: 0;
  715. left: 0;
  716. width: 1em;
  717. height: 1em;
  718. line-height: 1;
  719. font-family: "star";
  720. content: "\53";
  721. color: #333;
  722. text-indent: 0;
  723. opacity: .25; }
  724. p.stars a:hover ~ a:before {
  725. content: "\53";
  726. color: #333;
  727. opacity: .25; }
  728. p.stars:hover a:before {
  729. content: "\53";
  730. color: #6636cc;
  731. opacity: 1; }
  732. p.stars.selected a.active:before {
  733. content: "\53";
  734. color: #6636cc;
  735. opacity: 1; }
  736. p.stars.selected a.active ~ a:before {
  737. content: "\53";
  738. color: #333;
  739. opacity: .25; }
  740. p.stars.selected a:not(.active):before {
  741. content: "\53";
  742. color: #6636cc;
  743. opacity: 1; }
  744. /**
  745. * Tabs
  746. */
  747. .woocommerce-tabs ul.tabs {
  748. list-style: none;
  749. margin: 0;
  750. padding: 0 0 0 calc(1.6em - 5px);
  751. text-align: left; }
  752. .woocommerce-tabs ul.tabs li {
  753. display: inline-block;
  754. margin: 0;
  755. position: relative; }
  756. .woocommerce-tabs ul.tabs li a {
  757. padding: 0.4em 0.8em;
  758. display: block;
  759. color: #333; }
  760. .woocommerce-tabs ul.tabs li.active a {
  761. background: rgba(0, 0, 0, 0.02);
  762. color: #6636cc; }
  763. .woocommerce-tabs .panel {
  764. background: rgba(0, 0, 0, 0.02);
  765. margin: 0 0 1.6em;
  766. padding: 0 1.6em 1.6em; }
  767. .woocommerce-tabs .panel h2:first-of-type {
  768. font-size: 20px;
  769. font-size: 1.25rem;
  770. margin-bottom: 1em;
  771. text-transform: none; }
  772. /**
  773. * Password strength meter
  774. */
  775. .woocommerce-password-strength {
  776. text-align: right; }
  777. .woocommerce-password-strength.strong {
  778. color: #0f834d; }
  779. .woocommerce-password-strength.short {
  780. color: #e2401c; }
  781. .woocommerce-password-strength.bad {
  782. color: #e2401c; }
  783. .woocommerce-password-strength.good {
  784. color: #3D9CD2; }
  785. /**
  786. * Forms
  787. */
  788. .form-row.woocommerce-validated label {
  789. color: #0f834d; }
  790. .form-row.woocommerce-validated input.input-text {
  791. border-color: #0f834d; }
  792. .form-row.woocommerce-invalid label {
  793. color: #e2401c; }
  794. .form-row.woocommerce-invalid input.input-text {
  795. border-color: #e2401c; }
  796. .required {
  797. color: red; }
  798. .quantity .qty {
  799. width: 3.631em;
  800. text-align: center; }
  801. /**
  802. * Notices
  803. */
  804. .woocommerce-message,
  805. .woocommerce-info,
  806. .woocommerce-error,
  807. .woocommerce-noreviews,
  808. p.no-comments {
  809. clear: both;
  810. position: relative;
  811. background-color: rgba(0, 0, 0, 0.02);
  812. color: inherit;
  813. margin-left: 0;
  814. margin-bottom: 1.6em;
  815. padding: 1.6em 2em 1.6em 4em;
  816. list-style: none;
  817. font-size: 18px;
  818. font-size: 1.125rem; }
  819. .woocommerce-message:before, .woocommerce-message:after,
  820. .woocommerce-info:before,
  821. .woocommerce-info:after,
  822. .woocommerce-error:before,
  823. .woocommerce-error:after,
  824. .woocommerce-noreviews:before,
  825. .woocommerce-noreviews:after,
  826. p.no-comments:before,
  827. p.no-comments:after {
  828. content: "";
  829. display: table; }
  830. .woocommerce-message:after,
  831. .woocommerce-info:after,
  832. .woocommerce-error:after,
  833. .woocommerce-noreviews:after,
  834. p.no-comments:after {
  835. clear: both; }
  836. .woocommerce-message .button,
  837. .woocommerce-info .button,
  838. .woocommerce-error .button,
  839. .woocommerce-noreviews .button,
  840. p.no-comments .button {
  841. float: right;
  842. padding: 0.1667em 0.6668em;
  843. margin-left: 1em; }
  844. .woocommerce-message:before,
  845. .woocommerce-info:before,
  846. .woocommerce-error:before,
  847. .woocommerce-noreviews:before,
  848. p.no-comments:before {
  849. content: '\f418';
  850. font-family: Genericons;
  851. color: #0f834d;
  852. border-radius: 100%;
  853. line-height: 1;
  854. position: absolute;
  855. text-align: center;
  856. left: 1.6em;
  857. font-size: 1.35rem;
  858. top: 1.6em;
  859. width: 1em;
  860. height: 1em; }
  861. .woocommerce-info:before,
  862. .woocommerce-noreviews:before,
  863. p.no-comments:before {
  864. content: '\f456';
  865. color: #3D9CD2; }
  866. .woocommerce-error:before {
  867. content: '\f414';
  868. color: #e2401c; }
  869. .demo_store {
  870. position: fixed;
  871. left: 0;
  872. bottom: 0;
  873. right: 0;
  874. margin: 0;
  875. padding: 1em;
  876. background-color: #6636cc;
  877. color: #fff;
  878. z-index: 9999; }
  879. .demo_store a {
  880. color: rgba(255, 255, 255, 0.75); }
  881. .demo_store a:hover {
  882. color: inherit; }
  883. .demo_store .woocommerce-store-notice__dismiss-link {
  884. float: right; }
  885. .demo_store .woocommerce-store-notice__dismiss-link:before {
  886. content: "\f405";
  887. display: inline-block;
  888. font-family: Genericons;
  889. vertical-align: middle; }
  890. /**
  891. * Buttons
  892. */
  893. .woocommerce #respond input#submit,
  894. .woocommerce a.button,
  895. .woocommerce button.button,
  896. .woocommerce button.button.alt,
  897. .woocommerce input.button,
  898. .woocommerce input.button.alt {
  899. border: 2px solid;
  900. border-color: #6636cc;
  901. border-radius: 10px;
  902. background: transparent;
  903. box-shadow: none;
  904. color: #6636cc;
  905. cursor: pointer;
  906. display: inline-block;
  907. font-weight: bold;
  908. font-size: 16px;
  909. font-size: 1rem;
  910. -webkit-font-smoothing: inherit;
  911. letter-spacing: 1px;
  912. line-height: 1;
  913. padding: 0.8em;
  914. text-align: center;
  915. text-shadow: none;
  916. text-decoration: none;
  917. text-transform: uppercase;
  918. transition: 0.3s; }
  919. .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit:focus,
  920. .woocommerce a.button:hover,
  921. .woocommerce a.button:focus,
  922. .woocommerce button.button:hover,
  923. .woocommerce button.button:focus,
  924. .woocommerce button.button.alt:hover,
  925. .woocommerce button.button.alt:focus,
  926. .woocommerce input.button:hover,
  927. .woocommerce input.button:focus,
  928. .woocommerce input.button.alt:hover,
  929. .woocommerce input.button.alt:focus {
  930. background: transparent;
  931. border-color: #85cc36;
  932. box-shadow: none;
  933. color: #85cc36; }
  934. .woocommerce #respond input#submit.disabled, .woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit:disabled[disabled],
  935. .woocommerce a.button.disabled,
  936. .woocommerce a.button:disabled,
  937. .woocommerce a.button:disabled[disabled],
  938. .woocommerce button.button.disabled,
  939. .woocommerce button.button:disabled,
  940. .woocommerce button.button:disabled[disabled],
  941. .woocommerce button.button.alt.disabled,
  942. .woocommerce button.button.alt:disabled,
  943. .woocommerce button.button.alt:disabled[disabled],
  944. .woocommerce input.button.disabled,
  945. .woocommerce input.button:disabled,
  946. .woocommerce input.button:disabled[disabled],
  947. .woocommerce input.button.alt.disabled,
  948. .woocommerce input.button.alt:disabled,
  949. .woocommerce input.button.alt:disabled[disabled] {
  950. background: transparent;
  951. border-color: #6636cc;
  952. color: #6636cc;
  953. cursor: not-allowed;
  954. opacity: 0.5;
  955. padding: 0.8em; }
  956. .woocommerce #respond input#submit.disabled:hover, .woocommerce #respond input#submit:disabled:hover, .woocommerce #respond input#submit:disabled[disabled]:hover,
  957. .woocommerce a.button.disabled:hover,
  958. .woocommerce a.button:disabled:hover,
  959. .woocommerce a.button:disabled[disabled]:hover,
  960. .woocommerce button.button.disabled:hover,
  961. .woocommerce button.button:disabled:hover,
  962. .woocommerce button.button:disabled[disabled]:hover,
  963. .woocommerce button.button.alt.disabled:hover,
  964. .woocommerce button.button.alt:disabled:hover,
  965. .woocommerce button.button.alt:disabled[disabled]:hover,
  966. .woocommerce input.button.disabled:hover,
  967. .woocommerce input.button:disabled:hover,
  968. .woocommerce input.button:disabled[disabled]:hover,
  969. .woocommerce input.button.alt.disabled:hover,
  970. .woocommerce input.button.alt:disabled:hover,
  971. .woocommerce input.button.alt:disabled[disabled]:hover {
  972. background: transparent;
  973. border-color: #6636cc;
  974. color: #6636cc;
  975. cursor: not-allowed;
  976. opacity: 0.5;
  977. padding: 0.8em; }
  978. .footer-widgets-wrapper a.button,
  979. .footer-widgets-wrapper .woocommerce button.button {
  980. color: white;
  981. border-color: white; }
  982. .footer-widgets-wrapper a.button:hover,
  983. .footer-widgets-wrapper .woocommerce button.button:hover {
  984. opacity: 1;
  985. color: white;
  986. border-color: white; }
  987. a.ajax_add_to_cart.loading:after, a.ajax_add_to_cart.added:after {
  988. font-family: Genericons;
  989. margin-left: .53em;
  990. vertical-align: bottom; }
  991. a.ajax_add_to_cart.loading {
  992. opacity: .25; }
  993. a.ajax_add_to_cart.loading:after {
  994. content: '\f445'; }
  995. a.ajax_add_to_cart.added:after {
  996. content: '\f418'; }
  997. a.added_to_cart {
  998. display: block;
  999. padding-top: 0.8em; }
  1000. @media screen and (min-width: 768px) {
  1001. /**
  1002. * Sorting
  1003. */
  1004. .woocommerce-result-count {
  1005. float: left;
  1006. margin-bottom: 1.6em; }
  1007. .woocommerce-ordering {
  1008. float: right;
  1009. width: auto; }
  1010. /**
  1011. * Related products
  1012. */
  1013. .related ul.products li.product,
  1014. .upsells ul.products li.product {
  1015. width: 48.1%; }
  1016. /**
  1017. * Header cart
  1018. */
  1019. .woocommerce-active .main-navigation {
  1020. margin-left: auto; }
  1021. .site-header-cart {
  1022. margin-top: 0;
  1023. margin-left: 1.6em;
  1024. padding-top: 1.6em; }
  1025. .site-header-cart .widget_shopping_cart {
  1026. position: absolute;
  1027. top: 100%;
  1028. width: 300px;
  1029. z-index: 999999;
  1030. right: -999em; }
  1031. .site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart {
  1032. right: 0;
  1033. display: block; } }
  1034. /**
  1035. * WooCommerce widgets
  1036. */
  1037. /**
  1038. * WooCommerce Product List
  1039. */
  1040. .widget.woocommerce ul.product_list_widget li > a {
  1041. display: block; }
  1042. .widget.woocommerce ul.product_list_widget li img {
  1043. max-width: 2.617924em;
  1044. float: right; }
  1045. .widget.woocommerce ul.product_list_widget li .remove {
  1046. display: block;
  1047. font-size: 1.5em;
  1048. line-height: 1;
  1049. color: #333;
  1050. border-radius: 100%;
  1051. text-decoration: none;
  1052. font-weight: 700;
  1053. box-shadow: none;
  1054. opacity: .5;
  1055. text-align: center;
  1056. margin: .65rem .75rem 1rem 0;
  1057. height: 1em;
  1058. width: 1em;
  1059. float: left; }
  1060. /**
  1061. * WooCommerce Price Filter
  1062. */
  1063. .widget_price_filter .price_slider {
  1064. margin-bottom: 1.5em; }
  1065. .widget_price_filter .price_slider_amount {
  1066. text-align: right;
  1067. line-height: 2.4em; }
  1068. .widget_price_filter .price_slider_amount .button {
  1069. float: left; }
  1070. .widget_price_filter .ui-slider {
  1071. position: relative;
  1072. text-align: left; }
  1073. .widget_price_filter .ui-slider .ui-slider-handle {
  1074. position: absolute;
  1075. z-index: 2;
  1076. width: 1em;
  1077. height: 1em;
  1078. cursor: ew-resize;
  1079. outline: none;
  1080. background: #333;
  1081. box-sizing: border-box;
  1082. margin-top: -.25em;
  1083. opacity: 1;
  1084. border-radius: 100%;
  1085. margin-left: -1px; }
  1086. .widget_price_filter .ui-slider .ui-slider-handle:last-child {
  1087. margin-left: -.9em; }
  1088. .widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
  1089. box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1); }
  1090. .widget_price_filter .ui-slider .ui-slider-range {
  1091. position: absolute;
  1092. z-index: 1;
  1093. display: block;
  1094. border: 0;
  1095. background: #333; }
  1096. .widget_price_filter .price_slider_wrapper .ui-widget-content {
  1097. background: rgba(0, 0, 0, 0.1); }
  1098. .widget_price_filter .ui-slider-horizontal {
  1099. height: .5em; }
  1100. .widget_price_filter .ui-slider-horizontal .ui-slider-range {
  1101. height: 100%; }
  1102. .footer-widgets-wrapper .ui-slider .ui-slider-handle,
  1103. .footer-widgets-wrapper .ui-slider .ui-slider-range {
  1104. background: #ffffff; }
  1105. /**
  1106. * WooCommerce Average Rating
  1107. */
  1108. .widget_rating_filter ul li {
  1109. padding: 0.8em 0 0; }
  1110. .widget_rating_filter ul li .star-rating {
  1111. display: inline-block;
  1112. vertical-align: bottom; }
  1113. /**
  1114. * WooCommerce Product Search
  1115. */
  1116. .widget_product_search form {
  1117. text-align: right; }
  1118. .widget_product_search input[type="search"] {
  1119. width: 100%; }
  1120. .widget_product_search input[type="submit"] {
  1121. margin-top: 0.8em; }
  1122. /**
  1123. * WooCommerce Cart
  1124. */
  1125. .widget_shopping_cart .total {
  1126. border-top: 1px solid rgba(153, 153, 153, 0.2);
  1127. padding: 0.8em 0;
  1128. text-align: right; }
  1129. .widget_shopping_cart .woocommerce-mini-cart__buttons {
  1130. margin-bottom: 0; }
  1131. .widget_shopping_cart .woocommerce-mini-cart__buttons .button {
  1132. display: block; }
  1133. .widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout {
  1134. margin-top: 0.8em; }
  1135. /**
  1136. * Footer & Header
  1137. */
  1138. .header-widget-area ins,
  1139. .footer-widgets-wrapper ins {
  1140. background-color: #ffee4b;
  1141. color: #333; }
  1142. .header-widget-area .star-rating span:before,
  1143. .footer-widgets-wrapper .star-rating span:before {
  1144. color: #ffffff; }
  1145. .footer-widgets-wrapper .widget.woocommerce ul.product_list_widget li .remove {
  1146. color: #ffffff; }