/*
Theme Name:         Custom Theme
Theme URI:          http://particlesmedia.com
Github Theme URI:   https://github.com/olefredrik/FoundationPress
Description:        ParticlesMedia is a WordPress starter theme based on FoundationPress by Ole Fredrik
Template:           particlesmedia
Version:            1.0.0
Author:             Ernest Sadowski
Author URI:         http://ernestsadowski.com/

License:            MIT License
License URI:        http://www.opensource.org/licenses/mit-license.php
*/

/* ----------------------------------------------------------------------------

  Unfortunately WordPress will require a style.css file
  located in the theme's root folder for stuff to work.

  However, we will not be using vanilla CSS. We're using Sass.

  Sass is a superset of CSS that adds in amazing features
  such as variables, nested selectors and loops. It's also
  the easiest way to customize Foundation.

  All Sass files are located in the /assets/scss folder.
  Please note that none of your scss files will be compiled to /stylesheets/foundation.css before you run
  'npm run watch' or 'npm run build'.

  Please read the README.md file before getting started. More info on how
  to use Sass with Foundation can be found here:
  http://foundation.zurb.com/docs/sass.html

  If you for some reason would like to write plain css instead of using Sass,
  you could just enqueue this file (style.css) to the header and add your styles in this file

---------------------------------------------------------------------------- */

/* This file IS enqueued (see functions.php) and loads after the parent's
   foundation.css. All child-theme overrides go here. */

/* ---------------------------------------------------------------------------
   Product grid cards (shop / category / related products)
   Parent sets title 1.5rem and price 1.8rem at every width, which in 2-column
   mobile cards wraps one word per line and lets long words spill past the
   card edge. Scale type to the card, allow long words to break.
--------------------------------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.woocommerce ul.products li.product .price {
	font-size: 1.125rem;
}

.woocommerce ul.products li.product .price del {
	font-size: 0.8rem;
}

@media screen and (min-width: 40em) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 1.25rem;
	}

	.woocommerce ul.products li.product .price {
		font-size: 1.5rem;
	}
}

/* ---------------------------------------------------------------------------
   Single product gallery (WooSwipe)
   The main image renders at its fixed 400px attachment size, overflowing
   narrow viewports and making the whole page scroll sideways.
--------------------------------------------------------------------------- */
.woocommerce div.product div.images,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
	max-width: 100%;
}

.woocommerce div.product div.images img {
	max-width: 100%;
	height: auto;
}

/* Long product names on the single product page */
.woocommerce div.product .product_title {
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   Small-screen WooCommerce layout (basket table, account orders, checkout)
   The parent theme ships these rules in _woocommerce-smallscreen.scss but
   never imports that file into its compiled foundation.css, so the basket
   keeps its 4-column desktop table on phones and overflows the viewport.
   Ported from that file at WooCommerce's standard 768px breakpoint.
--------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	/* Stack responsive tables: hide headers, label each cell via data-title */
	.woocommerce table.shop_table_responsive thead,
	.woocommerce-page table.shop_table_responsive thead,
	.woocommerce table.shop_table_responsive tbody th,
	.woocommerce-page table.shop_table_responsive tbody th {
		display: none;
	}

	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		display: block;
	}

	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		display: block;
		text-align: right !important;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		content: attr(data-title) ": ";
		font-weight: 700;
		float: left;
	}

	.woocommerce table.shop_table_responsive tr td.product-remove::before,
	.woocommerce-page table.shop_table_responsive tr td.product-remove::before,
	.woocommerce table.shop_table_responsive tr td.actions::before,
	.woocommerce-page table.shop_table_responsive tr td.actions::before,
	.woocommerce table.shop_table_responsive tr td.order-actions::before,
	.woocommerce-page table.shop_table_responsive tr td.order-actions::before {
		display: none;
	}

	.woocommerce table.shop_table_responsive tr td.order-actions,
	.woocommerce-page table.shop_table_responsive tr td.order-actions {
		text-align: left !important;
	}

	.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
	.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
		background-color: rgba(0, 0, 0, 0.025);
	}

	/* Basket specifics: drop the thumbnail column, stack the coupon controls */
	.woocommerce table.cart .product-thumbnail,
	.woocommerce-page table.cart .product-thumbnail {
		display: none;
	}

	.woocommerce table.cart td.actions,
	.woocommerce-page table.cart td.actions {
		text-align: left;
	}

	.woocommerce table.cart td.actions .coupon,
	.woocommerce-page table.cart td.actions .coupon {
		float: none;
		padding-bottom: 0.5em;
	}

	.woocommerce table.cart td.actions .coupon::after,
	.woocommerce-page table.cart td.actions .coupon::after {
		content: "";
		display: table;
		clear: both;
	}

	.woocommerce table.cart td.actions .coupon input,
	.woocommerce-page table.cart td.actions .coupon input,
	.woocommerce table.cart td.actions .coupon .button,
	.woocommerce-page table.cart td.actions .coupon .button {
		width: 48%;
		box-sizing: border-box;
	}

	.woocommerce table.cart td.actions .coupon .input-text + .button,
	.woocommerce-page table.cart td.actions .coupon .input-text + .button {
		float: right;
	}

	.woocommerce table.cart td.actions .button,
	.woocommerce-page table.cart td.actions .button {
		display: block;
		width: 100%;
	}

	.woocommerce .cart-collaterals .cart_totals,
	.woocommerce-page .cart-collaterals .cart_totals,
	.woocommerce .cart-collaterals .shipping_calculator,
	.woocommerce-page .cart-collaterals .shipping_calculator,
	.woocommerce .cart-collaterals .cross-sells,
	.woocommerce-page .cart-collaterals .cross-sells {
		width: 100%;
		float: none;
		text-align: left;
	}

	/* Stack two-column layouts (checkout/login, addresses) */
	.woocommerce .col2-set .col-1,
	.woocommerce-page .col2-set .col-1,
	.woocommerce .col2-set .col-2,
	.woocommerce-page .col2-set .col-2 {
		float: none;
		width: 100%;
	}

	.woocommerce #payment #place_order,
	.woocommerce-page #payment #place_order {
		float: none;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 1em;
	}

	.woocommerce .lost_reset_password .form-row-first,
	.woocommerce-page .lost_reset_password .form-row-first,
	.woocommerce .lost_reset_password .form-row-last,
	.woocommerce-page .lost_reset_password .form-row-last {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}