.patternarea
{
overflow: hidden;
}


.patternsummary
{
/*display: flex;
align-items: flex-start;*/
}

.summarypiczone
{
width: 60%;
display: flex;
align-items: flex-start;
}

.summarypicleft
{
float: left; /*trying to get the text to wrap*/
margin-right: 10px;
}

.summarypicright
{
float: right; /*trying to get the text to wrap*/
margin-left: 10px;
}

.summarypic
{
    width: 100%;
    border-radius: var(--imageradius);
    margin-bottom: 10px;
/*    flex-grow: 1;*/
}

.mainpiczone /* at the top of each separate pattern page */
{
width: 100%;
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}



/*.summaryright deprecating for having the image float inline
{
display; inline;
width: 100%;
padding-left:20px;
display: flex;
flex-direction:column;
gap: 10px 10px;
}*/

.summarytext
{
min-width: 120px;
}

.verticalbuttons
{
    margin-bottom: 0;
}

.normalsize
{
  visibility: visible;
  width: auto;
  height: auto;
}

.minisize
{
  visibility: hidden;
  width: 0;
  height: 0;
  flex-grow: 0;
  padding-left: 0;
  align-content: flex-start;
}


.cart
{
margin-right: 20px;
}

                /* mobile formatting section */
                @media screen and (max-width: 681px){ /*with just making the screen wider and narrower, there will be a horizontal scroll bar appear if it's not about 20px wider cutoff than my header width*/
                 .patternsummary
                {
                    flex-direction: column;
                }

                /*.summarypic
                {
                    width: 90%;
                }*/

                .summarypiczone
                {
                width: 100%;
                display: flex;
                }

                .summaryright
                {
                width: 100%;
                padding-left: 0;
                flex-direction: row-reverse;
                flex-wrap: wrap;
                align-items: flex-start;
                }

                .verticalbuttons
                {
                    margin-top: 16px;
                }


                .normalsize
                {
                  visibility: hidden;
                  width: 0;
                  height: 0;
                }

                .minisize
                {
                  visibility: visible;
                  width: 38px;
                  height: auto;
                  padding-left: 10px;
                }

                .minilabel
                {
                  visibility: hidden;
                  width: 0;
                  height: 0;
                }
                .maxilabel
                {
                  visibility: hidden;
                  width: 0;
                  height: 0;
                }

                .button
                {
                  min-width: 38px;
                }

                .buttoncontents
                {
                    gap: 0;
                }
/*                .cart
                {
                margin-right: 0;
                }*/


                }


                }/* this is the end of the mobile formatting */




















#myheader h1
{
  margin-bottom: 0px;
}


                /* mobile formatting section */
                /*@media screen and (max-width: 978px){ /*with just making the screen wider and narrower, there will be a horizontal scroll bar appear if it's not about 20px wider cutoff than my header width*/

                /*}/* this is the end of the narrow screen version of the header*/





                /*@media screen and (max-width: 450px){

                .purchasebutton
                {
                font-size: 12px;
                }

                @media screen and (max-width: 410px){

                .purchasebutton
                {
                font-size: 10px;
                }*/

                }/* this is the end of the extra narrow screen version of the header*/