/* Shared Austrian Ski Hats product page styles.
   Upload this file alongside your HTML pages.
   Use the same pompon-* classes on all hat product pages. */


		.col-group > div {
  padding: 1em;
}
@media screen and (min-width: 44em) {
  .col-group {
    overflow: hidden;
  }
  .col-group > div {
    float: left;
    width: 50%;
  }
  .col-group > div:nth-child(odd) {
    clear: left;
  }
}
@media screen and (min-width: 64em) {
  .col-group > div {
    width: 25%;
  }
  .col-group > div:nth-child(odd) {
    clear: none;
  }
}
	hr.style-one {
    border: 0;
    height: 3px;
    background: #3498db;
    background-image: linear-gradient(to right, #ccc, #3498db, #ccc);
}
	


/* ======================================================
   POMPON HATS SHOP STYLES
   Edit colors, spacing, card size and mobile layout here.
   All product information is in the MAIN section below.
   ====================================================== */
.pompon-shop {
    max-width:1250px;
    margin:0 auto;
    padding:34px 24px 80px;
    color:#243247;
    font-family:Arial,sans-serif
}
.pompon-intro {
    text-align:center;
    margin:0 auto 35px;
    max-width:760px
}
.pompon-intro h1 {
    font-size:clamp(30px,4vw,46px);
    font-weight:700;
    margin:0 0 12px;
    color:#162b45
}
.pompon-intro p {
    font-size:15px;
    line-height:1.7;
    color:#637084
}
.pompon-intro a {
    color:#17679e;
    text-decoration:underline
}
.pompon-cart {
    text-align:center;
    margin:0 0 38px
}
.pompon-cart form {
    display:inline-block
}
.pompon-collection {
    margin:0 0 44px
}
.pompon-collection-heading {
    border-bottom:1px solid #e1e7ee;
    padding-bottom:15px;
    margin-bottom:22px
}
.pompon-collection-heading h2 {
    font-size:24px;
    font-weight:700;
    line-height:1.3;
    color:#1b304b;
    margin:0 0 6px
}
.pompon-collection-heading p {
    color:#778294;
    font-size:13px;
    line-height:1.6;
    margin:0
}
.pompon-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px
}
.pompon-card {
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid #e5e9ee;
    border-radius:12px;
    box-shadow:0 3px 15px rgba(25,48,76,.055);
    transition:transform .2s,box-shadow .2s
}
.pompon-card:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(25,48,76,.12)
}
.pompon-photo {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f7f8fa;
    aspect-ratio:1 / 1;
    padding:15px;
    overflow:hidden
}
.pompon-photo img {
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain;
    border:0!important;
    padding:0!important;
    transition:transform .25s
}
.pompon-photo:hover img {
    transform:scale(1.055)
}
.pompon-card-body {
    padding:18px;
    display:flex;
    flex:1;
    flex-direction:column;
    text-align:left
}
.pompon-name {
    font-size:15px;
    font-weight:700;
    line-height:1.45;
    color:#26364c;
    margin:0 0 7px;
    min-height:43px
}
.pompon-sku {
    font-size:12px;
    color:#8390a0;
    margin:0 0 12px
}
.pompon-price {
    font-size:23px;
    font-weight:700;
    color:#193e66;
    margin:auto 0 15px
}
.pompon-card form {
    margin:0;
    width:100%
}
.pompon-card form input[type=image] {
    display:none
}
.pompon-buy {
    display:block;
    width:100%;
    background:#175b91;
    color:white;
    border:0;
    border-radius:7px;
    padding:12px 10px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:background .2s
}
.pompon-buy:hover,.pompon-buy:focus {
    background:#0d426e;
    color:white
}
@media(max-width:1050px) {
    .pompon-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
}
@media(max-width:760px) {
    .pompon-shop {
    padding:26px 17px 60px
}
.pompon-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
}
.pompon-card-body {
    padding:13px
}
.pompon-collection-heading h2 {
    font-size:21px
}
.pompon-name {
    font-size:14px
}
.pompon-price {
    font-size:20px
}
}
@media(max-width:430px) {
    .pompon-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
}
.pompon-photo {
    padding:7px
}
.pompon-card-body {
    padding:10px
}
.pompon-name {
    font-size:13px;
    min-height:55px
}
.pompon-buy {
    font-size:12px;
    padding:11px 5px
}
.pompon-price {
    font-size:19px
}
}