woocommerce.css 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716
  1. /*
  2. Theme Name: Dyad 2
  3. WooCommerce styles override
  4. */
  5. /**
  6. * Shop tables
  7. */
  8. table.shop_table {
  9. border: none;
  10. border-top: 1px solid #ddd;
  11. }
  12. table.shop_table td,
  13. table.shop_table th {
  14. border-left: none;
  15. padding: 10px;
  16. }
  17. table.shop_table tr:hover {
  18. background: transparent;
  19. }
  20. table.shop_table .product-thumbnail img {
  21. min-width: 32px;
  22. width: 80px;
  23. }
  24. table.shop_table td.product-quantity .quantity input {
  25. width: 5em;
  26. }
  27. table.shop_table td.actions {
  28. padding-left: 0;
  29. padding-right: 0;
  30. }
  31. table.shop_table td.actions .button {
  32. float: right;
  33. }
  34. table.shop_table td.actions .coupon {
  35. float: left;
  36. width: 70%;
  37. }
  38. table.shop_table td.actions .coupon .button {
  39. border: 1px solid #678db8;
  40. float: none;
  41. }
  42. table.shop_table td.actions .coupon label {
  43. display: none;
  44. }
  45. table.shop_table td.actions .coupon input[type=text] {
  46. line-height: 1.3125;
  47. margin-right: 0.5em;
  48. padding: 0.875em;
  49. }
  50. table.shop_table tbody .wc-item-meta {
  51. font-size: .875em;
  52. margin: .875em 0 0 0;
  53. list-style: none;
  54. }
  55. table.shop_table tbody .wc-item-meta p {
  56. margin: 0;
  57. padding: 0;
  58. }
  59. @media only screen and (max-width: 1200px) {
  60. .has-post-thumbnail .shop_table .actions .coupon {
  61. width: 50%;
  62. }
  63. }
  64. table.shop_table tfoot {
  65. border-top: 2px solid #ddd;
  66. }
  67. table.shop_table_responsive thead {
  68. display: none;
  69. }
  70. table.shop_table_responsive tbody th {
  71. display: none;
  72. }
  73. table.shop_table_responsive tr td {
  74. display: block;
  75. text-align: right;
  76. clear: both;
  77. }
  78. table.shop_table_responsive tr td:before {
  79. content: attr(data-title) ": ";
  80. float: left;
  81. }
  82. table.shop_table_responsive tr td.product-remove a {
  83. font-weight: bold;
  84. text-align: left;
  85. text-decoration: none;
  86. }
  87. table.shop_table_responsive tr td.product-remove:before,
  88. table.shop_table_responsive tr td.actions:before,
  89. table.shop_table_responsive tr td.download-actions:before {
  90. display: none;
  91. }
  92. table.shop_table_responsive tr td.download-actions .button {
  93. display: block;
  94. text-align: center;
  95. }
  96. @media screen and (min-width: 768px) {
  97. table.shop_table_responsive thead {
  98. display: table-header-group;
  99. }
  100. table.shop_table_responsive tbody th {
  101. display: table-cell;
  102. }
  103. table.shop_table_responsive tr th, table.shop_table_responsive tr td {
  104. text-align: left;
  105. }
  106. table.shop_table_responsive tr td {
  107. display: table-cell;
  108. }
  109. table.shop_table_responsive tr td:before {
  110. display: none;
  111. }
  112. }
  113. @media only screen and (min-width: 961px) {
  114. .has-post-thumbnail .shop_table td.actions .coupon input {
  115. margin-bottom: 0.25em;
  116. }
  117. }
  118. /**
  119. * Shopping Cart
  120. **/
  121. .cart-collaterals h2 {
  122. font-size: 2.25rem;
  123. }
  124. .cart-collaterals .cross-sells ul.products li {
  125. width: 48%;
  126. }
  127. .cart-collaterals .cross-sells {
  128. float: left;
  129. width: 45%;
  130. }
  131. .cart-collaterals .cart_totals {
  132. float: right;
  133. width: 50%;
  134. }
  135. .cart-collaterals .checkout-button {
  136. display: block;
  137. padding: 1.5em;
  138. text-align: center;
  139. }
  140. @media only screen and (min-width: 961px) {
  141. .has-post-thumbnail .cart-collaterals .cross-sells,
  142. .has-post-thumbnail .cart-collaterals .cart_totals {
  143. float: none;
  144. width: 100%;
  145. }
  146. }
  147. @media only screen and (min-width: 1200px) {
  148. .woocommerce-page.has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header {
  149. padding: 3em 0 0;
  150. text-align: center;
  151. }
  152. .woocommerce-page.has-post-thumbnail .entry-content {
  153. padding-top: 3rem;
  154. }
  155. }
  156. /**
  157. * Products
  158. */
  159. .onsale {
  160. background-color: #678db8;
  161. color: #fff;
  162. display: inline-block;
  163. font-size: 1.3rem;
  164. letter-spacing: .1em;
  165. margin-bottom: 1em;
  166. padding: 10px 15px;
  167. text-transform: uppercase;
  168. }
  169. ul.products {
  170. content: '';
  171. display: table;
  172. table-layout: fixed;
  173. margin: 0;
  174. padding: 0;
  175. width: 100%;
  176. }
  177. ul.products li.product {
  178. list-style: none;
  179. margin-bottom: 2em;
  180. text-align: center;
  181. }
  182. ul.products li.product a {
  183. display: block;
  184. margin: auto;
  185. position: relative;
  186. }
  187. ul.products li.product a:hover,
  188. ul.products li.product a:active {
  189. text-decoration: none;
  190. }
  191. ul.products li.product .woocommerce-loop-product__title {
  192. font-size: 1.6rem;
  193. }
  194. ul.products li.product img {
  195. display: block;
  196. margin: 0 auto;
  197. max-width: 100%;
  198. }
  199. ul.products li.product span.price {
  200. display: block;
  201. padding-bottom: 1em;
  202. }
  203. ul.products li.product .added_to_cart {
  204. display: block;
  205. margin-top: 0.5em;
  206. }
  207. ul.products li.product .button.loading,
  208. ul.products li.product .button.added {
  209. text-decoration: none;
  210. }
  211. ul.products li.product .button.loading::after,
  212. ul.products li.product .button.added::after {
  213. font-family: Genericons;
  214. margin-left: 0.5em;
  215. vertical-align: bottom;
  216. }
  217. ul.products li.product .button.loading::after {
  218. content: '\f445';
  219. }
  220. ul.products li.product .button.added::after {
  221. content: '\f418';
  222. }
  223. .product .button,
  224. ul.products li.product .button {
  225. background: #e7ae01;
  226. display: inline-block;
  227. white-space: normal;
  228. }
  229. .woocommerce .products {
  230. margin-top: 1.5em;
  231. }
  232. .woocommerce .products:before,
  233. .woocommerce .products:after {
  234. clear: both;
  235. content: '';
  236. display: table;
  237. }
  238. dl.variation {
  239. font-size: .875em;
  240. margin: .875em 0 0 0;
  241. }
  242. dl.variation dd,
  243. dl.variation p {
  244. margin: 0;
  245. padding: 0;
  246. }
  247. @media screen and (min-width: 768px) {
  248. body.woocommerce .products {
  249. margin: 0 auto;
  250. max-width: 1080px;
  251. }
  252. ul.products li.product {
  253. width: 30.7966666667%;
  254. float: left;
  255. margin-right: 3.8%;
  256. }
  257. ul.products li.product.first {
  258. clear: both;
  259. }
  260. ul.products li.product.last {
  261. margin-right: 0;
  262. }
  263. .columns-1 ul.products li.product {
  264. float: none;
  265. width: 100%;
  266. }
  267. .columns-2 ul.products li.product {
  268. width: 48.1%;
  269. }
  270. .columns-3 ul.products li.product {
  271. width: 30.7966666667%;
  272. }
  273. .columns-4 ul.products li.product {
  274. width: 22.15%;
  275. }
  276. .columns-5 ul.products li.product {
  277. width: 16.96%;
  278. }
  279. .columns-6 ul.products li.product {
  280. width: 13.4933333333%;
  281. }
  282. }
  283. /**
  284. * Single product
  285. */
  286. .is-singular.single-product .site-inner {
  287. float: none;
  288. width: auto;
  289. }
  290. .is-singular.single-product #primary {
  291. margin: 0 auto;
  292. max-width: 700px;
  293. }
  294. .is-singular.single-product #sidebar ul {
  295. margin-left: 0;
  296. }
  297. .single-product .product:before,
  298. .single-product .product:after,
  299. .single-product .product section:first-of-type::before,
  300. .single-product .product section:first-of-type::after {
  301. content: '';
  302. left: 50%;
  303. position: absolute;
  304. top: 0;
  305. }
  306. .single-product div.product:before {
  307. color: #fff;
  308. content: "\f100";
  309. font-family: "Genericons";
  310. font-size: 2.5rem;
  311. line-height: 36px;
  312. margin: -18px 0 0 -18px;
  313. text-align: center;
  314. width: 36px;
  315. z-index: 4;
  316. }
  317. .single-product div.product:after {
  318. background: #e7ae01;
  319. border-radius: 30px;
  320. content: '';
  321. display: table;
  322. height: 36px;
  323. margin: -18px 0 0 -18px;
  324. table-layout: fixed;
  325. width: 36px;
  326. }
  327. .single-product div.product {
  328. margin-top: 50px;
  329. padding-top: 50px;
  330. position: relative;
  331. }
  332. .single-product div.product .woocommerce-product-gallery {
  333. position: relative;
  334. }
  335. .single-product div.product .woocommerce-product-gallery img {
  336. display: block;
  337. margin-right: auto;
  338. margin-left: auto;
  339. }
  340. .single-product .woocommerce-product-gallery__image {
  341. text-align: center;
  342. }
  343. .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  344. background: #678db8;
  345. display: block;
  346. height: 36px;
  347. overflow: hidden;
  348. position: absolute;
  349. right: 0;
  350. text-align: center;
  351. text-indent: -9em;
  352. top: 0;
  353. width: 36px;
  354. z-index: 1;
  355. }
  356. .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
  357. color: #fff;
  358. content: "\f402";
  359. font-family: "Genericons";
  360. line-height: 36px;
  361. margin: -18px 0 0 -18px;
  362. position: absolute;
  363. right: 0;
  364. text-indent: 0;
  365. top: 50%;
  366. width: 36px;
  367. z-index: 4;
  368. }
  369. .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger img {
  370. display: none !important;
  371. }
  372. .single-product div.product .woocommerce-product-gallery .flex-viewport {
  373. margin-bottom: 1em;
  374. }
  375. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  376. content: '';
  377. display: table;
  378. margin: 0 auto;
  379. padding: 0;
  380. table-layout: fixed;
  381. text-align: center;
  382. width: 100%;
  383. }
  384. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  385. cursor: pointer;
  386. display: inline-block;
  387. list-style: none;
  388. }
  389. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  390. opacity: .5;
  391. }
  392. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  393. opacity: 1;
  394. }
  395. .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
  396. opacity: 1;
  397. }
  398. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
  399. width: 48.1%;
  400. }
  401. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
  402. margin-right: 0;
  403. }
  404. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
  405. clear: both;
  406. }
  407. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
  408. width: 30.7966666667%;
  409. }
  410. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
  411. margin-right: 0;
  412. }
  413. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
  414. clear: both;
  415. }
  416. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
  417. width: 22.15%;
  418. }
  419. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
  420. margin-right: 0;
  421. }
  422. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
  423. clear: both;
  424. }
  425. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
  426. width: 16.96%;
  427. }
  428. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
  429. margin-right: 0;
  430. }
  431. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
  432. clear: both;
  433. }
  434. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-6 .flex-control-thumbs li {
  435. margin: 0 1.42857%;
  436. width: 14.2857%;
  437. }
  438. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-6 .flex-control-thumbs li:nth-child(6n) {
  439. margin-right: 0;
  440. }
  441. .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-6 .flex-control-thumbs li:nth-child(6n+1) {
  442. clear: both;
  443. margin-left: 0;
  444. }
  445. .single-product div.product .summary {
  446. text-align: center;
  447. padding: 3rem 0;
  448. }
  449. .single-product .summary .quantity {
  450. display: inline-block;
  451. width: 4em;
  452. }
  453. .single-product .summary .quantity input {
  454. padding: 0.72em;
  455. vertical-align: top;
  456. }
  457. .single-product div.product form.cart .variations {
  458. background-color: transparent;
  459. margin-bottom: 1em;
  460. border: 0;
  461. table-layout: auto;
  462. }
  463. .single-product div.product form.cart .variations tr:hover {
  464. background: transparent;
  465. }
  466. .single-product div.product form.cart .variations td,
  467. .single-product div.product form.cart .variations th {
  468. border: 0;
  469. padding: 0 0 .5em 0;
  470. text-align: left;
  471. vertical-align: top;
  472. }
  473. .single-product div.product form.cart .variations .label {
  474. font-weight: bold;
  475. padding-right: 1em;
  476. text-align: right;
  477. width: calc( 40% - 1em );
  478. }
  479. .single-product div.product form.cart .variations .value {
  480. text-align: left;
  481. width: 60%;
  482. }
  483. .single-product div.product form.cart .variations .reset_variations {
  484. padding: 0 1em;
  485. }
  486. .single-product .summary .button {
  487. vertical-align: top;
  488. }
  489. .single-product .product .woocommerce-product-rating,
  490. .single-product .product .price,
  491. .single-product .product .product_meta {
  492. padding-top: 1em;
  493. }
  494. .single-product .woocommerce-review-link {
  495. display: block;
  496. font-style: italic;
  497. line-height: 1.618;
  498. margin-bottom: 1em;
  499. vertical-align: top;
  500. }
  501. .single-product div.product .price {
  502. display: block;
  503. padding-top: 0;
  504. padding-bottom: 1.5em;
  505. }
  506. .single-product div.product .price .amount {
  507. font-weight: 700;
  508. font-size: 2rem;
  509. }
  510. .single-product .product_meta {
  511. font-size: 75%;
  512. letter-spacing: 0.1em;
  513. margin: 1em 0;
  514. text-transform: uppercase;
  515. }
  516. .single-product .product_meta > span {
  517. display: block;
  518. }
  519. .single-product .product_meta span a {
  520. text-transform: capitalize;
  521. }
  522. @media only screen and (max-width: 768px) {
  523. .single-product div.product .summary,
  524. .single-product .up-sells,
  525. .single-product div.product .woocommerce-tabs .panel {
  526. padding: 3rem;
  527. }
  528. .related.products h2 {
  529. text-align: center;
  530. }
  531. }
  532. @media only screen and (max-width: 700px) {
  533. .single-product div.product {
  534. width: 100%;
  535. }
  536. }
  537. /**
  538. * Separator
  539. */
  540. .single-product .product section:first-of-type::before {
  541. border-top: 1px solid #e0e0e0;
  542. left: 37.5%;
  543. right: 37.5%;
  544. }
  545. .single-product .product section:first-of-type::after {
  546. background-color: #e7ae01;
  547. border-radius: 12px;
  548. height: 12px;
  549. margin: -6px 0 0 -6px;
  550. width: 12px;
  551. }
  552. .single-product .product section {
  553. margin-top: 2em;
  554. padding-top: 2em;
  555. position: relative;
  556. }
  557. .stock:empty:before {
  558. display: none;
  559. }
  560. .stock.in-stock {
  561. color: #0f834d;
  562. }
  563. .stock.out-of-stock {
  564. color: #e2401c;
  565. font-size: 2rem;
  566. font-weight: bold;
  567. }
  568. .single-product div.product .product_title {
  569. margin-top: 1rem;
  570. margin-bottom: 1rem;
  571. }
  572. /**
  573. * Checkout
  574. */
  575. .woocommerce-cart #payment ul.payment_methods,
  576. .woocommerce #payment ul.payment_methods,
  577. #add_payment_method #payment ul.payment_methods,
  578. #shipping_method {
  579. list-style: none;
  580. margin-left: 0;
  581. }
  582. .woocommerce #payment ul.payment_methods li .payment_box {
  583. background: #eee;
  584. font-size: 0.88em;
  585. margin: 1em 0;
  586. padding: 1em;
  587. }
  588. .woocommerce #payment ul.payment_methods li .payment_box p:last-child {
  589. padding-bottom: 0;
  590. }
  591. .woocommerce-cart #payment ul.payment_methods li input,
  592. .woocommerce #payment ul.payment_methods li input,
  593. #add_payment_method #payment ul.payment_methods li input {
  594. margin: 0 1em 0 0;
  595. }
  596. .woocommerce-cart #payment ul.payment_methods li img,
  597. .woocommerce #payment ul.payment_methods li img,
  598. #add_payment_method #payment ul.payment_methods li img {
  599. vertical-align: middle;
  600. margin: -5px 0 0 0.5em;
  601. }
  602. .woocommerce-cart #payment .payment_method_paypal img,
  603. .woocommerce #payment .payment_method_paypal img,
  604. #add_payment_method #payment .payment_method_paypal img {
  605. max-height: 55px;
  606. }
  607. .woocommerce-cart #payment .payment_method_paypal label,
  608. .woocommerce #payment .payment_method_paypal label,
  609. #add_payment_method #payment .payment_method_paypal label {
  610. line-height: 55px;
  611. }
  612. .woocommerce-cart #payment .payment_method_paypal .about_paypal,
  613. .woocommerce #payment .payment_method_paypal .about_paypal,
  614. #add_payment_method #payment .payment_method_paypal .about_paypal {
  615. float: right;
  616. font-size: 0.82em;
  617. line-height: 55px;
  618. }
  619. .woocommerce #payment .form-row .button {
  620. float: right;
  621. }
  622. #shipping_method {
  623. margin: 0;
  624. }
  625. #shipping_method li {
  626. line-height: 2;
  627. }
  628. #payment {
  629. margin-bottom: 5em;
  630. }
  631. ul.order_details {
  632. margin-left: 0;
  633. }
  634. ul.order_details li {
  635. display: inline-block;
  636. font-size: 0.8235em;
  637. line-height: 1;
  638. list-style: none;
  639. margin-right: 2em;
  640. margin-left: 0;
  641. padding-bottom: 1em;
  642. padding-left: 0;
  643. text-transform: uppercase;
  644. }
  645. ul.order_details li strong {
  646. display: block;
  647. font-size: 1.285714em;
  648. text-transform: none;
  649. line-height: 1.5;
  650. }
  651. /**
  652. * General layout styles
  653. */
  654. .col2-set {
  655. zoom: 1;
  656. width: 100%;
  657. }
  658. .col2-set::before,
  659. .col2-set::after {
  660. content: ' ';
  661. display: table;
  662. }
  663. .col2-set::after {
  664. clear: both;
  665. }
  666. .col2-set .col-1 {
  667. float: left;
  668. width: 48%;
  669. }
  670. .col2-set .col-2 {
  671. float: right;
  672. width: 48%;
  673. }
  674. @media screen and (min-width: 768px) {
  675. .col2-set .form-row-first {
  676. float: left;
  677. margin-right: 3.8%;
  678. }
  679. .col2-set .form-row-last {
  680. float: right;
  681. margin-right: 0;
  682. }
  683. .col2-set .form-row-first,
  684. .col2-set .form-row-last {
  685. width: 48.1%;
  686. }
  687. }
  688. @media only screen and (min-width: 961px) {
  689. .has-post-thumbnail .col2-set .col-1,
  690. .has-post-thumbnail .col2-set .col-2 {
  691. float: none;
  692. width: 100%;
  693. }
  694. }
  695. /**
  696. * Infinite Scroll
  697. */
  698. .infinite-scroll .woocommerce-pagination {
  699. display: none;
  700. }
  701. .infinite-loader {
  702. padding: 2.5em;
  703. }
  704. .woocommerce-page .posts {
  705. background-color: transparent;
  706. }
  707. /**
  708. * General WooCommerce components
  709. */
  710. /**
  711. * Cart page
  712. */
  713. .woocommerce-cart .entry-inner::before {
  714. content: "\f447";
  715. }
  716. /**
  717. * Header cart
  718. */
  719. .site-header-cart {
  720. display: table-cell;
  721. font-size: 1.4rem;
  722. position: relative;
  723. text-transform: uppercase;
  724. vertical-align: middle;
  725. width: 15%;
  726. }
  727. .site-header-cart a:hover {
  728. text-decoration: none;
  729. }
  730. .site-header-cart li {
  731. list-style: none;
  732. }
  733. .site-header-cart li:first-child {
  734. padding: 6px 0 10px;
  735. text-align: right;
  736. }
  737. .site-header-cart .cart-contents:before {
  738. content: "\f447";
  739. display: inline-block;
  740. font-family: "Genericons";
  741. margin-right: .35rem;
  742. vertical-align: bottom;
  743. }
  744. .site-header-cart .cart-contents {
  745. display: block;
  746. margin-left: 1.5em;
  747. text-decoration: none;
  748. }
  749. .site-header-cart .cart-contents .amount {
  750. font-weight: bold;
  751. }
  752. .site-header-cart .cart-contents .count {
  753. display: inline-block;
  754. opacity: 0.7;
  755. padding-left: 0.25rem;
  756. }
  757. .site-header-cart .widget_shopping_cart {
  758. text-align: center;
  759. }
  760. .site-header-cart .widget_shopping_cart_content {
  761. background-color: #292c2f;
  762. color: #fff;
  763. padding: 2em;
  764. text-shadow: none;
  765. }
  766. .site-header-cart .woocommerce-mini-cart__empty-message {
  767. padding-bottom: 0;
  768. }
  769. .site-header-cart .product_list_widget {
  770. margin: 0;
  771. padding: 0;
  772. }
  773. .site-header-cart .mini_cart_item:first-child {
  774. padding: 0;
  775. }
  776. .site-header-cart .mini_cart_item:after {
  777. content: '';
  778. display: table;
  779. clear: both;
  780. }
  781. .site-header-cart .widget_shopping_cart .mini_cart_item {
  782. border: none;
  783. margin-bottom: 2em;
  784. text-align: left;
  785. }
  786. .site-header-cart .widget_shopping_cart .mini_cart_item a img {
  787. float: left;
  788. height: auto;
  789. margin-right: 1em;
  790. width: 48px;
  791. }
  792. .site-header-cart .widget_shopping_cart .mini_cart_item a {
  793. font-weight: 700;
  794. opacity: 1;
  795. -webkit-transition: opacity 0.3s;
  796. transition: opacity 0.3s;
  797. }
  798. .site-header-cart .widget_shopping_cart .mini_cart_item a:hover {
  799. opacity: 0.7;
  800. }
  801. .widget_shopping_cart .mini_cart_item .remove {
  802. float: right;
  803. background-color: #678db8;
  804. border-radius: 50%;
  805. color: #fff;
  806. height: 1.2em;
  807. line-height: 1.2em;
  808. margin-top: 1em;
  809. text-align: center;
  810. vertical-align: middle;
  811. width: 1.2em;
  812. }
  813. .widget_shopping_cart .mini_cart_item .remove:hover {
  814. background-color: #fff;
  815. color: #292c2f;
  816. text-decoration: none;
  817. }
  818. .widget_shopping_cart .quantity {
  819. display: block;
  820. }
  821. .widget_shopping_cart .woocommerce-mini-cart__total {
  822. clear: both;
  823. margin-top: 1em;
  824. text-transform: capitalize;
  825. }
  826. .widget_shopping_cart .buttons a {
  827. margin-right: 5px;
  828. }
  829. @media only screen and (min-width: 961px) {
  830. /**
  831. * Header cart
  832. */
  833. .site-header-cart .widget_shopping_cart:before {
  834. border-color: transparent transparent #292c2f;
  835. border-style: solid;
  836. border-width: 0 10px 10px;
  837. content: '';
  838. height: 0;
  839. left: 75%;
  840. margin-left: -10px;
  841. position: absolute;
  842. top: -10px;
  843. width: 0;
  844. }
  845. .site-header-cart .widget_shopping_cart {
  846. background-color: #fff;
  847. box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  848. display: none;
  849. right: -999em;
  850. padding: 0;
  851. position: absolute;
  852. top: 100%;
  853. width: 300px;
  854. z-index: 99;
  855. }
  856. .site-header-cart:hover .widget_shopping_cart,
  857. .site-header-cart.focus .widget_shopping_cart {
  858. display: block;
  859. right: 0;
  860. }
  861. }
  862. @media only screen and (max-width: 960px) {
  863. .woocommerce-active #site-navigation {
  864. width: auto;
  865. }
  866. #masthead.site-header {
  867. padding-bottom: 2rem;
  868. }
  869. .site-header-cart {
  870. width: 10%;
  871. }
  872. .site-header-cart li:first-child {
  873. padding: 0;
  874. text-align: center;
  875. }
  876. .site-header-cart .cart-contents {
  877. margin-left: 0;
  878. }
  879. .site-header-cart .widget_shopping_cart {
  880. display: none;
  881. }
  882. .site-inner {
  883. margin-top: 1em;
  884. }
  885. ul.products li.product a {
  886. max-width: 360px;
  887. }
  888. }
  889. /**
  890. * Breadcrumbs
  891. */
  892. .woocommerce-breadcrumb {
  893. color: #c6cfd8;
  894. font-size: 1.4rem;
  895. letter-spacing: 0.1em;
  896. margin-bottom: 2em;
  897. padding: 2px 5px;
  898. text-align: center;
  899. text-transform: uppercase;
  900. }
  901. .woocommerce-breadcrumb a {
  902. color: #6a6c6e;
  903. }
  904. .woocommerce-result-count {
  905. padding-bottom: 0;
  906. text-align: center;
  907. }
  908. .woocommerce-ordering {
  909. margin-bottom: 1.5em;
  910. text-align: center;
  911. }
  912. @media only screen and (max-width: 480px) {
  913. .woocommerce .woocommerce-breadcrumb {
  914. margin-bottom: 0;
  915. }
  916. }
  917. /**
  918. * Page Navigation
  919. */
  920. nav.woocommerce-pagination {
  921. text-align: center;
  922. }
  923. nav.woocommerce-pagination ul {
  924. clear: both;
  925. margin: 1em auto 2em auto;
  926. }
  927. nav.woocommerce-pagination ul li {
  928. display: inline-block;
  929. padding: 0 0.25em;
  930. }
  931. nav.woocommerce-pagination ul li span.current {
  932. font-weight: bold;
  933. }
  934. nav.woocommerce-pagination ul li span.current,
  935. nav.woocommerce-pagination ul li a:hover,
  936. nav.woocommerce-pagination ul li a:focus {
  937. }
  938. /**
  939. * Star rating
  940. */
  941. .star-rating {
  942. display: inline-block;
  943. font-family: 'star';
  944. font-size: 1em;
  945. font-weight: 400;
  946. height: 1.618em;
  947. line-height: 1.618;
  948. margin: 0 auto 1em;
  949. overflow: hidden;
  950. position: relative;
  951. vertical-align: bottom;
  952. width: 5.3em;
  953. }
  954. .star-rating:before {
  955. content: "\53\53\53\53\53";
  956. opacity: .25;
  957. float: left;
  958. top: 0;
  959. left: 0;
  960. position: absolute;
  961. }
  962. .star-rating span {
  963. overflow: hidden;
  964. float: left;
  965. top: 0;
  966. left: 0;
  967. position: absolute;
  968. padding-top: 1.5em;
  969. }
  970. .star-rating span:before {
  971. content: "\53\53\53\53\53";
  972. top: 0;
  973. position: absolute;
  974. left: 0;
  975. color: #678db8;
  976. }
  977. #reviews .star-rating,
  978. .summary .star-rating {
  979. margin-bottom: 0;
  980. }
  981. .products .star-rating {
  982. display: block;
  983. }
  984. .widget .star-rating {
  985. margin: 0;
  986. }
  987. p.stars a {
  988. position: relative;
  989. height: 1em;
  990. width: 1em;
  991. text-indent: -999em;
  992. display: inline-block;
  993. text-decoration: none;
  994. margin-right: 1px;
  995. font-weight: 400;
  996. }
  997. p.stars a:before {
  998. display: block;
  999. position: absolute;
  1000. top: 0;
  1001. left: 0;
  1002. width: 1em;
  1003. height: 1em;
  1004. line-height: 1;
  1005. font-family: "star";
  1006. content: "\53";
  1007. color: #404040;
  1008. text-indent: 0;
  1009. opacity: .25;
  1010. }
  1011. p.stars a:hover ~ a:before {
  1012. content: "\53";
  1013. color: #404040;
  1014. opacity: .25;
  1015. }
  1016. p.stars:hover a:before {
  1017. content: "\53";
  1018. color: #678db8;
  1019. opacity: 1;
  1020. }
  1021. p.stars.selected a.active:before {
  1022. content: "\53";
  1023. color: #678db8;
  1024. opacity: 1;
  1025. }
  1026. p.stars.selected a.active ~ a:before {
  1027. content: "\53";
  1028. color: #404040;
  1029. opacity: .25;
  1030. }
  1031. p.stars.selected a:not(.active):before {
  1032. content: "\53";
  1033. color: #678db8;
  1034. opacity: 1;
  1035. }
  1036. /**
  1037. * Reviews
  1038. */
  1039. .single-product #reviews .comment-reply-title {
  1040. border-bottom: 2px solid #48515b;
  1041. color: #1a1c1e;
  1042. display: block;
  1043. font-family: "Noto Serif", Georgia, serif;
  1044. font-size: 2.0rem;
  1045. font-weight: 700;
  1046. line-height: 1.38;
  1047. margin-bottom: 1em;
  1048. padding-bottom: 0.75em;
  1049. }
  1050. .single-product #reviews .commentlist {
  1051. list-style: none;
  1052. margin-left: 0;
  1053. }
  1054. .single-product #reviews .comment {
  1055. margin-left: 100px;
  1056. padding: 0 0 4em;
  1057. }
  1058. .single-product #reviews .comment .avatar-container {
  1059. border-radius: 50%;
  1060. display: block;
  1061. float: left;
  1062. height: 80px;
  1063. left: 0;
  1064. overflow: hidden;
  1065. position: absolute;
  1066. width: 80px;
  1067. }
  1068. .single-product #reviews .comment .avatar {
  1069. height: 80px;
  1070. width: 80px;
  1071. }
  1072. .single-product #reviews .comment .meta {
  1073. border-bottom: 1px solid #d9dfe5;
  1074. font-size: 1.5rem;
  1075. margin-bottom: 1rem;
  1076. padding-bottom: 1rem;
  1077. }
  1078. .single-product #reviews .comment .meta strong {
  1079. font-size: 1.6rem;
  1080. letter-spacing: 0.1em;
  1081. text-transform: uppercase;
  1082. }
  1083. /**
  1084. * Tabs
  1085. */
  1086. .woocommerce-tabs {
  1087. border-top: 1px solid #d9dfe5;
  1088. margin-top: 4em;
  1089. }
  1090. .woocommerce-tabs ul.tabs {
  1091. list-style: none;
  1092. margin: 0;
  1093. padding: 0 0 0 1em;
  1094. position: relative;
  1095. text-align: left;
  1096. top: -24px;
  1097. }
  1098. .woocommerce-tabs ul.tabs li {
  1099. display: inline-block;
  1100. }
  1101. .woocommerce-tabs ul.tabs li a {
  1102. background: #fff;
  1103. border: 1px solid #d9dfe5;
  1104. display: inline-block;
  1105. font-size: 1.3rem;
  1106. letter-spacing: 0.1em;
  1107. padding: 13px 15px;
  1108. text-transform: uppercase;
  1109. }
  1110. .woocommerce-tabs ul.tabs li.active a {
  1111. background: #678db8;
  1112. border: none;
  1113. padding: 14px 16px;
  1114. color: #fff;
  1115. }
  1116. .is-singular div.product .woocommerce-tabs .entry-content {
  1117. padding-top: 0 !important;
  1118. }
  1119. .is-singular div.product .woocommerce-tabs .entry-content .shop_attributes p {
  1120. padding: 0;
  1121. }
  1122. .woocommerce-tabs .panel h2:first-of-type {
  1123. margin-bottom: 1em;
  1124. }
  1125. /**
  1126. * Password strength meter
  1127. */
  1128. .woocommerce-password-strength {
  1129. text-align: right;
  1130. }
  1131. .woocommerce-password-strength.strong {
  1132. color: #0f834d;
  1133. }
  1134. .woocommerce-password-strength.short {
  1135. color: #e2401c;
  1136. }
  1137. .woocommerce-password-strength.bad {
  1138. color: #e2401c;
  1139. }
  1140. .woocommerce-password-strength.good {
  1141. color: #3D9CD2;
  1142. }
  1143. /**
  1144. * Forms
  1145. */
  1146. .required {
  1147. color: red;
  1148. }
  1149. .woocommerce .form-row abbr {
  1150. border-bottom: none;
  1151. text-decoration: none;
  1152. }
  1153. .woocommerce .form-row label {
  1154. display: block;
  1155. }
  1156. .woocommerce .form-row label.checkbox {
  1157. display: inline;
  1158. }
  1159. .woocommerce .form-row select {
  1160. width: 100%;
  1161. }
  1162. .woocommerce .form-row .input-text {
  1163. box-sizing: border-box;
  1164. width: 100%;
  1165. }
  1166. .woocommerce .form-row-first,
  1167. .woocommerce .form-row-last {
  1168. width: 47%;
  1169. overflow: visible;
  1170. }
  1171. .woocommerce .form-row-first {
  1172. float: left;
  1173. }
  1174. .woocommerce .form-row-last {
  1175. float: right;
  1176. }
  1177. /**
  1178. * Notices
  1179. */
  1180. .woocommerce-message:before,
  1181. .woocommerce-message:after,
  1182. .woocommerce-info:before,
  1183. .woocommerce-info:after,
  1184. .woocommerce-error:before,
  1185. .woocommerce-error:after,
  1186. .woocommerce-noreviews:before,
  1187. .woocommerce-noreviews:after,
  1188. p.no-comments:before,
  1189. p.no-comments:after {
  1190. content: '';
  1191. display: table;
  1192. }
  1193. .woocommerce-message,
  1194. .woocommerce-info,
  1195. .woocommerce-error,
  1196. .woocommerce-noreviews,
  1197. p.no-comments {
  1198. background-color: #eee;
  1199. clear: both;
  1200. display: block;
  1201. list-style: none;
  1202. line-height: 2.4em;
  1203. margin: 0 auto 1.8em auto;
  1204. max-width: 1080px;
  1205. padding: 1em 2em 1em 3.5em;
  1206. position: relative;
  1207. }
  1208. .woocommerce-noreviews {
  1209. padding: 1em 2em 1em 2em;
  1210. }
  1211. @media screen and (max-width: 1080px) {
  1212. .woocommerce-message,
  1213. .woocommerce-info,
  1214. .woocommerce-error,
  1215. .woocommerce-noreviews,
  1216. p.no-comments {
  1217. margin-left: 5%;
  1218. margin-right: 5%;
  1219. }
  1220. }
  1221. .woocommerce-message:before,
  1222. .woocommerce-error:before,
  1223. .woocommerce-info:before {
  1224. display: inline-block;
  1225. font-family: "Genericons";
  1226. height: 1em;
  1227. position: absolute;
  1228. left: 1.4em;
  1229. line-height: 1;
  1230. top: 1.75em;
  1231. width: 1em;
  1232. }
  1233. .woocommerce-message:before {
  1234. content: '\f418';
  1235. color: #8fae1b;
  1236. }
  1237. .woocommerce-error:before {
  1238. content: '\f414';
  1239. color: #e2401c;
  1240. }
  1241. .woocommerce-info:before {
  1242. content: '\f456';
  1243. }
  1244. .woocommerce-message:after,
  1245. .woocommerce-info:after,
  1246. .woocommerce-error:after,
  1247. .woocommerce-noreviews:after,
  1248. p.no-comments:after {
  1249. clear: both;
  1250. }
  1251. .woocommerce-message .button,
  1252. .woocommerce-info .button,
  1253. .woocommerce-error .button,
  1254. .woocommerce-noreviews .button,
  1255. p.no-comments .button {
  1256. float: right;
  1257. line-height: 1;
  1258. margin-left: 2em;
  1259. }
  1260. .demo_store {
  1261. background-color: rgba(36,38,41,0.8);
  1262. bottom: 0;
  1263. color: #fff;
  1264. left: 0;
  1265. margin: 0;
  1266. padding: 1em;
  1267. position: fixed;
  1268. right: 0;
  1269. text-align: center;
  1270. text-shadow: 0 0 3px rgba(0,0,0,0.3);
  1271. z-index: 9999;
  1272. }
  1273. .woocommerce-demo-store .site {
  1274. margin-bottom: 4em;
  1275. }
  1276. /**
  1277. * WooCommerce widgets
  1278. */
  1279. /**
  1280. * WooCommerce Price Filter
  1281. */
  1282. .widget_price_filter .price_slider {
  1283. margin-bottom: 1.5em;
  1284. }
  1285. .widget_price_filter .price_slider_amount {
  1286. text-align: right;
  1287. line-height: 2.4em;
  1288. }
  1289. .widget_price_filter .price_slider_amount .button {
  1290. float: left;
  1291. }
  1292. .widget_price_filter .ui-slider {
  1293. position: relative;
  1294. text-align: left;
  1295. }
  1296. .widget_price_filter .ui-slider .ui-slider-handle {
  1297. position: absolute;
  1298. z-index: 2;
  1299. width: 1em;
  1300. height: 1em;
  1301. cursor: ew-resize;
  1302. outline: none;
  1303. background: #678db8;
  1304. box-sizing: border-box;
  1305. margin-top: -.25em;
  1306. opacity: 1;
  1307. }
  1308. .widget_price_filter .ui-slider .ui-slider-handle:last-child {
  1309. margin-left: -1em;
  1310. }
  1311. .widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
  1312. box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
  1313. }
  1314. .widget_price_filter .ui-slider .ui-slider-range {
  1315. position: absolute;
  1316. z-index: 1;
  1317. display: block;
  1318. border: 0;
  1319. background: #678db8;
  1320. }
  1321. .widget_price_filter .price_slider_wrapper .ui-widget-content {
  1322. background: rgba(0, 0, 0, 0.5);
  1323. }
  1324. .widget_price_filter .ui-slider-horizontal {
  1325. height: .5em;
  1326. }
  1327. .widget_price_filter .ui-slider-horizontal .ui-slider-range {
  1328. height: 100%;
  1329. }
  1330. .widget_rating_filter .wc-layered-nav-rating .star-rating {
  1331. display: inline-block;
  1332. height: 1em;
  1333. line-height: 1;
  1334. margin-bottom: 0.4em;
  1335. }
  1336. .product_list_widget li {
  1337. clear: both;
  1338. }
  1339. .product_list_widget li:before,
  1340. .product_list_widget li:after,
  1341. .form-row:before,
  1342. .form-row:after {
  1343. clear: both;
  1344. content: '';
  1345. display: table;
  1346. }
  1347. .product_list_widget li a {
  1348. display: block;
  1349. }
  1350. .product_list_widget a img {
  1351. float: left;
  1352. height: auto;
  1353. margin-right: 1em;
  1354. width: 60px;
  1355. }
  1356. .product_list_widget li .star-rating {
  1357. display: block;
  1358. }
  1359. .widget_product_search input[type="submit"] {
  1360. display: none;
  1361. }
  1362. /***
  1363. * Cart Widget
  1364. **/
  1365. .widget.widget_shopping_cart {
  1366. text-align: center;
  1367. }
  1368. .widget_shopping_cart .mini_cart_item {
  1369. text-align: left;
  1370. }
  1371. .widget_shopping_cart .buttons a {
  1372. color: #fff;
  1373. }
  1374. .widget_shopping_cart .buttons a:hover {
  1375. text-decoration: none;
  1376. }
  1377. /**
  1378. * My Account
  1379. **/
  1380. .form-row label.inline {
  1381. display: inline;
  1382. }
  1383. .woocommerce-account .entry-inner::before {
  1384. content: "\f470";
  1385. }
  1386. .woocommerce-form-login label {
  1387. display: block;
  1388. }
  1389. .woocommerce-form-login #rememberme {
  1390. margin: 0 0.25em 0 1em;
  1391. }
  1392. .woocommerce-account .woocommerce-MyAccount-content fieldset {
  1393. margin: 0 0 1.5em;
  1394. }
  1395. .woocommerce-account .woocommerce-MyAccount-content table .button {
  1396. word-wrap: normal;
  1397. word-break: normal;
  1398. display: inline-block;
  1399. margin: 0.25em;
  1400. }
  1401. .woocommerce-account .woocommerce-MyAccount-navigation ul {
  1402. margin-left: 0;
  1403. text-align: center;
  1404. }
  1405. .woocommerce-account .woocommerce-MyAccount-navigation li {
  1406. display: inline-block;
  1407. list-style: none;
  1408. margin-bottom: 0.5em;
  1409. }
  1410. .woocommerce-account .woocommerce-MyAccount-navigation li a {
  1411. border: 1px solid #ccc;
  1412. font-size: 0.88em;
  1413. padding: 4px 10px 5px;
  1414. text-decoration: none;
  1415. }
  1416. .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  1417. background: #999;
  1418. border: 1px solid #999;
  1419. color: #fff;
  1420. }
  1421. .woocommerce-account .woocommerce-orders-table a.button {
  1422. display: inline-block;
  1423. }
  1424. /**
  1425. * Buttons
  1426. **/
  1427. a.button {
  1428. text-decoration: none;
  1429. }
  1430. button[disabled],
  1431. input[disabled],
  1432. .button[disabled] {
  1433. background: transparent;
  1434. border: 1px solid #aaa;
  1435. color: #999;
  1436. cursor: not-allowed;
  1437. }